{% extends 'atlas/base.html' %}

{% block content %}
  <div class="container-fluid py-3">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
      <h3 class="mb-0">Case Admin Overview</h3>
      <a class="btn btn-sm btn-outline-secondary" href="{% url 'atlas:case_view' %}">Back to case list</a>
    </div>

    <div class="row g-3 mb-3">
      <div class="col-sm-6 col-xl-3">
        <div class="card h-100">
          <div class="card-body">
            <div class="text-muted small">Total cases</div>
            <div class="fs-4 fw-semibold">{{ totals.total_cases }}</div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-xl-3">
        <div class="card h-100">
          <div class="card-body">
            <div class="text-muted small">Authors with cases</div>
            <div class="fs-4 fw-semibold">{{ totals.total_authors }}</div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-xl-3">
        <div class="card h-100">
          <div class="card-body">
            <div class="text-muted small">Open-access cases</div>
            <div class="fs-4 fw-semibold">{{ totals.open_access_cases }}</div>
          </div>
        </div>
      </div>
      <div class="col-sm-6 col-xl-3">
        <div class="card h-100">
          <div class="card-body">
            <div class="text-muted small">Archived cases</div>
            <div class="fs-4 fw-semibold">{{ totals.archived_cases }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-3">
      <div class="col-lg-5">
        <div class="card h-100">
          <div class="card-header">Cases per user</div>
          <div class="card-body p-0">
            <div class="table-responsive">
              <table class="table table-sm table-striped mb-0 align-middle">
                <thead>
                  <tr>
                    <th>User</th>
                    <th class="text-end">Case count</th>
                  </tr>
                </thead>
                <tbody>
                  {% for row in author_rows %}
                    <tr>
                      <td>
                        <a href="{% url 'atlas:case_view' %}?author={{ row.pk }}">
                          {% if row.get_full_name %}{{ row.get_full_name }}{% else %}{{ row.username }}{% endif %}
                        </a>
                        <div class="text-muted small">{{ row.username }}</div>
                      </td>
                      <td class="text-end fw-semibold">
                        <a href="{% url 'atlas:case_view' %}?author={{ row.pk }}">{{ row.case_count }}</a>
                      </td>
                    </tr>
                  {% empty %}
                    <tr>
                      <td colspan="2" class="text-muted">No case authors found.</td>
                    </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-7 d-flex flex-column gap-3">
        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span>Recently added cases</span>
            <button class="btn btn-sm btn-outline-info"
                    hx-get="{% url 'atlas:case_admin_recent_cases_partial' %}"
                    hx-target="#admin-recent-cases"
                    hx-swap="innerHTML">
              Load
            </button>
          </div>
          <div id="admin-recent-cases" class="card-body text-muted small">
            Click Load to fetch recently added cases.
          </div>
        </div>

        <div class="card">
          <div class="card-header d-flex justify-content-between align-items-center">
            <span>Largest cases</span>
            <button class="btn btn-sm btn-outline-warning"
                    hx-get="{% url 'atlas:case_admin_largest_cases_partial' %}"
                    hx-target="#admin-largest-cases"
                    hx-swap="innerHTML">
              Load
            </button>
          </div>
          <div id="admin-largest-cases" class="card-body text-muted small">
            Click Load to fetch the largest cases by image footprint.
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}