<!--
 =============================================================================================
  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 class="view with-footer" data-bind="with: $root" data-width="800"
       data-height="680">
    <div class="view-header"><span class="view-title" data-bind="text: ViewTitle"></span></div>
    <div class="view-body">
      <div class="content indented">
        <div class="xw-obj indented">
          <fieldset data-bind="with: obj">
            <legend>Sales Order</legend>
            <table class="xw-fieldset-layout">
              <tr>
                <td class="fieldColumn" style="width: 50%">
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlSalesOrderNumber') }" class="label">Sales Order Number:</label>
                    <span data-bind="id: $root.id('ctlSalesOrderNumber'), property: SalesOrderNumber"></span></div>
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlOrderDate') }" class="label">Order Date:</label>
                    <span data-bind="id: $root.id('ctlOrderDate'), property: OrderDate"></span></div>
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlStatus') }" class="label">Status:</label>
                    <select data-bind="id: $root.id('ctlStatus'), property: Status"></select></div>
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlOnlineOrderFlag') }" class="label">Online Order Flag:</label>
                    <input data-bind="id: $root.id('ctlOnlineOrderFlag'), property: OnlineOrderFlag"
                           class="boolean"
                           type="checkbox" /></div>
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlPurchaseOrderNumber') }" class="label">Purchase Order Number:</label>
                    <input data-bind="id: $root.id('ctlPurchaseOrderNumber'), property: PurchaseOrderNumber" /></div>
                </td>
                <td class="fieldColumn" style="width: 50%">
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlAccountNumber') }" class="label">Account Number:</label>
                    <input data-bind="id: $root.id('ctlAccountNumber'), property: AccountNumber" /></div>
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlShipDate') }" class="label">Ship Date:</label>
                    <input data-bind="id: $root.id('ctlShipDate'), property: ShipDate" class="date" /></div>
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlComment') }" class="label">Comment:</label>
                    <input data-bind="id: $root.id('ctlComment'), property: Comment" /></div>
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlRevisionNumber') }" class="label">Revision Number:</label>
                    <span data-bind="id: $root.id('ctlRevisionNumber'), property: RevisionNumber"></span></div>
                  <div class="field">
                    <label data-bind="attr: { for: $root.id('ctlModifiedDate') }" class="label">Modified Date:</label>
                    <span data-bind="id: $root.id('ctlModifiedDate'), property: ModifiedDate"></span></div>
                </td>
              </tr>
            </table>
          </fieldset>
          <div class="xw-obj-children" data-bind="with: $root">
            <div class="tabs-header">
              <ul>
                <li data-bind="css: {active: activeTab() == 'Customer'}"><a data-bind="click: function() { activeTab('Customer') }">Customer</a></li>
                <li data-bind="css: {active: activeTab() == 'Detail'}"><a data-bind="click: function() { activeTab('Detail') }">Detail</a></li>
                <li data-bind="css: {active: activeTab() == 'Payment'}"><a data-bind="click: function() { activeTab('Payment') }">Payment</a></li>
                <li data-bind="css: {active: activeTab() == 'Sales'}"><a data-bind="click: function() { activeTab('Sales') }">Sales</a></li>
              </ul>
            </div>
            <div class="tabs-content">
              <div data-bind="visible: activeTab() == 'Customer'">
                <div class="xw-obj borderless" data-bind="with: obj.CustomerObject">
                  <fieldset>
                    <table class="xw-fieldset-layout">
                      <tr>
                        <td class="fieldColumn" style="width: 50%">
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlCustomerStoreName') }" class="label">Store Name:</label>
                            <span data-bind="id: $root.id('ctlCustomerStoreName'), property: StoreName"></span></div>
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlCustomerPersonName') }" class="label">Person Name:</label>
                            <span data-bind="id: $root.id('ctlCustomerPersonName'), property: PersonName"></span></div>
                        </td>
                        <td class="fieldColumn" style="width: 50%">
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlCustomerAccountNumber') }" class="label">Account Number:</label>
                            <span data-bind="id: $root.id('ctlCustomerAccountNumber'), property: AccountNumber"></span></div>
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlCustomerTerritoryId') }" class="label">Territory:</label>
                            <span data-bind="id: $root.id('ctlCustomerTerritoryId'), property: TerritoryId"></span></div>
                        </td>
                      </tr>
                    </table>
                  </fieldset>
                </div>
                <div class="xw-obj-children">
                  <div class="xw-obj" data-bind="with: obj.CustomerObject.LookupObject">
                    <fieldset>
                      <legend>Lookup</legend>
                      <table class="xw-fieldset-layout">
                        <tr>
                          <td class="fieldColumn" style="width: 50%">
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlLookupStoreName') }" class="label">Store Name:</label>
                              <input data-bind="id: $root.id('ctlLookupStoreName'), property: StoreName" /></div>
                          </td>
                          <td class="fieldColumn" style="width: 50%">
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlLookupPersonName') }" class="label">Person Name:</label>
                              <input data-bind="id: $root.id('ctlLookupPersonName'), property: PersonName" /></div>
                          </td>
                        </tr>
                      </table>
                      <div class="action-bar"><a data-bind="click: $root.LinkCustomerLookupLookUp_Click.bind($root), css: {disabled: !$root.LinkCustomerLookupLookUp_Enabled($data)}"
                           href="#">Look Up</a></div>
                    </fieldset>
                  </div>
                  <div class="xw-obj" data-bind="with: obj.CustomerObject.BillingAddressObject">
                    <fieldset>
                      <legend>Billing Address</legend>
                      <table class="xw-fieldset-layout">
                        <tr>
                          <td class="fieldColumn" style="width: 50%">
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlBillingAddressAddressId') }" class="label">Address Type:</label>
                              <select data-bind="id: $root.id('ctlBillingAddressAddressId'), property: AddressId"></select></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlBillingAddressAddressLine1') }"
                                     class="label">Address Line1:</label>
                              <span data-bind="id: $root.id('ctlBillingAddressAddressLine1'), property: AddressLine1"></span></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlBillingAddressAddressLine2') }"
                                     class="label">Address Line2:</label>
                              <span data-bind="id: $root.id('ctlBillingAddressAddressLine2'), property: AddressLine2"></span></div>
                          </td>
                          <td class="fieldColumn" style="width: 50%">
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlBillingAddressCityState') }" class="label">City/State:</label>
                              <span data-bind="id: $root.id('ctlBillingAddressCityState'), property: CityState"></span></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlBillingAddressPostalCode') }"
                                     class="label">Postal Code:</label>
                              <span data-bind="id: $root.id('ctlBillingAddressPostalCode'), property: PostalCode"></span></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlBillingAddressCountry') }" class="label">Country:</label>
                              <span data-bind="id: $root.id('ctlBillingAddressCountry'), property: Country"></span></div>
                          </td>
                        </tr>
                      </table>
                    </fieldset>
                  </div>
                  <div class="xw-obj" data-bind="with: obj.CustomerObject.ShippingAddressObject">
                    <fieldset>
                      <legend>Shipping Address</legend>
                      <table class="xw-fieldset-layout">
                        <tr>
                          <td class="fieldColumn" style="width: 50%">
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlShippingAddressAddressId') }"
                                     class="label">Address Type:</label>
                              <select data-bind="id: $root.id('ctlShippingAddressAddressId'), property: AddressId"></select></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlShippingAddressAddressLine1') }"
                                     class="label">Address Line1:</label>
                              <span data-bind="id: $root.id('ctlShippingAddressAddressLine1'), property: AddressLine1"></span></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlShippingAddressAddressLine2') }"
                                     class="label">Address Line2:</label>
                              <span data-bind="id: $root.id('ctlShippingAddressAddressLine2'), property: AddressLine2"></span></div>
                          </td>
                          <td class="fieldColumn" style="width: 50%">
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlShippingAddressCityState') }"
                                     class="label">City/State:</label>
                              <span data-bind="id: $root.id('ctlShippingAddressCityState'), property: CityState"></span></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlShippingAddressPostalCode') }"
                                     class="label">Postal Code:</label>
                              <span data-bind="id: $root.id('ctlShippingAddressPostalCode'), property: PostalCode"></span></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlShippingAddressCountry') }" class="label">Country:</label>
                              <span data-bind="id: $root.id('ctlShippingAddressCountry'), property: Country"></span></div>
                          </td>
                        </tr>
                      </table>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div data-bind="visible: activeTab() == 'Detail'">
                <div class="xw-obj borderless">
                  <div class="xw-obj" data-bind="pager: { items: obj.DetailList.List, pageSize: 10 }">
                    <div data-part="content" style="overflow: auto">
                      <table class="grid"
                             data-bind="css: { selectable: $root.obj.DetailList.RowSelectionMode }"
                             id="gridDetail">
                        <thead>
                          <tr data-bind="with: $root.obj.DetailList">
                            <th data-bind="sortby: ProductId">Product</th>
                            <th data-bind="sortby: OrderQty">Qty</th>
                            <th data-bind="sortby: UnitPrice">Price</th>
                            <th data-bind="sortby: UnitPriceDiscount">Discount</th>
                            <th data-bind="sortby: SpecialOfferId">Special Offer</th>
                            <th data-bind="sortby: LineTotal">Total</th>
                            <th data-bind="sortby: CarrierTrackingNumber">Tracking #</th>
                          </tr>
                        </thead>
                        <tbody data-bind="foreach: pagedItems">
                          <tr data-bind="css: { selected: _selected }, click: toggleSelection">
                            <td><a data-bind="click: $root.LinkDetailDetails_Click.bind($root), css: {disabled: !$root.LinkDetailDetails_Enabled($data)}"
                                 href="#">
                                <span data-bind="property: List.ProductId"></span></a></td>
                            <td><span data-bind="property: List.OrderQty"></span></td>
                            <td><span data-bind="property: List.UnitPrice"></span></td>
                            <td><span data-bind="property: List.UnitPriceDiscount"></span></td>
                            <td><span data-bind="property: List.SpecialOfferId"></span></td>
                            <td><span data-bind="property: List.LineTotal"></span></td>
                            <td><span data-bind="property: List.CarrierTrackingNumber"></span></td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
                  </div>
                  <div><a data-bind="click: $root.LinkDetailNew_Click.bind($root), css: {disabled: !$root.LinkDetailNew_Enabled($data)}"
                       href="#">New</a></div>
                </div>
              </div>
              <div data-bind="visible: activeTab() == 'Payment'">
                <div class="xw-obj borderless" data-bind="with: obj.PaymentObject">
                  <fieldset>
                    <table class="xw-fieldset-layout">
                      <tr>
                        <td class="fieldColumn" style="width: 50%">
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlPaymentSubTotal') }" class="label">Sub Total:</label>
                            <span data-bind="id: $root.id('ctlPaymentSubTotal'), property: SubTotal"></span></div>
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlPaymentShipMethodId') }" class="label">Shipment Method:</label>
                            <select data-bind="id: $root.id('ctlPaymentShipMethodId'), property: ShipMethodId"></select></div>
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlPaymentTaxAmt') }" class="label">Tax Amt:</label>
                            <span data-bind="id: $root.id('ctlPaymentTaxAmt'), property: TaxAmt"></span></div>
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlPaymentFreight') }" class="label">Freight:</label>
                            <span data-bind="id: $root.id('ctlPaymentFreight'), property: Freight"></span></div>
                        </td>
                        <td class="fieldColumn" style="width: 50%">
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlPaymentTotalDue') }" class="label">Total Due:</label>
                            <span data-bind="id: $root.id('ctlPaymentTotalDue'), property: TotalDue"></span></div>
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlPaymentDueDate') }" class="label">Due Date:</label>
                            <input data-bind="id: $root.id('ctlPaymentDueDate'), property: DueDate" class="date" /></div>
                          <div class="field">
                            <label data-bind="attr: { for: $root.id('ctlPaymentCurrencyRate') }" class="label">Currency Rate:</label>
                            <span data-bind="id: $root.id('ctlPaymentCurrencyRate'), property: CurrencyRate"></span></div>
                        </td>
                      </tr>
                    </table>
                  </fieldset>
                </div>
                <div class="xw-obj-children">
                  <div class="xw-obj" data-bind="with: obj.PaymentObject.CreditCardObject">
                    <fieldset>
                      <legend>Credit Card</legend>
                      <table class="xw-fieldset-layout">
                        <tr>
                          <td class="fieldColumn" style="width: 50%">
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlCreditCardCreditCardId') }" class="label">Credit Card:</label>
                              <select data-bind="id: $root.id('ctlCreditCardCreditCardId'), property: CreditCardId"></select></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlCreditCardCardNumber') }" class="label">Card Number:</label>
                              <span data-bind="id: $root.id('ctlCreditCardCardNumber'), property: CardNumber"></span></div>
                          </td>
                          <td class="fieldColumn" style="width: 50%">
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlCreditCardExpiration') }" class="label">Expiration:</label>
                              <span data-bind="id: $root.id('ctlCreditCardExpiration'), property: Expiration"></span></div>
                            <div class="field">
                              <label data-bind="attr: { for: $root.id('ctlCreditCardCreditCardApprovalCode') }"
                                     class="label">Credit Card Approval Code:</label>
                              <input data-bind="id: $root.id('ctlCreditCardCreditCardApprovalCode'), property: CreditCardApprovalCode" /></div>
                          </td>
                        </tr>
                      </table>
                    </fieldset>
                  </div>
                </div>
              </div>
              <div data-bind="visible: activeTab() == 'Sales'">
                <div class="xw-obj borderless" data-bind="with: obj.SalesObject">
                  <table class="xw-fieldset-layout">
                    <tr>
                      <td class="fieldColumn" style="width: 50%">
                        <div class="field">
                          <label data-bind="attr: { for: $root.id('ctlSalesTerritoryId') }" class="label">Territory:</label>
                          <select data-bind="id: $root.id('ctlSalesTerritoryId'), property: TerritoryId"></select></div>
                        <div class="field">
                          <label data-bind="attr: { for: $root.id('ctlSalesSalesPersonId') }" class="label">Sales Person:</label>
                          <select data-bind="id: $root.id('ctlSalesSalesPersonId'), property: SalesPersonId"></select></div>
                      </td>
                      <td class="fieldColumn" style="width: 50%">
                        <div class="field">
                          <label data-bind="attr: { for: $root.id('ctlSalesSalesReason') }" class="label">Sales Reasons:</label>
                          <select data-bind="id: $root.id('ctlSalesSalesReason'), property: SalesReason"
                                  multiple="multiple"></select></div>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div data-bind="msglist: { items: getErrorList().Errors }"></div>
      </div>
    </div>
    <div class="view-footer action-bar" data-bind="with: $root">
      <input type="button" value="Delete" class="btn-delete"
             data-bind="click: onDelete, enable: !obj.IsNew()" />
      <input type="button" value="Save" class="btn-save" data-bind="click: onSave" />
      <input type="button" value="Close" class="btn-close"
             data-bind="click: close, visible: hasClose()" /></div>
  </div>
  <div data-bind="compose: ActiveChildView"></div>
</div>