{{ header }}
<header class="background-white bottom-margin-large">
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="flex content-box vertical-padding-large" style="align-items: center; justify-content: space-between;">
          <div>
            <span class="text-x-large text-dark">{{ heading_title }}</span>
            <div class="adm-breadcrumb">
              {% for breadcrumb in breadcrumbs %}
                <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
                <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
          <div>
            <button id="btnDownloadPDF" class="btn-default btn-medium-square" style="color: #ffffff; background-color: #337ab7;" title="Gerar PDF com a lista de clientes online no momento">
              <i class="fa-solid fa-download"></i>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

<div class="container-fluid">
  <div class="row small-space-xs middle-xs">
    <div class="col-xs-12 col-md">
      <label class="field field-medium">
        <span class="field-label">{{ column_customer }}</span>
        <input class="field-entry" type="text" name="filter_customer" value="{{ filter_customer }}" />
      </label>
    </div>
    <div class="col-xs-12 col-md-2">
      <label class="field field-medium">
        <span class="field-label">{{ column_ip }}</span>
        <input class="field-entry" type="text" name="filter_ip" value="{{ filter_ip }}" />
      </label>
    </div>
    <div class="col-xs-width-auto">
      <button class="btn-default btn-medium-square btn-primary top-margin-medium js-btn-filter">
        <i class="fas fa-filter"></i>
        <span>{{ button_filter }}</span>
      </button>
    </div>
  </div>

  {% if customers %}
    <div id="relatorio_clientes_online_pdf">
      <div class="row no-space-xs">
        <div class="col-xs-12">
          <div class="content-box background-white bottom-border-gray padding-medium top-margin-large">
            <div class="row no-space-xs middle-xs">
              <div class="col-xs-5">
                <span class="text-small text-dark text-bold">{{ column_customer }}</span>
              </div>
              <div class="col-xs-5">
                <span class="text-small text-dark text-bold">{{ column_ip }}</span>
              </div>
              <div class="col-xs-2">
                <span class="text-small text-dark text-bold">{{ column_date_added }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      {% for customer in customers %}
        <div class="row no-space-xs">
          <div class="col-xs-12">
            <div class="content-box background-white bottom-border-gray padding-medium">
              <div class="row no-space-xs middle-xs">
                <div class="col-xs-5">
                  {% if customer.action %}
                    {% for action in customer.action %}         
                      <a class="text-small text-dark" href="{{ action.href }}" style="text-decoration: none;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='none';">
                        {{ customer.customer }}
                      </a>
                    {% endfor %}
                  {% else %}
                    <span class="text-small text-dark">{{ customer.customer }}</span>
                  {% endif %}
                </div>
                <div class="col-xs-5">
                  <span class="text-small">{{ customer.ip }}</span>
                </div>
                <div class="col-xs-2">
                  <span class="text-small text-dark">{{ customer.date_added }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
      <div class="row">
        <div class="col-xs-12">
          <div class="content-box top-margin-medium">
            {{ pagination }}
          </div>
        </div>
      </div>
    </div>
  {% else %}
    <div class="row">
      <div class="col-xs-12">
        <div class="content-box background-white shadow-small vertical-padding-x-large horizontal-padding-large text-center top-margin-medium">
          <span class="text-medium text-gray">{{ text_no_results }}</span>
        </div>
      </div>
    </div>
  {% endif %}
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.2/html2pdf.bundle.min.js" integrity="sha512-MpDFIChbcXl2QgipQrt1VcPHMldRILetapBl5MPCA9Y8r7qvlwx1/Mc9hNTzY+kS5kX6PdoDq41ws1HiVNLdZA==" crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

{{ footer }}