<!--
 =============================================================================================
  This file was AUTO-GENERATED by "SPA Views" Xomega.Net generator.
 
  Manual CHANGES to this file WILL BE LOST when the code is regenerated.
 =============================================================================================
-->
<div xmlns="http://www.w3.org/1999/xhtml" class="view-composition">
  <div>
    <div class="view with-footer" data-bind="with: $root">
      <div class="view-header"><span class="view-title" data-bind="text: ViewTitle"></span></div>
      <div class="view-body">
        <div class="content indented">
          <div data-bind="panel: { title: 'Criteria', collapsed: CriteriaCollapsed }">
            <div class="xw-obj" data-part="content"
                 data-bind="with: $root.ListObject.CriteriaObject">
              <table class="xw-fieldset-layout">
                <tr>
                  <td class="fieldColumn" style="width: 50%">
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlTerritoryId') }" class="label">Territory Id:</label>
                      <select data-bind="id: $root.id('ctlTerritoryId'), property: TerritoryId"></select></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlPersonNameOperator') }" class="label">Person Name:</label>
                      <select data-bind="id: $root.id('ctlPersonNameOperator'), property: PersonNameOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlPersonName'), property: PersonName" /></div>
                  </td>
                  <td class="fieldColumn" style="width: 50%">
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlStoreNameOperator') }" class="label">Store Name:</label>
                      <select data-bind="id: $root.id('ctlStoreNameOperator'), property: StoreNameOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlStoreName'), property: StoreName" /></div>
                    <div class="field">
                      <label data-bind="attr: { for: $root.id('ctlAccountNumberOperator') }" class="label">Account Number:</label>
                      <select data-bind="id: $root.id('ctlAccountNumberOperator'), property: AccountNumberOperator"
                              class="operator"></select>
                      <input data-bind="id: $root.id('ctlAccountNumber'), property: AccountNumber" /></div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div data-bind="msglist: { items: getErrorList().Errors }"></div>
          <div class="action-bar">
            <input type="button" value="Search" class="btn-search" data-bind="click: search" />
            <input type="button" value="Reset" class="btn-reset" data-bind="click: reset" />
            <a class="permalink" href="#" data-bind="click: permalink">PermaLink</a></div>
          <div class="xw-obj" data-bind="pager: { items: ListObject.List }">
            <div data-part="content" style="overflow: auto">
              <table class="grid" data-bind="css: { selectable: $root.ListObject.RowSelectionMode }">
                <caption>
                  <div data-bind="criteria: { AppliedCriteria: $root.ListObject.AppliedCriteria, AppliedCriteriaText: $root.ListObject.AppliedCriteriaText }"></div>
                </caption>
                <thead>
                  <tr data-bind="with: $root.ListObject">
                    <th data-bind="sortby: StoreName">Store Name</th>
                    <th data-bind="sortby: PersonName">Person Name</th>
                    <th data-bind="sortby: AccountNumber">Account Number</th>
                    <th data-bind="sortby: TerritoryId">Territory Id</th>
                  </tr>
                </thead>
                <tbody data-bind="foreach: pagedItems">
                  <tr data-bind="css: { selected: _selected }, click: toggleSelection">
                    <td><span data-bind="property: List.StoreName"></span></td>
                    <td><span data-bind="property: List.PersonName"></span></td>
                    <td><span data-bind="property: List.AccountNumber"></span></td>
                    <td><span data-bind="property: List.TerritoryId"></span></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="action-bar"></div>
        </div>
      </div>
      <div class="view-footer action-bar">
        <input type="button" value="Select" class="btn-select"
               data-bind="click: select, visible: hasSelect()" />
        <input type="button" value="Close" class="btn-close"
               data-bind="click: close, visible: hasClose()" /></div>
    </div>
  </div>
  <div>
    <div data-bind="compose: ActiveChildView"></div>
  </div>
</div>