<div class="ecp-component ecp_OrderPay">
  <form class="ecp-form">
    <h2 aria-describedby="ecpi_orderpay_info">{message:OrderPay/Title_template}</h2>
    <p id="ecpi_orderpay_info" class="ecp-summary">{message:OrderPay/Summary}</p>

    <div class="ecp-section" data-ecp-handle="shipping_address_section" role="region" aria-labelledby="ecpi_shipping_title">
      <h3 id="ecpi_shipping_title">{message:OrderPay/ShippingAddressTitle}</h3>
      <dl class="ecp-address" data-ecp-handle="shipping_address">
        <dt>{message:shipment_first_name} {message:shipment_last_name}</dt>
        <dd data-ecp-handle="shipping_company_name">{message:shipment_company_name}</dd>
        <dd>{message:shipment_address_line_1}</dd>
        <dd data-ecp-handle="shipping_address_line_2">{message:shipment_address_line_2}</dd>
        <dd>{message:shipment_city}, <span data-ecp-handle="shipping_state_code">{message:shipment_state_code}</span><span data-ecp-handle="shipping_region">{message:shipment_region}</span> {message:shipment_postal_code}<span  data-ecp-handle="shipping_zip_extension">-{message:shipment_zip_extension}</span></dd>
        <dd>{message:shipment_country_name}</dd>
        <dd data-ecp-handle="shipping_phone">{message:OrderPay/PhoneLabel} {message:shipment_phone}</dd>
      </dl>
    </div>

    <div class="ecp-section" data-ecp-handle="pickup_location_section" role="region" aria-labelledby="ecpi_pickup_title">
      <h3 id="ecpi_pickup_title">{message:OrderPay/PickupLocationTitle}</h3>
      <dl class="ecp-address" data-ecp-handle="pickup_location">
        <dt>{message:shipment_company_name}</dt>
        <dd>{message:shipment_address_line_1}</dd>
        <dd>{message:shipment_city}, {message:shipment_state_code} {message:shipment_postal_code}</dd>
        <dd>{message:OrderPay/PhoneLabel} {message:shipment_phone}</dd>
      </dl>
    </div>

    <div class="ecp-section" role="region" aria-labelledby="ecpi_cart_title">
      <h3 id="ecpi_cart_title">{message:OrderPay/CartTitle}</h3>
      <div class="ecp-x-list" data-ecp-handle="cart_items" role="list"> 
        <!-- | OrderPay__CartItem template | -->
      </div>
    </div>

    <div class="ecp-section" role="region" aria-labelledby="ecpi_summary_title" aria-live="polite">
      <h3 id="ecpi_summary_title">{message:OrderPay/SummaryTitle}</h3>
      <div class="ecp-grid" role="table">
        <div class="ecp-grid-row ecp-clearfix" role="row">
          <span class="ecp-grid-col-8" role="rowheader">{message:OrderPay/ItemsTotal}</span>
          <span class="ecp-grid-col-4 ecp-text-right" role="cell">{currency:order_product_total}</span>
        </div>
        <div class="ecp-grid-row ecp-clearfix" data-ecp-handle="total_discount" role="row">
          <span class="ecp-grid-col-8" role="rowheader">{message:OrderPay/DiscountTotal}</span>
          <span class="ecp-grid-col-4 ecp-text-right ecp-price-discounted" role="cell">{currency:order_discount}</span>
        </div>
        <div class="ecp-grid-row ecp-grid-row-bottomline ecp-clearfix" data-ecp-handle="total_extended" role="row">
          <span class="ecp-grid-col-8" role="rowheader">{message:OrderPay/ExtendedTotal}</span>
          <span class="ecp-grid-col-4 ecp-text-right" role="cell">{currency:order_subtotal}</span>
        </div>
        <div class="ecp-grid-row ecp-clearfix" data-ecp-handle="total_shipping_row" role="row">
          <span class="ecp-grid-col-8" role="rowheader">{message:OrderPay/ShippingTotal_template}</span>
          <span class="ecp-grid-col-4 ecp-text-right" data-ecp-handle="total_shipping" role="cell">{currency:order_shipping}</span>
        </div>
        <div class="ecp-grid-row ecp-clearfix" role="row">
          <span class="ecp-grid-col-8" role="rowheader">{message:OrderPay/TaxTotal}</span>
          <span class="ecp-grid-col-4 ecp-text-right" data-ecp-handle="total_tax" role="cell">{currency:order_tax}</span>
        </div>
        <div class="ecp-grid-row ecp-grid-row-topline ecp-clearfix" role="row">
          <span class="ecp-grid-col-8" role="rowheader"><strong>{message:OrderPay/SubTotal}</strong></span>
          <span class="ecp-grid-col-4 ecp-text-right" data-ecp-handle="total" role="cell"><strong>{currency:order_total}</strong></span>
        </div>
      </div>
    </div>

    <div class="ecp-section" role="region" aria-labelledby="ecpi_tip_title" data-ecp-handle="tip_display">
      <div class="ecp-grid-row ecp-clearfix" role="row">
        <span class="ecp-grid-col-8" role="rowheader">{message:OrderPay/TipAmount}</span>
        <span class="ecp-grid-col-4 ecp-text-right" data-ecp-handle="tip_amount_display" role="cell">{currency:order_tip_amount}</span>
      </div>
      <div class="ecp-grid-row ecp-grid-row-topline ecp-clearfix" role="row">
        <span class="ecp-grid-col-8" role="rowheader"><strong>{message:OrderPay/GrandTotal}</strong></span>
        <span class="ecp-grid-col-4 ecp-text-right" role="cell"><strong data-ecp-handle="grand_total">{currency:order_total}</strong></span>
      </div>

      <h3 id="ecpi_tip_title">{message:OrderPay/TipTitle}</h3>

      <div class="ecp-buttonset">
        <div class="ecp-buttonset-row ecp-clearfix" role="row">
          <div class="ecp-buttonset-col-3" role="cell"><button class="ecp-secondary" data-ecp-action="no_tip">{message:OrderPay/NoTip}</button></div>
          <div class="ecp-buttonset-col-3" role="cell"><button class="ecp-secondary" data-ecp-action="tip_percentage_1">{message:tip_percentage_1}%</button></div>
          <div class="ecp-buttonset-col-3" role="cell"><button class="ecp-secondary" data-ecp-action="tip_percentage_2">{message:tip_percentage_2}%</button></div>
          <div class="ecp-buttonset-col-3" role="cell"><button class="ecp-secondary" data-ecp-action="tip_percentage_3">{message:tip_percentage_3}%</button></div>
        </div>
      </div>

      <div class="ecp-buttonset">
        <div class="ecp-buttonset-row ecp-clearfix" role="row">
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">1</button></div>
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">2</button></div>
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">3</button></div>
        </div>
        <div class="ecp-buttonset-row ecp-clearfix" role="row">
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">4</button></div>
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">5</button></div>
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">6</button></div>
        </div>
        <div class="ecp-buttonset-row ecp-clearfix" role="row">
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">7</button></div>
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">8</button></div>
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">9</button></div>
        </div>
        <div class="ecp-buttonset-row ecp-clearfix" role="row">
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="no_action">&nbsp;</button></div>
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">00</button></div>
          <div class="ecp-buttonset-col-4" role="cell"><button class="ecp-secondary" data-ecp-action="adjust_tip">0</button></div>
        </div>
      </div>
    </div>

    <input type="hidden" name="tip_amount" data-ecp-handle="tip_amount" value="{message:order_tip_amount}">

    <div class="ecp-section" role="region" aria-labelledby="ecpi_paymentmethod_title" data-ecp-handle="payment_method_list">
      <h3 id="ecpi_paymentmethod_title">{message:OrderPay/PaymentMethodTitle}</h3>
      <select name="payment_method_id" data-ecp-action="change_payment_method" data-ecp-handle="payment_method_select" aria-label="{message:OrderPay/PaymentMethodSelectLabel}">
        <!-- | OrderPay__PaymentMethodOption template | -->  
      </select>
      <div class="ecp-form-linkset">
        <a href="#" data-ecp-action="add_payment_method" aria-label="{message:OrderPay/AddPaymentMethodLinkLabel}">{message:OrderPay/AddPaymentMethodLink}</a>
      </div>
    </div>

    <button class="ecp-continue" data-ecp-action="add_payment_method" data-ecp-handle="add_payment_method">
      {message:OrderPay/AddPaymentMethodButton}
    </button>

    <div class="ecp-form-fieldset" data-ecp-handle="order_comments">
      <label for="ecpi_comments">{message:OrderPay/Comments}</label>
      <textarea id="ecpi_comments" name="comments" rows="4"></textarea>
    </div>

    <button data-ecp-handle="save_button" data-ecp-action="save">{message:OrderPay/SaveButton}</button>
  </form>
</div>