{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <style>
    .docs {
      --surface-page-bg: #f8fafc;
      --surface-card-bg: #ffffff;
      --surface-card-border: rgba(226, 232, 240, 0.9);
      --surface-card-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
      --surface-text-primary: #0f172a;
      --surface-text-muted: rgba(71, 85, 105, 0.9);
      --surface-divider: rgba(226, 232, 240, 0.9);
      --surface-badge-bg: rgba(59, 130, 246, 0.08);
      --surface-badge-color: #1d4ed8;
      --surface-table-header-bg: rgba(241, 245, 249, 0.95);
      --surface-table-row-hover: rgba(59, 130, 246, 0.08);
      --surface-code-bg: rgba(226, 232, 240, 0.7);
    }

    .docs.dark-edition {
      --surface-page-bg: rgba(15, 23, 42, 0.95);
      --surface-card-bg: rgba(15, 23, 42, 0.92);
      --surface-card-border: rgba(30, 41, 59, 0.9);
      --surface-card-shadow: 0 22px 45px rgba(2, 6, 23, 0.65);
      --surface-text-primary: rgba(226, 232, 240, 0.98);
      --surface-text-muted: rgba(148, 163, 184, 0.8);
      --surface-divider: rgba(51, 65, 85, 0.8);
      --surface-badge-bg: rgba(59, 130, 246, 0.16);
      --surface-badge-color: rgba(191, 219, 254, 0.95);
      --surface-table-header-bg: rgba(30, 41, 59, 0.85);
      --surface-table-row-hover: rgba(59, 130, 246, 0.18);
      --surface-code-bg: rgba(15, 23, 42, 0.65);
    }

    .surface-page {
      display: flex;
      flex-direction: column;
      gap: 28px;
      margin-top: 12px;
      color: var(--surface-text-primary);
    }

    .surface-page__header {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
    }

    .surface-page__subtitle {
      margin: 4px 0 0;
      font-size: 0.95rem;
      color: var(--surface-text-muted);
    }

    .surface-back-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-weight: 600;
      color: var(--surface-text-primary);
      text-decoration: none;
    }

    .surface-back-link::before {
      content: "\2190";
      font-size: 1.2rem;
      line-height: 1;
    }

    .surface-back-link:hover,
    .surface-back-link:focus {
      text-decoration: underline;
    }

    .surface-card {
      background: var(--surface-card-bg);
      border-radius: 16px;
      box-shadow: var(--surface-card-shadow);
      border: 1px solid var(--surface-card-border);
      padding: 24px;
      position: relative;
      overflow: hidden;
    }

    .surface-card h2 {
      font-size: 1.1rem;
      margin-bottom: 4px;
      color: var(--surface-text-primary);
    }

    .surface-section-header {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      align-items: center;
      margin-bottom: 18px;
    }

    .surface-section-header p {
      margin: 2px 0 0;
      color: var(--surface-text-muted);
      font-size: 0.9rem;
    }

    .surface-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 6px 14px;
      border-radius: 999px;
      background: var(--surface-badge-bg);
      color: var(--surface-badge-color);
      font-weight: 600;
      font-size: 0.8rem;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    .surface-table-wrapper {
      border-radius: 12px;
      border: 1px solid var(--surface-divider);
      overflow: hidden;
    }

    .surface-table {
      width: 100%;
      margin-bottom: 0;
      border-collapse: collapse;
      color: var(--surface-text-primary);
    }

    .surface-table thead {
      background: var(--surface-table-header-bg);
    }

    .surface-table th,
    .surface-table td {
      padding: 14px 18px;
      font-size: 0.9rem;
      border-bottom: 1px solid var(--surface-divider);
      vertical-align: middle;
    }

    .surface-table tbody tr:hover {
      background: var(--surface-table-row-hover);
      transition: background 0.2s ease;
    }

    .surface-table a {
      font-weight: 600;
      color: inherit;
      text-decoration: none;
      word-break: break-word;
    }

    .surface-table a:hover,
    .surface-table a:focus {
      text-decoration: underline;
    }

    .surface-empty-state {
      padding: 24px;
      border-radius: 12px;
      border: 1px dashed var(--surface-divider);
      color: var(--surface-text-muted);
      background: rgba(148, 163, 184, 0.06);
      font-size: 0.95rem;
      text-align: center;
    }

    .surface-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      align-items: center;
    }

    .surface-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 12px 20px;
      border-radius: 12px;
      border: none;
      font-weight: 600;
      font-size: 0.95rem;
      letter-spacing: 0.01em;
      cursor: pointer;
      text-decoration: none;
      transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
      min-width: 150px;
      background: linear-gradient(135deg, rgba(249, 115, 22, 0.95), rgba(234, 88, 12, 0.9));
      color: #0b0d10;
    }

    .surface-btn:hover,
    .surface-btn:focus {
      transform: translateY(-1px);
      box-shadow: 0 12px 22px rgba(234, 88, 12, 0.24);
      color: #0b0d10;
    }

    .surface-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      box-shadow: none;
    }

    .surface-btn--ghost {
      background: rgba(148, 163, 184, 0.12);
      color: var(--surface-text-primary);
    }

    .surface-btn--ghost:hover,
    .surface-btn--ghost:focus {
      box-shadow: 0 10px 18px rgba(59, 130, 246, 0.12);
      color: var(--surface-text-primary);
    }

    .surface-btn--danger {
      background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(248, 113, 113, 0.9));
      color: #fff;
    }

    .surface-btn--danger:hover,
    .surface-btn--danger:focus {
      box-shadow: 0 12px 24px rgba(239, 68, 68, 0.35);
      color: #fff;
    }

    .surface-inline-form {
      display: inline-block;
    }

    @media (max-width: 768px) {
      .surface-section-header {
        flex-direction: column;
        align-items: flex-start;
      }

      .surface-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .surface-btn {
        width: 100%;
        min-width: 0;
      }
    }
  </style>

  <div class="surface-page">
    <div class="surface-page__header">
      <div>
        <h1 class="ct-docs-page-h1-title" id="content">{{ _('FTP Diagnostic Files') }}</h1>
        <p class="surface-page__subtitle">{{ _('Download or delete diagnostic files from the FTP staging area.') }}</p>
      </div>
      <a href="{{ url_for('dashboard') }}" class="surface-back-link">{{ _('Back to dashboard') }}</a>
    </div>

    <section class="surface-card surface-card--table">
      <div class="surface-section-header">
        <div>
          <h2>{{ _('Available files') }}</h2>
          <p>{{ _('All files are loaded from the configured FTP directory.') }}</p>
        </div>
        <span class="surface-badge">
          {{ files|length }} {{ _('file') if files|length == 1 else _('files') }}
        </span>
      </div>

      {% if files %}
        <div class="surface-table-wrapper">
          <table class="surface-table">
            <thead>
              <tr>
                <th scope="col">{{ _('Filename') }}</th>
                <th scope="col">{{ _('Actions') }}</th>
              </tr>
            </thead>
            <tbody>
              {% for f in files %}
              <tr>
                <td>
                  <a href="{{ url_for('ftp_download', filename=f) }}" rel="noopener">
                    {{ f }}
                  </a>
                </td>
                <td>
                  <div class="surface-actions">
                    <a href="{{ url_for('ftp_download', filename=f) }}" class="surface-btn surface-btn--ghost" rel="noopener">
                      {{ _('Download') }}
                    </a>
                    <form action="{{ url_for('ftp_delete') }}" method="post" class="surface-inline-form">
                      <input type="hidden" name="filename" value="{{ f }}">
                      <button type="submit" class="surface-btn surface-btn--danger">{{ _('Delete') }}</button>
                    </form>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      {% else %}
        <div class="surface-empty-state">
          <p>{{ _('No diagnostic files are currently available.') }}</p>
        </div>
      {% endif %}
    </section>
  </div>
</main>
{% endblock %}