{% extends "layouts/base.html" %}

{% block title %} Events {% endblock %}

{% block stylesheets %}
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">

<style>
table a[href^="http"]::after,
table a[href^="https://"]::after
{
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}
</style>
{% endblock stylesheets %}

{% block content %}
  <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center py-4">
    <div class="d-block mb-4 mb-md-0">
        <nav aria-label="breadcrumb" class="d-none d-md-inline-block">
          <ol class="breadcrumb breadcrumb-dark breadcrumb-transparent">
            <li class="breadcrumb-item">
              <a href="{% url 'dashboard' %}">
                <svg class="icon icon-xxs" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
              </a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">Events</li>
          </ol>
        </nav>
        <h2 class="h4">Events</h2>
    </div>
    <div class="btn-toolbar mb-2 mb-md-0">
      <form action="{% url 'asset_table_export_csv' %}" method="get">
        {% for key, value in request.GET.items %}
            <input type="hidden" name="{{ key }}" value="{{ value }}">
        {% endfor %}
        <button type="submit" class="btn btn-sm btn-outline-primary">Export</button>
      </form>
    </div>
  </div>

  {# Content #}
  <div class="row">
    <div class="col-xl-5">
      <div class="card border-0 shadow">
          <div class="card-header">
            <div class="border-0 table-wrapper">
              <form method="get" class="row g-3 mb-1">
                <!-- Search Field -->
                <div class="input-group mb-3">
                  <span class="input-group-text">
                      <svg class="icon icon-xs" x-description="Heroicon name: solid/search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                          <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path>
                      </svg>
                  </span>
                  <select id="set_origin_type" 
                          name="origin_type"
                          type="text"
                          class="form-select form-select-sm me-2">
                    <option value="recorded" >All</option>
                    <option value="recorded" >Recorded</option>
                    <option value="simulated" >Simulated</option>
                  </select>
                  <input 
                    id="search" 
                    name="search"
                    type="text" 
                    class="form-control" 
                    value="{{ filter.form.search.value|default_if_none:'' }}" 
                    placeholder="Search events"
                  >
                </div>
              </form>
            </div>
          </div>
          <!-- BODY -->
          <div class="card-body border-0 shadow table-wrapper table-responsive">
            <table class="table table-hover">
            <thead>
              <tr>
                <th><span 
                    title="Structure Number is an alphanumeric sequence assigned by each State to uniquely identify the structure within each State.">
                    ID
                  </span></th>
                <th><a href="?page=1&order=name&{{ order_query }}">Time</a></th>
                <th><a href="?page=1&order=event_count&{{ order_query }}">Records</a></th>
              </tr>
            </thead>
            <tbody>
              {% for v in events %}
                <tr>
                  <td><code>{{ v.usgsid }}</code></td>
                  <td> <a href="{% url 'event_profile' anssid=v.usgsid %}" >{{ v.event_time }}</a></td>
                  <td>{{ v.records.count }}</td>

                </tr>
              {% endfor %}
            </tbody>
            </table>
          </div>

          <div class="card-footer px-3 border-0 d-flex flex-column flex-lg-row align-items-center justify-content-between">
            <nav aria-label="Page navigation example">
                <ul class="pagination mb-0">
                  <li class="page-item {% if not events.has_previous %}disabled{% endif %}">
                    {% if events.has_previous %}
                      <a class="page-link" href="?page={{ events.previous_page_number }}&{{ page_query }}">Previous</a>
                    {% else %}
                      <a class="page-link disabled" href="#">Previous</a>
                    {% endif %}
                  </li>
                  {% for page in events.paginator.page_range %}
                    {% if page <= events.number|add:3 and page >= events.number|add:-3 %}
                      <li class="page-item {% if page == events.number %}active{% endif %}">
                        <a class="page-link" href="?page={{ page }}&{{ page_query }}">{{ page }}</a>
                      </li>
                    {% endif %}
                  {% endfor %}
                  <li class="page-item {% if not events.has_next %}disabled{% endif %}">
                    {% if events.has_next %}
                      <a class="page-link" href="?page={{ events.next_page_number }}&{{ page_query }}">Next</a>
                    {% else %}
                      <a class="page-link disabled" href="#">Next</a>
                    {% endif %}
                  </li>
                </ul>
            </nav>
            <div class="fw-normal small mt-4 mt-lg-0">Showing <b>{{ events|length }}</b> out of <b>{{ events.paginator.count }}</b> entries</div>
          </div>
      </div>
    </div>
    <div class="col-xl-7">
      <div class="card bg-white-100 border-0 shadow">
        <div class="card-body p-2">
          {{ asset_map|safe }}
        </div>
      </div>
    </div>
  </div>

<div class="card my-4">

</div>

{% endblock content %}

{% block javascripts %}
<script>
    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
</script>
{% endblock javascripts %}