{% load i18n %}
{% load static %}

<div class="container-fluid" style="font-weight: 400;">

  {# Key selector tabs #}
  <ul class="nav nav-tabs horizontal-tabs am-key-tabs ts-key-tabs"
      style="margin-top: 10px; border-bottom: 0; border-radius: 6px;">
    {% for key in lic_keys %}
      <li class="nav-item horizontal-item {% if forloop.first %}active{% endif %}"
          data-key-id="{{ key.id }}">
        <a style="padding-top: 0; border-bottom-width: 0; border-right-width: 0;
                  border-left-width: 0; border-top-width: 0; margin-top: -1px;"
           class="nav-link horizontal-item-link {% if forloop.first %}active{% endif %}"
           href="#">{{ key.description }}</a>
      </li>
    {% endfor %}
  </ul>

  <div class="rs-page ts-page">

    {# Page header #}
    <div class="am-header rs-header">
      <div class="am-header-left">
        <h4 class="am-title" style="font-size: 28px;">{% trans 'Traffic statistics' %}</h4>
        <div class="am-meta">
          <span>{% trans 'Last update' %}:</span>
          <span id="ts-last-update">—</span>
        </div>
      </div>
      <div class="am-header-center"></div>
      <div class="am-header-right">

        {# Refresh button #}
        <button id="ts-refresh-btn" class="btn am-btn am-btn-primary">
          <i class="fa fa-refresh"></i> {% trans 'Refresh statistics' %}
        </button>

        {# Period settings dropdown #}
        <div class="am-btn-group" style="position: relative;">
          <button id="ts-settings-btn" class="btn btn-default am-btn am-icon-btn"
                  title="{% trans 'Settings' %}">
            <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M18 22.5C20.4853 22.5 22.5 20.4853 22.5 18C22.5 15.5147 20.4853 13.5 18 13.5C15.5147 13.5 13.5 15.5147 13.5 18C13.5 20.4853 15.5147 22.5 18 22.5Z"
                    stroke="#c5c5c5" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M3 19.32V16.68C3 15.12 4.275 13.83 5.85 13.83C8.565 13.83 9.675 11.91 8.31 9.55503C7.53 8.20503 7.995 6.45003 9.36 5.67003L11.955 4.18503C13.14 3.48003 14.67 3.90003 15.375 5.08503L15.54 5.37003C16.89 7.72503 19.11 7.72503 20.475 5.37003L20.64 5.08503C21.345 3.90003 22.875 3.48003 24.06 4.18503L26.655 5.67003C28.02 6.45003 28.485 8.20503 27.705 9.55503C26.34 11.91 27.45 13.83 30.165 13.83C31.725 13.83 33.015 15.105 33.015 16.68V19.32C33.015 20.88 31.74 22.17 30.165 22.17C27.45 22.17 26.34 24.09 27.705 26.445C28.485 27.81 28.02 29.55 26.655 30.33L24.06 31.815C22.875 32.52 21.345 32.1 20.64 30.915L20.475 30.63C19.125 28.275 16.905 28.275 15.54 30.63L15.375 30.915C14.67 32.1 13.14 32.52 11.955 31.815L9.36 30.33C7.995 29.55 7.53 27.795 8.31 26.445C9.675 24.09 8.565 22.17 5.85 22.17C4.275 22.17 3 20.88 3 19.32Z"
                    stroke="#c5c5c5" stroke-width="2.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
          <div id="ts-settings-dropdown" class="am-dropdown" style="display: none;">
            <div class="am-period-preset" data-hours="1">{% trans '1 hour' %}</div>
            <div class="am-period-preset" data-hours="3">{% trans '3 hours' %}</div>
            <div class="am-period-preset" data-hours="8">{% trans '8 hours' %}</div>
            <div class="am-period-preset" data-hours="12">{% trans '12 hours' %}</div>
            <div class="am-period-preset" data-hours="24">{% trans '1 day' %}</div>
          </div>
        </div>

        {# Filter button #}
        <div class="am-btn-group">
          <button id="ts-filter-btn" class="btn btn-default am-btn am-icon-btn"
                  title="{% trans 'Filter' %}">
            <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M7.19987 2.80005H24.7999C26.2665 2.80005 27.4665 4.00005 27.4665 5.46672V8.40005C27.4665 9.46672 26.7999 10.8 26.1332 11.4667L20.3999 16.5334C19.5999 17.2 19.0665 18.5334 19.0665 19.6V25.3334C19.0665 26.1334 18.5332 27.2001 17.8665 27.6001L15.9999 28.8C14.2665 29.8667 11.8665 28.6667 11.8665 26.5334V19.4667C11.8665 18.5334 11.3332 17.3334 10.7999 16.6667L5.7332 11.3334C5.06654 10.6667 4.5332 9.46672 4.5332 8.66672V5.60005C4.5332 4.00005 5.7332 2.80005 7.19987 2.80005Z"
                    stroke="#c5c5c5" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M14.5733 2.80005L8 13.3334"
                    stroke="#c5c5c5" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </button>
        </div>

      </div>
    </div>

    {# Node cards container — populated by JS #}
    <div id="ts-groups-container"></div>

    {# Loading state #}
    <div id="ts-loading" class="am-state-msg" style="display: none;">
      <i class="fa fa-spinner fa-spin"></i> {% trans 'Loading...' %}
    </div>

    {# Empty state #}
    <div id="ts-empty" class="am-state-msg" style="display: none;">
      {% trans 'No data' %}
    </div>

    {# Error state #}
    <div id="ts-error" class="am-state-msg am-state-error" style="display: none;"></div>

    {# i18n strings for JS #}
    <span style="display: none;" id="ts-i18n"
          data-filtering-node="{% trans 'Filtering node' %}"
          data-traffic="{% trans 'Traffic' %}"
          data-total="{% trans 'Total' %}"
          data-inbound="{% trans 'Inbound' %}"
          data-outbound="{% trans 'Outbound' %}"
          data-loading="{% trans 'Loading...' %}"
          data-no-data="{% trans 'No data' %}"
          data-uuid="UUID"
          data-ip="IP"
          data-online="{% trans 'Online' %}"
          data-offline="{% trans 'Offline' %}"
          data-edit-node-name="{% trans 'Edit node name' %}">
    </span>

  </div>

</div>

{# Edit node name modal #}
<div class="modal fade" id="ts-alias-modal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
        <h4 class="modal-title">{% trans 'Edit node name' %}</h4>
      </div>
      <div class="modal-body">
        <input type="hidden" id="ts-alias-identity-id">
        <input type="hidden" id="ts-alias-description">
        <div class="form-group am-alias-modal__form-group">
          <label>{% trans 'Name' %}</label>
          <input type="text" id="ts-alias-name" class="form-control" maxlength="255">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default am-alias-modal__btn" data-dismiss="modal">{% trans 'Cancel' %}</button>
        <button type="button" id="ts-alias-save" class="btn btn-primary am-alias-modal__btn-primary">{% trans 'Save' %}</button>
      </div>
    </div>
  </div>
</div>

{# Filter modal — only ip and uuid filters for traffic stats #}
<div id="tsFilterModal" class="summary-filter-dropdown" style="display:none">
  <button type="button" class="summary-filter-close ts-filter-close" aria-label="Close">
    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 4L4 12" stroke="#C5C5C5" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
      <path d="M4 4L12 12" stroke="#C5C5C5" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </button>
  <div class="summary-filter-modal-body">
    <div class="summary-filter-section">
      <h6 class="summary-filter-section-title">{% trans 'Data count' %}</h6>
      <div class="summary-filter-row">
        <div class="summary-filter-field">
          <label>{% trans 'Domain' %}</label>
          <select class="ts-filter-select" data-filter="ts-vhost" multiple>
            <option value="">{% trans 'Select values' %}</option>
          </select>
        </div>
        <div class="summary-filter-field">
          <label>{% trans 'Port' %}</label>
          <select class="ts-filter-select" data-filter="ts-port" multiple>
            <option value="">{% trans 'Select values' %}</option>
          </select>
        </div>
      </div>
    </div>
    <div class="summary-filter-section">
      <h6 class="summary-filter-section-title">{% trans 'Block count in charts' %}</h6>
      <div class="summary-filter-row">
        <div class="summary-filter-field">
          <label>IP</label>
          <select class="ts-filter-select" data-filter="ts-ip" multiple>
            <option value="">{% trans 'Select values' %}</option>
          </select>
        </div>
        <div class="summary-filter-field">
          <label>UUID</label>
          <select class="ts-filter-select" data-filter="ts-uuid" multiple>
            <option value="">{% trans 'Select values' %}</option>
          </select>
        </div>
      </div>
    </div>
  </div>
  <div class="summary-filter-modal-footer">
    <div class="summary-filter-actions">
      <button type="button" class="btn btn-primary filter-apply-btn" id="tsApplyFilters">
        {% trans 'Apply filters' %}
      </button>
      <button type="button" class="btn btn-outline-secondary filter-reset-btn" id="tsResetFilters">
        {% trans 'Reset all filters' %}
      </button>
    </div>
  </div>
</div>