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

<div class="container-fluid" style="font-weight: 400;">
  <ul class="nav nav-tabs horizontal-tabs am-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="am-page">

  {# Header #}
  <div class="am-header">
    <div class="am-header-left">
      <h4 class="am-title">{% trans 'System status' %}</h4>
      <div id="am-overall-status" class="am-overall-status" style="display: none;"></div>
    </div>
    <div class="am-header-center">
      <div class="am-meta">
        <span class="am-last-update-label">{% trans 'Last update' %}:</span>
        <span id="am-last-update">—</span>
      </div>
    </div>
    <div class="am-header-right">
      <button id="am-refresh-btn" class="btn am-btn am-btn-primary">
        <i class="fa fa-refresh"></i> {% trans 'Refresh statistics' %}
      </button>
      <div class="am-btn-group" style="position: relative;">
        <button id="am-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="am-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>
      <div class="am-btn-group" style="position: relative;">
        <button id="am-notifications-btn" class="btn btn-default am-btn am-icon-btn" title="{% trans 'Notifications' %}">
          <svg width="27" height="28" viewBox="0 0 27 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M24 20H26.6667V22.6667H0V20H2.66667V10.6667C2.66667 7.83769 3.79047 5.12458 5.79086 3.12419C7.79125 1.12381 10.5044 0 13.3333 0C16.1623 0 18.8754 1.12381 20.8758 3.12419C22.8762 5.12458 24 7.83769 24 10.6667V20ZM21.3333 20V10.6667C21.3333 8.54494 20.4905 6.5101 18.9902 5.00981C17.4899 3.50952 15.4551 2.66667 13.3333 2.66667C11.2116 2.66667 9.17677 3.50952 7.67648 5.00981C6.17619 6.5101 5.33333 8.54494 5.33333 10.6667V20H21.3333ZM9.33333 25.3333H17.3333V28H9.33333V25.3333Z" fill="#c5c5c5"/>
          </svg>
          <span class="am-notification-dot" style="display: none;"></span>
        </button>
        <div id="am-notifications-dropdown" class="am-dropdown" style="display: none;">
          <div class="am-dropdown-label">{% trans 'Notifications' %}</div>
          <div class="am-notifications-empty">{% trans 'No notifications' %}</div>
        </div>
      </div>
    </div>
  </div>

  {# Groups container — populated by JS #}
  <div id="am-groups-container"></div>

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

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

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

  {# Edit alias modal #}
  <div class="modal fade" id="am-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 agent name' %}</h4>
        </div>
        <div class="modal-body">
          <input type="hidden" id="am-alias-agent-id">
          <div class="form-group am-alias-modal__form-group">
            <label>{% trans 'Name' %}</label>
            <input type="text" id="am-alias-name" class="form-control" maxlength="255">
          </div>
          <div class="form-group am-alias-modal__form-group">
            <label>{% trans 'Description' %}</label>
            <textarea id="am-alias-description" class="form-control" rows="3"></textarea>
          </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="am-alias-save" class="btn btn-primary am-alias-modal__btn-primary">{% trans 'Save' %}</button>
        </div>
      </div>
    </div>
  </div>

  {# Delete agent confirmation modal #}
  <div class="modal fade" id="am-delete-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 'Delete agent' %}</h4>
        </div>
        <div class="modal-body">
          <input type="hidden" id="am-delete-agent-id">
          <p>{% trans 'Are you sure you want to delete this agent?' %}</p>
        </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="am-delete-confirm" class="btn btn-primary am-alias-modal__btn-primary">{% trans 'Delete' %}</button>
        </div>
      </div>
    </div>
  </div>

  {# i18n strings for JS #}
  <span style="display:none;" id="am-i18n"
    data-all-ok="{% trans 'All systems operational' %}"
    data-critical="{% trans 'Critical state' %}"
    data-online="{% trans 'Online' %}"
    data-offline="{% trans 'Offline' %}"
    data-servers="{% trans 'servers' %}"
    data-online-count="{% trans 'Online' %}"
    data-ram="{% trans 'RAM' %}"
    data-cpu="{% trans 'CPU' %}"
    data-disks="{% trans 'Disks' %}"
    data-total-mem="{% trans 'Total memory' %}"
    data-used-mem="{% trans 'Used' %}"
    data-free-mem="{% trans 'Free' %}"
    data-percent="{% trans 'Usage percent' %}"
    data-current-load="{% trans 'Current load' %}"
    data-load1="{% trans 'Load 1 min ago' %}"
    data-load5="{% trans 'Load 5 min ago' %}"
    data-load15="{% trans 'Load 15 min ago' %}"
    data-disk-total="{% trans 'Total space' %}"
    data-disk-used="{% trans 'Used' %}"
    data-disk-free="{% trans 'Free' %}"
    data-disk-percent="{% trans 'Usage percent' %}"
    data-last-activity="{% trans 'Last activity' %}"
    data-remove-from-list="{% trans 'Remove from list' %}"
    data-add-comment="{% trans 'Click to add a comment...' %}"
    data-autorefresh-active="{% trans 'Auto-refresh active' %}"
    data-type-mla="{% trans 'Agent type MLA' %}"
    data-type-mlc="{% trans 'Agent type MLC' %}"
    data-type-nws="{% trans 'Agent type NWS' %}"
    data-type-dyn="{% trans 'Agent type DYN' %}"
    data-servers-title="{% trans 'Servers' %}"
    data-server-one="{% trans 'server' %}"
    data-server-few="{% trans 'servers' context 'few' %}"
    data-server-many="{% trans 'servers' context 'many' %}"
  ></span>

</div>
</div>