{% if order_tracking_events is defined %}
  <div data-order-tracking='{
{% if order_id %}"orderId" : "{{ order_id }}" , {% endif %}
{% if tracking.status %}"trackingStatus" : "{{ tracking.status ? 1 : 0 }}", {% endif %}
{% if tracking.postado %}"trackingPost" : "{{ tracking.postado }}" , {% endif %}
{% if tracking.link %}"trackingLink" : "{{ tracking.link }}" , {% endif %}
{% if tracking_url %}"trackingUrl" : "{{ tracking_url }}", {% endif %}
{% if tracking_code %}"trackingCode" : "{{ tracking_code|join(',') }}"{% endif %}
} '>

    <div class="row">
      <div class="col-xs-12">
        <div class="flex middle-xs between-xs">
          <span class="text-x-large text-dark">Histórico de envio</span>
          <div class="flex middle-xs ">
            {% if button %}
              <button target="_blank" class="btn-default btn-medium-square btn-primary js-transportadora"
                      data-tracking-code="{{ tracking_code|join(',') }}" data-link="{{ tracking['link'] }}">
                <span>Ir para o site da transportadora</span>
              </button>
            {% endif %}
            <button type="button" class="btn-default btn-medium-square btn-white {{ (button) ? 'js-update-tracking-history' : 'js-update-shipping-history' }}">
              <i class="fas fa-sync-alt"></i>
            </button>
          </div>
        </div>
      </div>

      {% if order_tracking_events is defined %}
        {% for key, order_tracking_event in order_tracking_events %}
          <div class="col-xs-12">
            <div class="content-box background-white shadow-small padding-large">
            <span class="text-medium text-dark">{{ key }}</span>
            {% for order_tracking in order_tracking_event %}
              <div class="flex middle-xs between-xs padding-medium bottom-border-gray">
                <span class="text-x-small text-dark text-bold text-uppercase">{{ order_tracking.data }}</span>
                <span class="text-medium text-dark">{{ order_tracking.descricao }}</span>
              </div>
            {% endfor %}
            </div>
          </div>
        {% endfor %}
      {% endif %}

    </div>

  </div>
  {% for script in scriptsjs %}
    <script type="text/javascript" src="{{ script }}"></script>
  {% endfor %}
{% endif %}