{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-4">
  <div>
    <h1 class="h3 text-white mb-1">Dashboard</h1>
    <p class="text-secondary mb-0">Szybki podgląd stanu systemu i dostępnych endpointów.</p>
  </div>
</div>
<!-- KPI tiles -->
<div class="row g-3 mb-4">
  <div class="col-6 col-md-3">
    <div class="card bg-dark border-secondary h-100">
      <div class="card-body">
        <div class="text-secondary small">Aktywne bany</div>
        <div class="display-6 fw-bold text-white">{{ stats.system.active_bans|int }}</div>
        <div class="text-secondary small">ogółem</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card bg-dark border-secondary h-100">
      <div class="card-body">
        <div class="text-secondary small">Drupal attacks</div>
        <div class="display-6 fw-bold text-white">{{ stats.system.drupal_attacks|int }}</div>
        <div class="text-secondary small">wykryte łącznie</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card bg-dark border-secondary h-100">
      <div class="card-body">
        <div class="text-secondary small">Uptime</div>
        <div class="h3 fw-bold text-white mb-0">{{ stats.system.uptime }}</div>
        <div class="text-secondary small">czas działania</div>
      </div>
    </div>
  </div>
  <div class="col-6 col-md-3">
    <div class="card bg-dark border-secondary h-100">
      <div class="card-body">
        <div class="text-secondary small">Zużycie pamięci</div>
        <div class="h3 fw-bold text-white mb-0">{{ stats.system.memory_usage }}</div>
        <div class="text-secondary small">aktualnie</div>
      </div>
    </div>
  </div>
</div>

<!-- System -->
<div class="card bg-dark border-secondary mb-4">
  <div class="card-header">Informacje o systemie</div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-dark table-hover align-middle mb-0" id="sys-table">
        <tbody>
          {% for key, value in sys_info.system.items() %}
          <tr>
            <th style="width:30%;" class="text-secondary">{{ key | capitalize }}</th>
            <td class="text-white">{{ value }}</td>
          </tr>
          {% endfor %}
          {% if sys_info.system|length == 0 %}
          <tr>
            <td colspan="2" class="text-center text-secondary">Brak danych</td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Aplikacja -->
<div class="card bg-dark border-secondary mb-4">
  <div class="card-header">Informacje o aplikacji</div>
  <div class="card-body">
    <div class="table-responsive">
      <table class="table table-dark table-hover align-middle mb-0" id="app-table">
        <tbody>
          {% for key, value in sys_info.application.items() %}
          <tr>
            <th style="width:30%;" class="text-secondary">{{ key | capitalize }}</th>
            <td class="text-white">{{ value }}</td>
          </tr>
          {% endfor %}
          {% if sys_info.application|length == 0 %}
          <tr>
            <td colspan="2" class="text-center text-secondary">Brak danych</td>
          </tr>
          {% endif %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Endpointy — domyślnie zwinięte -->
<div class="card bg-dark border-secondary">
  <div class="card-header d-flex flex-wrap align-items-center justify-content-between gap-2">
    <span>Dostępne endpointy API <span class="text-secondary">({{ routes|length }})</span></span>
    <button class="btn btn-outline-secondary btn-sm" data-bs-toggle="collapse" data-bs-target="#ep-collapse"
      aria-expanded="false" aria-controls="ep-collapse" id="btn-toggle-endpoints">
      Pokaż endpoint
    </button>
  </div>

  <div id="ep-collapse" class="collapse">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-dark table-hover align-middle mb-0" id="ep-table">
          <thead>
            <tr>
              <th style="width:20px">#</th>
              <th>URL</th>
              <th>Metody</th>
              <th class="text-end">Akcje</th>
            </tr>
          </thead>
          <tbody>
            {% for route in routes %}
            <tr>
              <td class="text-secondary">{{ loop.index }}</td>
              <td>
                <a href="{{ route.url }}" class="text-white text-decoration-none" target="_blank" rel="noopener">{{
                  route.url }}</a>
              </td>
              <td>
                {% for m in route.methods.split(',') if route.methods %}
                <span class="badge bg-secondary me-1">{{ m.strip() }}</span>
                {% endfor %}
              </td>
              <td class="text-end">
                <div class="btn-group btn-group-sm" role="group">
                  <button class="btn btn-outline-light copy-url" data-url="{{ route.url }}">Kopiuj URL</button>
                  <button class="btn btn-outline-light copy-curl" data-url="{{ route.url }}"
                    data-method="{{ (route.methods.split(',')[0] if route.methods else 'GET')|trim }}">
                    Kopiuj cURL
                  </button>
                </div>
              </td>
            </tr>
            {% endfor %}
            {% if routes|length == 0 %}
            <tr>
              <td colspan="4" class="text-center text-secondary">Brak endpointów</td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/dashboard.js') }}" defer></script>
{% endblock %}