{% if error %}
  <div class="col-xs-12">
    <div class="content-box padding-small rounded-small background-warning text-warning border-warning">
      {{ error }}
    </div>
  </div>
{% endif %}
{% if success %}
  <div class="col-xs-12">
    <div class="content-box padding-medium rounded-small background-success text-success border-success">
      {{ success }}
    </div>
  </div>
{% endif %}
<div class="background-white padding-large shadow-small">
  <div class="flex js-tabs bottom-border-gray" id="tab-info-history">
  </div>
  <div class="content-box" data-tabs-id="tab-info-history">
    {% if order_history_proccess %}
      <div class="row no-space-xs hidden" data-tab="Processo">
        <div class="col-xs-12">
          {{ order_history_proccess }}
        </div>
      </div>
    {% endif %}
    <div class="row no-space-xs hidden" data-tab="Status">
      <div class="col-xs-12">
        <div class="content-box">
          {% if histories %}
            {% for history in histories %}

              <div class="flex flex-row between-xs middle-xs vertical-padding-medium">
                <span
                  class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block text-bold
                  {{ history.type_status == '0' ? 'background-gray text-gray' : (history.type_status == '1' ? 'background-success text-success' : 'background-error text-error') }}"
                >
                  {{ history.status }}
                </span>
                <span class="text-small text-gray">{% if history.manual %}Adicionado manualmente • {% endif %}{{ history.date_added }}</span>
              </div>

              {% if history.comment %}
                <div class="background-light padding-medium bottom-margin-small rounded-x-small">
                  <div class="flex flex-row between-xs middle-xs cursor-pointer js-btn-message-status">
                    <span class="text-small text-bold text-dark">Enviado por e-mail</span>
                    <i class="text-small text-dark fas fa-chevron-down"></i>
                  </div>
                  <div class="top-margin-small js-content-message-status hidden">
                    <span class="text-small text-dark visible-block">{{ history.comment }}</span>
                  </div>
                </div>
              {% endif %}

              {% if history.notify_whatsapp %}
                <div class="background-light padding-medium bottom-margin-small rounded-x-small">
                  <div class="flex flex-row between-xs middle-xs cursor-pointer js-btn-message-status">
                    <span class="text-small text-bold text-dark">Enviado por Whatsapp</span>
                    <i class="text-small text-dark fas fa-chevron-down"></i>
                  </div>
                  <div class="top-margin-small js-content-message-status hidden">
                    <span class="text-small text-dark visible-block">{{ history.message_whatsapp }}</span>
                  </div>
                </div>
              {% endif %}

              {% if history.mkt_history %}
                <div class="{{ history.mkt_history.msg_erro ? 'background-error' : 'background-light' }} padding-medium bottom-margin-small rounded-x-small">
                  <div class="flex flex-row between-xs middle-xs cursor-pointer {{ history.mkt_history.msg_erro ? 'text-error js-btn-message-status' : 'text-dark' }}">
                    <span
                      class="text-small text-bold">{{ history.mkt_history.tipo_situacao_description }}</span>
                    <i class="text-small fas {{ history.mkt_history.msg_erro ? 'fa-chevron-down' : history.mkt_history.style_status_icon }}"></i>
                  </div>
                  <div class="top-margin-small js-content-message-status hidden {{ history.mkt_history.msg_erro ? 'text-error' : 'text-dark' }}">
                    <span class="text-small visible-block">{{ history.mkt_history.msg_erro }}</span>
                    <div class="flex flex-row middle-xs top-margin-small" data-history-info='{"order_history_id" : "{{ history.mkt_history.order_history_id }}", "order_status_id" : "{{ history.order_status_id }}"}'>
                      <button type="button" class="btn-default btn-small btn-primary right-margin-small js-resend-status">
                        <span>{{text_reenviar}}</span>
                      </button>
                      <button type="button" class="btn-default btn-small btn-outline js-not-send-status">
                        <span>{{text_nao_enviar}}</span>
                      </button>
                    </div>
                  </div>
                </div>
              {% endif %}

            {% endfor %}

            {% if pagination %}
              <div class="top-padding-medium">
                <div class="adm-pagination">{{ pagination }}</div>
              </div>
            {% else %}
              <div class="padding-large">{{ text_no_results }}</div>
            {% endif %}
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>

<script>
  window.jqueryFuturaTabs();
</script>