{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <div class="ai-diagnostics-page">
    <div class="ai-diagnostics-header">
      <div>
        <p class="ai-diagnostics-eyebrow">{{ _('Maintenance') }}</p>
        <h1 class="ai-diagnostics-title">{{ _('AI Diagnostics') }}</h1>
        <p class="ai-diagnostics-subtitle">
          {{ _('Overview of downloaded diagnostic packages. The analysis was generated automatically by AI and may contain errors.') }}
        </p>
      </div>
    </div>

    <div class="ai-diagnostics-card">
      <div class="ai-diagnostics-card-header">
        <div>
          <h2 class="ai-diagnostics-card-title">{{ _('Diagnostic reports') }}</h2>
          <p class="ai-diagnostics-card-text">
            {{ _('All found {extension} archives in the folder {directory}.', extension='<code>.tar.gz</code>', directory='<span class=\"ai-diagnostics-directory\">debug/diagnostic_reports</span>') | safe }}
          </p>
        </div>
      </div>

      {% if diagnostics %}
      <div class="table-responsive ai-diagnostics-table-wrapper">
        <table class="table ai-diagnostics-table">
          <thead>
            <tr>
              <th scope="col">{{ _('Severity') }}</th>
              <th scope="col">{{ _('Chargepoint ID') }}</th>
              <th scope="col">{{ _('Diagnostic file') }}</th>
              <th scope="col">{{ _('Report') }}</th>
              <th scope="col">{{ _('Actions summary') }}</th>
              <th scope="col" class="ai-diagnostics-actions-header"></th>
            </tr>
          </thead>
          <tbody>
            {% for entry in diagnostics %}
            <tr>
              <td>
                <span class="ai-severity ai-severity--medium">{{ _('Medium') }}</span>
              </td>
              <td>
                <a href="/v2/proxy_edit?source_url=/{{ entry.chargepoint_id }}" class="ai-chargepoint-link">
                  {{ entry.chargepoint_id }}
                </a>
              </td>
              <td>
                <a href="{{ url_for('download_ai_diagnostic', archive_name=entry.archive_name) }}" class="ai-diagnostics-link">
                  {{ entry.archive_name }}
                </a>
              </td>
              <td class="ai-diagnostics-action-cell">
                {% if entry.report_name %}
                <a href="{{ url_for('view_ai_diagnostic_report', report_name=entry.report_name) }}" target="_blank" rel="noopener" class="ai-diagnostics-icon-link" title="{{ _('Open diagnostic report') }}">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z" />
                    <path d="M5 5h5V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5h-2v5H5V5z" />
                  </svg>
                </a>
                {% else %}
                <span class="ai-diagnostics-missing">–</span>
                {% endif %}
              </td>
              <td class="ai-diagnostics-action-cell">
                {% if entry.summary_name %}
                <a href="{{ url_for('view_ai_diagnostic_report', report_name=entry.summary_name) }}" target="_blank" rel="noopener" class="ai-diagnostics-icon-link" title="{{ _('Open action summary') }}">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                    <path d="M14 3h7v7h-2V6.41l-9.29 9.3-1.42-1.42 9.3-9.29H14V3z" />
                    <path d="M5 5h5V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5h-2v5H5V5z" />
                  </svg>
                </a>
                {% else %}
                <span class="ai-diagnostics-missing">–</span>
                {% endif %}
              </td>
              <td class="ai-diagnostics-actions">
                <form method="post" action="{{ url_for('delete_ai_diagnostic') }}" class="ai-diagnostics-delete-form" onsubmit="return confirm('{{ _('Delete diagnostic package {filename}?', filename=entry.archive_name) }}');">
                  <input type="hidden" name="archive_name" value="{{ entry.archive_name }}">
                  <button type="submit" class="ai-diagnostics-delete-button" title="{{ _('Delete files') }}">
                    <span class="sr-only">{{ _('Delete') }}</span>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                      <path d="M16 9v10H8V9H6v12h12V9h-2z" fill="currentColor" />
                      <path d="M15.5 4l-1-1h-5l-1 1H5v2h14V4z" fill="currentColor" />
                      <path d="M9 9h2v8H9zm4 0h2v8h-2z" fill="currentColor" />
                    </svg>
                  </button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <div class="ai-diagnostics-empty">
        {{ _('No diagnostic archives were found.') }}
      </div>
      {% endif %}
    </div>
  </div>
</main>

<style>
  .ai-diagnostics-page {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 16px;
    color: #0f172a;
  }

  .docs.dark-edition .ai-diagnostics-page {
    color: rgba(226, 232, 240, 0.98);
  }

  .ai-diagnostics-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }

  .ai-diagnostics-eyebrow {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #475569;
    margin-bottom: 4px;
  }

  .docs.dark-edition .ai-diagnostics-eyebrow {
    color: rgba(148, 163, 184, 0.85);
  }

  .ai-diagnostics-title {
    font-size: 2rem;
    margin: 0;
  }

  .ai-diagnostics-subtitle {
    margin: 12px 0 0;
    max-width: 720px;
    color: #475569;
  }

  .docs.dark-edition .ai-diagnostics-subtitle {
    color: rgba(148, 163, 184, 0.8);
  }

  .ai-diagnostics-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 22px 45px rgba(15, 23, 42, 0.12);
    border: 1px solid rgba(226, 232, 240, 0.85);
  }

  .docs.dark-edition .ai-diagnostics-card {
    background: rgba(15, 23, 42, 0.92);
    border-color: rgba(30, 41, 59, 0.9);
    box-shadow: 0 24px 48px rgba(2, 6, 23, 0.6);
  }

  .ai-diagnostics-card-header {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
  }

  .ai-diagnostics-card-title {
    font-size: 1.2rem;
    margin-bottom: 6px;
  }

  .ai-diagnostics-card-text {
    margin: 0;
    color: #475569;
  }

  .docs.dark-edition .ai-diagnostics-card-text {
    color: rgba(148, 163, 184, 0.8);
  }

  .ai-diagnostics-card-text code {
    font-size: 0.85rem;
    background: rgba(59, 130, 246, 0.12);
    padding: 4px 6px;
    border-radius: 8px;
  }

  .docs.dark-edition .ai-diagnostics-card-text code {
    background: rgba(59, 130, 246, 0.28);
  }

  .ai-diagnostics-directory {
    font-weight: 600;
  }

  .ai-diagnostics-table-wrapper {
    border-radius: 12px;
    border: 1px solid rgba(226, 232, 240, 0.9);
    overflow: hidden;
  }

  .docs.dark-edition .ai-diagnostics-table-wrapper {
    border-color: rgba(30, 41, 59, 0.85);
  }

  .ai-diagnostics-table {
    margin-bottom: 0;
    font-size: 0.92rem;
  }

  .ai-diagnostics-table thead {
    background: rgba(241, 245, 249, 0.95);
  }

  .docs.dark-edition .ai-diagnostics-table thead {
    background: rgba(30, 41, 59, 0.88);
  }

  .ai-diagnostics-table th,
  .ai-diagnostics-table td {
    border-bottom: 1px solid rgba(226, 232, 240, 0.9);
    vertical-align: middle;
  }

  .docs.dark-edition .ai-diagnostics-table th,
  .docs.dark-edition .ai-diagnostics-table td {
    border-color: rgba(30, 41, 59, 0.85);
  }

  .ai-diagnostics-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.08);
  }

  .docs.dark-edition .ai-diagnostics-table tbody tr:hover {
    background: rgba(59, 130, 246, 0.16);
  }

  .ai-severity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f97316;
    background: rgba(249, 115, 22, 0.12);
  }

  .docs.dark-edition .ai-severity {
    background: rgba(249, 115, 22, 0.24);
  }

  .ai-chargepoint-link,
  .ai-diagnostics-link {
    font-weight: 600;
    color: inherit;
    text-decoration: none;
  }

  .ai-chargepoint-link:hover,
  .ai-chargepoint-link:focus,
  .ai-diagnostics-link:hover,
  .ai-diagnostics-link:focus {
    text-decoration: underline;
  }

  .ai-diagnostics-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: #4f46e5;
    background: rgba(79, 70, 229, 0.12);
    transition: background 0.2s ease;
  }

  .ai-diagnostics-icon-link:hover,
  .ai-diagnostics-icon-link:focus {
    background: rgba(79, 70, 229, 0.24);
  }

  .docs.dark-edition .ai-diagnostics-icon-link {
    color: rgba(191, 219, 254, 0.95);
    background: rgba(59, 130, 246, 0.16);
  }

  .ai-diagnostics-icon-link svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  .ai-diagnostics-action-cell {
    text-align: center;
  }

  .ai-diagnostics-missing {
    color: #94a3b8;
  }

  .docs.dark-edition .ai-diagnostics-missing {
    color: rgba(148, 163, 184, 0.65);
  }

  .ai-diagnostics-actions-header,
  .ai-diagnostics-actions {
    text-align: right;
    white-space: nowrap;
  }

  .ai-diagnostics-delete-form {
    display: inline-flex;
    margin: 0;
  }

  .ai-diagnostics-delete-button {
    background: transparent;
    border: none;
    color: #ef4444;
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    position: relative;
  }

  .ai-diagnostics-delete-button:hover,
  .ai-diagnostics-delete-button:focus {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
  }

  .docs.dark-edition .ai-diagnostics-delete-button:hover,
  .docs.dark-edition .ai-diagnostics-delete-button:focus {
    background: rgba(239, 68, 68, 0.24);
  }

  .ai-diagnostics-delete-button svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .ai-diagnostics-empty {
    border: 1px dashed rgba(226, 232, 240, 0.9);
    border-radius: 12px;
    padding: 32px;
    text-align: center;
    color: #475569;
    font-size: 0.95rem;
  }

  .docs.dark-edition .ai-diagnostics-empty {
    border-color: rgba(51, 65, 85, 0.8);
    color: rgba(148, 163, 184, 0.8);
  }
</style>
{% endblock %}