<div class="order-line {{mod}} {{#if dynamic}}order-line_dynamic{{/if}} {{#if charity}}order-line_charity{{/if}}">
  <div class="order-line__inner">
    <div class="order-line__img">
      <a href="{{url}}" class="order-line__img-link"><img src="{{img}}" alt="{{title}}"></a>
      <span class="order-line__img-static d-none"><img src="{{img}}" alt="{{title}}"></span>
    </div>
    <div class="order-line__info">
      <a href="{{url}}" class="order-line__title order-line__title_link">{{title}}</a>
      <span class="order-line__title order-line__title_static d-none">{{title}}</span>
      {{#if code}}
        <div class="order-line__code">
          <span class="product-code">Product code: <strong>{{code}}</strong></span>
        </div>
      {{/if}}
      {{#if promo}}
        <div class="order-line__promo">{{promo}}</div>
      {{/if}}
        {{#unless order-details}}
            {{page_order-details}}
            {{#if location}}
                <div class="order-line__location">{{status}} <br> Delivery Location: {{location}}</div>
            {{/if}}
            {{#if type}}
                <p class="order-line__type">Delivery type: {{type}}</p>
            {{/if}}
        {{/unless}}
    </div>
    <div class="order-line__calcs">
      <div class="order-line__calc order-line__calc_quant">
        <span class="order-line__lbl order-line__lbl_calc">Quantity:</span>
        {{#if dynamic}}
          <input type="text" inputmode="numeric" pattern="[0-9]*" class="tbx tbx_small tbx_quantity" value="1" aria-label="order item quantity">
          <div class="order-line__action">
            <a href="#" class="order-line__update">Update</a>
          </div>
        {{else}}
          <span class="order-line__value">{{quantity}}</span>
        {{/if}}
      </div>

      <div class="order-line__calc area-total">
        {{#if area-total}}
            <span class="order-line__lbl order-line__lbl_calc">Area total:</span>
            <div class="order-line__value order-line__value_price">
              <div>{{area-total}} SQM</div>
              <div class="order-line__value_note">(Square Metres)</div>
              {{#if wastage-present}}
                <div class="order-line__value_wst">
                  <div>{{area-total-ws}} SQM</div>
                  <div class="order-line__value_note">(with 10% wastage)</div>
                </div>
              {{/if}}
            </div>
        {{/if}}
      </div>

      <div class="order-line__calc">
        {{#if price}}
            <span class="order-line__lbl order-line__lbl_calc">Item price:</span>
            <div class="order-line__value order-line__value_price">
              <div>{{price}}</div>
              {{#if perSQM}}
                <div class="order-line__value_note">{{ perSQM }} per SQM</div>
              {{/if}}
            </div>
        {{/if}}
      </div>

      <div class="order-line__calc">
        <span class="order-line__lbl order-line__lbl_calc">Item total:</span>
        <span class="order-line__value order-line__value_sum">{{total}}</span>
        {{#if dynamic}}
          <div class="order-line__action">
            <a href="#" class="icon order-line__delete" title="Remove" aria-label="Remove item">
              <span class="fas fa-trash"></span>
            </a>
          </div>
        {{/if}}
      </div>
    </div>
  </div>

  {{#if calculator-notification}}
    <div class="order-line__calculator-notification">
      {{> notifications notification-page.success-tiles-call-back}}
    </div>
  {{/if}}

  {{#if dynamic}}
    <div class="order-line__delivery order-line__delivery_dynamic">
      <div class="order-line__delivery-selection order-line__delivery_dynamic-selection">
        <div class="order-line__delivery-rbn">
          {{> radiobutton id=code name=code label="Add for delivery" value="delivery" checked=deliveryChecked }}
        </div>
        <div class="order-line__delivery-rbn">
          {{> radiobutton id=code name=code label="Click & Collect" value="collect" checked=collectChecked modal-click-and-collect=pageShopCart}}
        </div>
      </div>
      <div class="order-line__delivery-store order-line__delivery_dynamic-store">
        <div {{#if pageShopCart}}data-collect class="data-collect-hidden"{{/if}}>
          <div data-collect-action class="order-line__delivery-find" {{#if collectChecked}}style="display: none;"{{/if}}>
            <a href="#" class="order-line__delivery-action btn-find-store" data-toggle="modal" data-target="#modal-click-and-collect">Find a store</a>
          </div>
          <div data-collect-action class="order-line__delivery-find" {{#if deliveryChecked}}style="display: none;"{{/if}}>
            <span class="order-line__delivery-store-name">Leischester Thurmaston</span>
            <a href="#" class="order-line__delivery-action btn-change-store" data-toggle="modal" data-target="#modal-click-and-collect">Change store</a>
          </div>
        </div>
      </div>
    </div>
  {{/if}}
  {{#if collect}}
    <div class="order-line__delivery order-line__delivery_static">
      <div class="order-line__delivery-collect">
        <span class="order-line__lbl order-line__lbl_collect">Click & Collect:</span>
        <span class="order-line__value">{{collect}}</span>
      </div>
    </div>
  {{/if}}
</div>
