{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">OP Redirects</h1>

  <style>
    .redirects-table-wrapper {
      margin-top: 24px;
    }

    .redirects-table {
      width: 100%;
    }

    .redirects-table th {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: #6b7280;
      font-weight: 700;
      border-bottom: 1px solid rgba(148, 163, 184, 0.35);
    }

    .redirects-table td {
      vertical-align: middle;
      border-bottom: 1px solid rgba(226, 232, 240, 0.6);
    }

    .redirects-status-cell {
      width: 48px;
      text-align: center;
    }

    .status-indicator {
      display: inline-flex;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background-color: #9ca3af;
      box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.25);
    }

    .status-indicator.status-indicator--online {
      background-color: #22c55e;
      box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
    }

    .status-indicator.status-indicator--offline {
      background-color: #ef4444;
      box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
    }

    .status-indicator.status-indicator--unknown {
      background-color: #9ca3af;
      box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.2);
    }

    .redirects-action-cell {
      width: 72px;
      text-align: center;
    }

    .icon-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 8px;
      background: transparent;
      color: #ef4444;
      border: none;
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
    }

    .icon-button svg {
      width: 18px;
      height: 18px;
      fill: currentColor;
    }

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

    .icon-button:focus-visible {
      outline: 2px solid rgba(239, 68, 68, 0.6);
      outline-offset: 2px;
    }

    .docs.dark-edition .redirects-table th {
      color: rgba(226, 232, 240, 0.75);
      border-color: rgba(148, 163, 184, 0.25);
    }

    .docs.dark-edition .redirects-table td {
      border-color: rgba(71, 85, 105, 0.65);
    }

    .docs.dark-edition .status-indicator {
      box-shadow: 0 0 0 2px rgba(148, 163, 184, 0.3);
    }

    .docs.dark-edition .icon-button {
      color: #f87171;
    }

    .docs.dark-edition .icon-button:hover,
    .docs.dark-edition .icon-button:focus {
      background: rgba(248, 113, 113, 0.18);
      color: #fca5a5;
    }
  </style>

  {% if connected_error %}
  <div class="alert alert-warning" role="alert">
    Verbindungsstatus konnte nicht geladen werden: {{ connected_error }}
  </div>
  {% endif %}

  <div class="card redirects-table-wrapper">
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table mb-0 redirects-table">
          <thead>
            <tr>
              <th class="redirects-status-cell">Status</th>
              <th>Source URL</th>
              <th>WS URL</th>
              <th>OCPP Subprotocol</th>
              <th>Last Connected</th>
              <th>Kommentar</th>
              <th class="redirects-action-cell">Aktionen</th>
            </tr>
          </thead>
          <tbody>
            {% if entries %}
            {% for entry in entries %}
            <tr>
              <td class="redirects-status-cell">
                <span
                  class="status-indicator {{ entry.status_class }}"
                  title="{{ entry.status_label }}"
                  aria-label="{{ entry.status_label }}"
                ></span>
              </td>
              <td><code>{{ entry.source_url }}</code></td>
              <td class="text-xs">{{ entry.ws_url }}</td>
              <td>{{ entry.ocpp_subprotocol }}</td>
              <td>{{ entry.last_connected or '—' }}</td>
              <td>{{ entry.comment }}</td>
              <td class="redirects-action-cell">
                <button
                  type="button"
                  class="icon-button js-delete-redirect"
                  data-source-url="{{ entry.source_url }}"
                  title="Eintrag löschen"
                  aria-label="Eintrag löschen"
                >
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
                    <path d="M360-280q0 17 11.5 28.5T400-240q17 0 28.5-11.5T440-280v-320q0-17-11.5-28.5T400-640q-17 0-28.5 11.5T360-600v320Zm160 0q0 17 11.5 28.5T560-240q17 0 28.5-11.5T600-280v-320q0-17-11.5-28.5T560-640q-17 0-28.5 11.5T520-600v320ZM240-720v440q0 33 23.5 56.5T320-200h320q33 0 56.5-23.5T720-280v-440H240Zm120-80h240l40 40h160v80H120v-80h160l40-40Zm-40 600q-66 0-113-47t-47-113v-440h-80v-80h200l40-40h280l40 40h200v80h-80v440q0 66-47 113t-113 47H320Z"/>
                  </svg>
                </button>
              </td>
            </tr>
            {% endfor %}
            {% else %}
            <tr>
              <td colspan="7" class="text-center py-4 text-muted">
                Keine Redirect-Einträge gefunden.
              </td>
            </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      document.querySelectorAll('.js-delete-redirect').forEach(function (button) {
        button.addEventListener('click', function (event) {
          event.preventDefault();
          const trigger = this;
          const sourceUrl = trigger.dataset.sourceUrl;
          if (!sourceUrl) {
            return;
          }
          if (!confirm('Eintrag ' + sourceUrl + ' löschen?')) {
            return;
          }
          fetch('{{ url_for('delete_redirect') }}', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({ source_url: sourceUrl })
          })
            .then(function (response) {
              if (response.ok) {
                return response.json();
              }
              return response
                .json()
                .catch(function () { return {}; })
                .then(function (payload) {
                  const message = payload.error || response.statusText || 'Unbekannter Fehler';
                  throw new Error(message);
                });
            })
            .then(function () {
              const row = trigger.closest('tr');
              if (row) {
                row.remove();
              }
            })
            .catch(function (error) {
              alert('Löschen fehlgeschlagen: ' + error.message);
            });
        });
      });
    });
  </script>
</main>
{% endblock %}