{{ header }}
  {% if order_tracking_events is defined %}
    {% if order_tracking_events is defined %}
      {% for key, order_tracking_event in order_tracking_events %}
        <div class="ftr-container">
          <div class="ftr-in-space--b-s">
            <span class="ftr-text--m ftr-block ftr-text--dark">{{text_tracking_code}}: {{ key }}</span>
          </div>
          <hr>
          {% if order_tracking_event|length > 0 %}
            {% for order_tracking in order_tracking_event %}
              <div class="ftr-in-space--t-s">
                <span class="ftr-text--s ftr-text--dark ftr-block">{{ order_tracking.descricao }}</span>
                <span class="ftr-text--s ftr-text--grey">{{ order_tracking.data }}</span>
              </div>
            {% endfor %}
          {% else %}
            <span class="ftr-text--s ftr-text--grey ftr-in-space--t-s">Nenhum evento encontrado</span>
          {% endif %}
        </div>
      {% endfor %}
    {% endif %}
  {% endif %}
  <div class="ftr-container">
    <div class="ftr-in-space--l">
      <span class="ftr-text--m ftr-block ftr-text--dark">{{text_order_detail}}</span>
      <span class="ftr-text--s ftr-block ftr-text--grey">{{text_order_id}}: {{order_id}}</span>
      <span class="ftr-text--s ftr-block ftr-text--grey">{{text_date_added}}: {{date_added}}</span>
      {% if payment_method %}<span class="ftr-text--s ftr-block ftr-text--grey">{{text_payment_method}}: {{payment_method}}</span>{% endif %}
      {% if yapay_billet %}
        <a href="{{ yapay_billet }}" class="ftr-text--s ftr-text--primary">{{ text_billet }}</a>
      {% endif %}
      {% if shipping_method %}<span class="ftr-text--s ftr-block ftr-text--grey">{{text_shipping_method}}: {{shipping_method}}</span>{% endif %}

    </div>
    <hr class="ftr-out-space--v-s">
    {% if order_history_proccess %}
      {{ order_history_proccess }}
    {% else %}
      <div class="ftr-in-space--l">
        <span class="ftr-text--m ftr-block ftr-text--dark ftr-out-space--b-m">{{text_history}}</span>
        {% for history in histories %}
          <div class="order-info-history {{history.type_status}} ftr-out-space--b-s">
            <span class="ftr-text--s ftr-text--dark">{{history.status}}</span>
            <span class="ftr-text--s ftr-text--grey"> - {{history.date_added}}</span>
            {% if history.comment %}
              <span class="ftr-text--s ftr-block">{{history.comment}}</span>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    {% endif %}
    {% if shipping_address %}
      <hr class="ftr-out-space--v-s">
      <div class="ftr-in-space--l">
        {% if pickup_address %}
        <span class="ftr-text--m ftr-block ftr-text--dark">{{text_pickup_address}}</span>
        <span class="ftr-text--s ftr-block ftr-text--grey">{{ pickup_address }}, {{ pickup_number }}</span>
        <span class="ftr-text--s ftr-block ftr-text--grey">{{ pickup_complement }}</span>
        <span class="ftr-text--s ftr-block ftr-text--grey">{{ pickup_neighborhood }}</span>
        <span class="ftr-text--s ftr-block ftr-text--grey">{{ pickup_city }}</span>
        <span class="ftr-text--s ftr-block ftr-text--grey">{{ pickup_zone }}</span>
        <span class="ftr-text--s ftr-block ftr-text--grey">{{ pickup_postcode }}</span>
        {% else %}
          <span class="ftr-text--m ftr-block ftr-text--dark">{{text_shipping_address}}</span>
          <span class="ftr-text--s ftr-block ftr-text--grey">{{shipping_address}}</span>
        {% endif %}
      </div>
    {% endif %}
    {% if payment_address %}
      <hr class="ftr-out-space--v-s">
      <div class="ftr-in-space--l">
        <span class="ftr-text--m ftr-block ftr-text--dark">{{text_payment_address}}</span>
        <span class="ftr-text--s ftr-block ftr-text--grey">{{payment_address}}</span>
      </div>
    {% endif %}
    <hr class="ftr-out-space--v-s">
    {% if payment_pix  %}
      <a onclick="hiddenPix()" class="cursor-pointer ftr-btn--bl visible-block text-medium text-bold top-margin-x-small" >{{ text_pix }}</a>
    {% endif %}

    <div class="ftr-hidden ftr-container-btn--fixed flex middle-xs center-xs col-xs-12 js-box-confirmation " >
      <div class="row padding-small">
        <div class="col-xs-12 text-center text-align-center flex middle-xs center-xs ">
          <div class="ftr-flex middle-xs center-xs col-xs-12">
            {% if payment_pix.link_qrcodeurl%}
              <img  src="{{ payment_pix.link_qrcodeurl }}" class="top-margin-x-small ftr-pagination js-copy-action js-imgQr"/>
            {% endif%}
          </div>
          <span  class="ftr-hidden text-large text-dark text-bold visible-block top-margin-large js-copy-content">{{ payment_pix.link_qrcode }}</span>
          <div class="flex middle-xs center-xs col-xs-12">
            <button class="ftr-btn ftr-h--full ftr-inline ftr-js-ripple-effect js-copy-action ">
              <span>Cópiar código</span>
            </button>
          </div>
          {% if payment_pix.payment_code == 'getnet'%}
            <div class="flex middle-xs center-xs col-xs-12">
              <button  onclick="reloadPix({{ order_id }})" class=" ftr-btn ftr-h--full ftr-inline ftr-js-ripple-effect js-reloadPayment">
                <span>Atualizar HQCode</span>
              </button>
            </div>
          {% endif%}

          <div class="flex middle-xs center-xs col-xs-12 center-xs left-padding-large right-padding-large full-width" >
            <button onclick="hiddenPix()" class="ftr-btn ftr-h--full ftr-inline ftr-js-ripple-effect">{{ text_close }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  {% if send_nfe_info is defined %}
    <div class="ftr-container">
      <div class="ftr-in-space--l" target="_blank">
        <span class="ftr-text--m ftr-block ftr-text--dark">{{text_access_key}}</span>
        <span class="ftr-text--s ftr-block ftr-text--grey" style="word-break: break-word;">{{chave_acesso}}</span>
      </div>
    </div>
    <div class="ftr-container">
      <div class="ftr-in-space--l" target="_blank">
        <a href="{{ link_danfe }}">
          <span class="ftr-text--primary">{{ text_download_danfe }}</span>
        </a>
      </div>
      <div class="ftr-in-space--l">
        <a href="{{ link_xml }}" target="_blank">
          <span class="ftr-text--primary">{{ text_download_xml }}</span>
        </a>
      </div>
      <div class="ftr-in-space--l">
        <a href="http://www.nfe.fazenda.gov.br/portal/consultaRecaptcha.aspx?tipoConsulta=resumo&tipoConteudo=d09fwabTnLk=" target="_blank">
          <span class="ftr-text--primary">{{ text_see_nfe }}</span>
        </a>
      </div>
    </div>
  {% endif %}

  {% if comments %}
    <div class="ftr-container ftr-in-space--n">
      <span class="ftr-text--m ftr-block ftr-text--dark">{{text_comment}}</span>
      <span class="ftr-text--s ftr-block ftr-text--grey">{{comments}}</span>
    </div>
  {% endif %}
  <div class="ftr-in-space--h-l ftr-in-space--t-xl ftr-in-space--b-m">
    <span class="ftr-text--s">{{ text_product_list }}</span>
  </div>
  {% for keyTipo, cartTipo in productlist %}
    <div class="ftr-grid">
      {% for keyLista, lista in cartTipo %}
        {% if lista.isListaEscolar %}
          <div class="ftr-in-space--h-l ftr-in-space--t-xl ftr-in-space--b-s ftr-h--full">
            <span class="ftr-text--dark ftr-block">{{lista.descricao}}</span>
          </div>
        {% endif %}
        {% for keyProduto, product in lista.products %}
          <div class="ftr-grid__card ftr-product-card">
            <div class="ftr-dropdown ftr-js-dropdown">
              <div class="ftr-js-dropdown__display">
                <span class="ftr-dropdown__display"></span>
              </div>
              <div class="ftr-dropdown__content ftr-js-dropdown__content">
                <a href="javascript:void(0);" class="ftr-dropdown__content__item ftr-js-ripple-effect" onclick='addToCart({{ product.info_reorder_app }});'>{{button_reorder}}</a>
                <a href="{{product.return}}" class="ftr-dropdown__content__item ftr-js-ripple-effect">{{button_return}}</a>
              </div>
            </div>
            <div class="ftr-product-card__content">
              <div class="ftr-product-card__image">
                <img src="{{ product.image }}" alt="{{ product.name }}" />
              </div>
              <div class="ftr-product-card__info">
                <span class="ftr-text--m ftr-block ftr-text-dark">{{ product.quantity }}x - {{ product.name }}</span>
                <span class="ftr-text--s ftr-block ftr-text--grey">Código: {{ product.model }}</span>
                {% if product.itens_kit %}
                  {% for itemKitKey, itemKit in product.itens_kit %}
                    <span class="ftr-text--s ftr-block ftr-text--grey">{{ itemKit.quantidade }} - {{ itemKit.descricao }}</span>
                  {% endfor %}
                {% endif %}
                {% if product.color_description is defined and product.color_description %}
                  <span class="ftr-text--s ftr-block ftr-text--grey">{{product.color_template_description}}: {{ product.color_description }}</span>
                {% endif %}
                {% if product.size_description is defined and product.size_description %}
                  <span class="ftr-text--s ftr-block ftr-text--grey">{{product.size_template_description}}: {{ product.size_description }}</span>
                {% endif %}
                {% if product.specification_description is defined and product.specification_description %}
                  <span class="ftr-text--s ftr-block ftr-text--grey">{{product.specification_template_description}}: {{ product.specification_description }}</span>
                {% endif %}
                {% if product.brinde %}
                  <div class="ftr-out-space--v-s">
                    <span class="ftr-text--dark">{{ text_gift }}</span>
                    <span class="ftr-text--grey text-bold">{{product.brinde.product_name}}</span>
                  </div>
                {% endif %}
                <hr class="ftr-out-space--v-s">
                {% if product.pontos > 0 %}
                  <span class="ftr-text--s ftr-block ftr-text--grey">{{ column_pontos }}: {{ product.pontos }}</span>
                  <span class="ftr-text--s ftr-block ftr-text--grey">{{ column_total_pontos }}: {{ product.total_pontos }}</span>
                {% else %}
                  <span class="ftr-text--s ftr-block ftr-text--grey">{{ column_price }}: {{ product.price }}</span>
                  <span class="ftr-text--s ftr-block ftr-text--grey">{{ column_total }}: {{ product.total }}</span>
                {% endif %}
              </div>
            </div>
          </div>
        {% endfor %}
      {% endfor %}
    </div>
  {% endfor %}
  <div class="ftr-container">
    <div class="ftr-grid ftr-grid--start ftr-in-space--n">
      {% for total in totals|slice(0, totals|length - 1) %}
        <div class="ftr-out-space--r-xl">
          <span class="ftr-text--s ftr-block ftr-text--dark">{{ total.title }}</span>
          <span class="ftr-text--s ftr-block ftr-text--grey">{{ total.text }}</span>
        </div>
      {% endfor %}
      <hr class="ftr-out-space--v-l">
      {% for total in totals|slice(totals|length - 1, 1) %}
        <span class="ftr-text--l ftr-text--secondary">{{ total.title }} {{ total.text }}</span>
      {% endfor %}
    </div>
  </div>
{% if fidelity == false %}
  <div class="ftr-container">
    <a href="{{ order_reorder }}" class="ftr-btn ftr-h--full ftr-background--primary ftr-js-ripple-effect">
      {{ button_reorder }}
    </a>
  </div>
{% endif %}
{{ footer }}
