{{ header }}
<section class="container-fluid">
  {% if content_top %}
    {{ content_top }}
  {% endif %}
  {{breadcrumbs}}
  <div class="row">
    <div class="col-md-3 hidden-md-down">
      {{ account }}
    </div>
    <div class="col-xs">
      <div class="content-box">
        <div class="flex middle-xs">
          <a href="{{ continue }}" class="padding-small text-x-large text-dark hidden-md-up">
            <i class="fas fa-angle-left" aria-hidden="true"></i>
          </a>
          <span class="heading-1">{{ heading_title }}</span>
        </div>

        {% if listas %}
          <div class="paper padding-large vertical-margin-medium flex flex-row center-xs">
            <a href="{{ nova }}" class="btn-default btn-medium">
              <span>{{ button_new }}</span>
            </a>
          </div>
          {% for lista in listas %}

            <div class="paper bottom-padding-large left-padding-large bottom-margin-medium">
              <div class="row no-space-xs">
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ column_status }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ lista.status }}</span>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ column_lista }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ lista.itens }}</span>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ column_validade }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ lista.data_validade }}</span>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ column_evento }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ lista.data_evento }}</span>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ column_categoria }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ lista.categoria }}</span>
                  </div>
                </div>
                <div class="col-xs-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ column_itens }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ lista.itens }}</span>
                  </div>
                </div>

                <div class="col-xs-12">
                  <div class="content-box top-padding-medium right-padding-large flex">
                    <a href="{{ lista.href }}" class="btn-default btn-medium right-margin-small top-margin-small">
                      <span>Detalhes da lista</span>
                    </a>
                    <a href="{{ lista.remove }}" class="btn-default btn-medium btn-outline top-margin-small">
                      <span>Deletar lista</span>
                    </a>
                  </div>
                </div>


              </div>
            </div>
          {% endfor %}
        {% else %}
          <div class="padding-large paper top-margin-medium flex flex-row center-xs">
            <span class="full-width text-center text-x-large text-dark top-margin-x-large">{{ text_empty }}</span>
            <a href="{{ nova }}" class="btn-default btn-medium top-margin-medium bottom-margin-x-large">
              <span>{{ button_new }}</span>
            </a>
          </div>
        {% endif %}


      </div>
    </div>
    {% if column_right %}
      <div class="col-md-3 hidden-md-down">
        {{ column_right }}
      </div>
    {% endif %}
  </div>
  {% if content_bottom %}
    {{ content_bottom }}
  {% endif %}
</section>

<script>
  window.waitEvent('scripts_document', function() {
    {% if success %}
      notificationMsg('{{ success }}','success');
    {% endif %}
    {% if error_warning %}
      notificationMsg('{{ error_warning }}','warning');
    {% endif %}
  });
</script>

{{ footer }}