{% extends "op_zz_frame.html" %}
{% block centercontent %}

<main class="ct-docs-content-col" role="main">

  <div style="width:100%">
    <h1 class="ct-docs-page-h1-title" id="content">
      {{ _('Chargepoint Monitoring Dashboard') }}
    </h1>
  </div>
  
    <style>

.docs {
    --dashboard-card-bg: #ffffff;
    --dashboard-card-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    --dashboard-summary-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
    --dashboard-card-border: transparent;
    --dashboard-text-primary: #14213d;
    --dashboard-text-muted: #6c757d;
    --dashboard-badge-bg: #f8f9fc;
    --dashboard-badge-border: transparent;
    --dashboard-icon-bg: #f1f3f5;
    --dashboard-icon-hover-bg: #e9ecef;
    --dashboard-hover-shadow: 0 6px 16px rgba(15, 23, 42, 0.1);
}

.docs.dark-edition {
    --dashboard-card-bg: rgba(15, 23, 42, 0.92);
    --dashboard-card-shadow: 0 20px 35px rgba(2, 6, 23, 0.45);
    --dashboard-summary-shadow: 0 18px 35px rgba(2, 6, 23, 0.4);
    --dashboard-card-border: rgba(30, 41, 59, 0.9);
    --dashboard-text-primary: #f8fafc;
    --dashboard-text-muted: rgba(203, 213, 225, 0.82);
    --dashboard-badge-bg: rgba(30, 41, 59, 0.85);
    --dashboard-badge-border: rgba(51, 65, 85, 0.8);
    --dashboard-icon-bg: rgba(30, 41, 59, 0.85);
    --dashboard-icon-hover-bg: rgba(59, 130, 246, 0.2);
    --dashboard-hover-shadow: 0 12px 28px rgba(2, 6, 23, 0.55);
}

.dashboard-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 2rem;
}

.dashboard-actions__form {
    margin: 0;
}

.dashboard-action-button {
    border-radius: 10px;
    border: 1px solid var(--dashboard-card-border, rgba(226, 232, 240, 0.8));
    background: var(--dashboard-card-bg, #ffffff);
    color: var(--dashboard-text-primary, #0f172a);
    font-weight: 700;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
    line-height: 1.2;
    padding: 0.55rem 0.9rem;
    box-shadow: var(--dashboard-summary-shadow, 0 2px 6px rgba(15, 23, 42, 0.08));
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

.dashboard-action-button:hover,
.dashboard-action-button:focus {
    background: var(--dashboard-icon-hover-bg, #e9ecef);
    color: var(--dashboard-text-primary, #0f172a);
    transform: translateY(-1px);
    box-shadow: var(--dashboard-hover-shadow, 0 6px 16px rgba(15, 23, 42, 0.1));
}

.dashboard-action-button:focus-visible {
    outline: 3px solid #4ba2e3;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(75, 162, 227, 0.25);
}

.dashboard-action-button:disabled {
    opacity: 0.65;
    transform: none;
}

.icon-action--primary {
    color: #5e6687;
}

.icon-action--primary svg {
    fill: currentColor;
}

.docs.dark-edition .icon-action--primary {
    color: #c5cffa;
}

.table-icon-link,
.table-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #4ba2e3;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.table-icon-link svg,
.table-icon-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.table-icon-button {
    border: none;
    background: transparent;
    cursor: pointer;
}

.table-icon-button:focus-visible,
.table-icon-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.table-icon-link:hover,
.table-icon-link:focus,
.table-icon-button:hover,
.table-icon-button:focus {
    background: var(--dashboard-icon-hover-bg, #e9ecef);
}

.table-icon-link--neutral {
    color: #5e6687;
}

.table-icon-link--danger,
.table-icon-button--danger {
    color: #ed7039;
}

.docs.dark-edition .table-icon-link,
.docs.dark-edition .table-icon-button {
    color: #8ab4ff;
}

.docs.dark-edition .table-icon-link--neutral {
    color: #c5cffa;
}

.docs.dark-edition .table-icon-link--danger,
.docs.dark-edition .table-icon-button--danger {
    color: #ff9966;
}

  .ct-docs-content-col>table>tbody>tr>td, .ct-docs-content-col>table>tbody>tr>th, .ct-docs-content-col>table>tfoot>tr>td, .ct-docs-content-col>table>tfoot>tr>th, .ct-docs-content-col>table>thead>tr>td, .ct-docs-content-col>table>thead>tr>th {
  border: 0;
  }
  
  .dashboard-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
}

  .dashboard-summary .summary-card {
    background: var(--dashboard-card-bg, #f8f9fa);
    border-radius: 12px;
    padding: 16px;
    flex: 1 1 calc(16.6% - 12px);
    min-width: 160px;
    box-shadow: var(--dashboard-summary-shadow, 0 2px 6px rgba(15, 23, 42, 0.08));
    border: 1px solid var(--dashboard-card-border, transparent);
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
  }

  .summary-card {
    font: inherit;
    color: var(--dashboard-text-primary, #14213d);
  }

  .summary-card--interactive {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  }

  .summary-card--interactive:hover,
  .summary-card--interactive:focus {
    transform: translateY(-2px);
    box-shadow: var(--dashboard-hover-shadow, 0 6px 16px rgba(15, 23, 42, 0.1));
  }

  .summary-card--interactive:focus-visible {
    outline: 3px solid #4ba2e3;
    outline-offset: 3px;
  }

  .summary-card--active {
    border-color: #4ba2e3;
    box-shadow: 0 4px 14px rgba(75, 162, 227, 0.25);
  }

  .summary-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .summary-card__header .summary-label {
    margin-bottom: 0;
  }

  .summary-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dashboard-text-muted, #6c757d);
  }

  .summary-card__icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

.status-indicator-cell {
    width: 32px;
    text-align: center;
}

.status-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #adb5bd;
}

.status-indicator.status-indicator--online {
    background-color: #28a745;
}

.status-indicator.status-indicator--offline {
    background-color: #dc3545;
}

.status-indicator.status-indicator--unknown {
    background-color: #ced4da;
}

  .summary-card .summary-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: var(--dashboard-text-muted, #6c757d);
    margin-bottom: 0;
    letter-spacing: 0.5px;
  }

.summary-card .summary-value {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--dashboard-text-primary, #14213d);
}

.summary-card .summary-subvalue {
    font-size: 0.75rem;
    margin-top: 4px;
    color: var(--dashboard-text-muted, #6c757d);
}

.dashboard-meta {
    margin-bottom: 24px;
}

.station-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.station-card {
    background: var(--dashboard-card-bg, #ffffff);
    border-radius: 12px;
    box-shadow: var(--dashboard-card-shadow, 0 8px 24px rgba(15, 23, 42, 0.08));
    border: 1px solid var(--dashboard-card-border, transparent);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--dashboard-text-primary, #14213d);
}

.station-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.station-card__title {
    display: flex;
    gap: 12px;
    align-items: center;
}

.station-card__highlight {
    border: none;
    background: transparent;
    color: var(--dashboard-text-muted, #6c757d);
    font-size: 1.25rem;
    line-height: 1;
    padding: 2px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.2s ease;
}

.station-card__highlight:hover,
.station-card__highlight:focus {
    color: #f59e0b;
    transform: translateY(-1px);
}

.station-card__highlight:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 3px;
}

.station-card__highlight-icon {
    pointer-events: none;
    display: block;
}

.station-card__highlight--active {
    color: #f59e0b;
}

.docs.dark-edition .station-card__highlight {
    color: rgba(203, 213, 225, 0.82);
}

.docs.dark-edition .station-card__highlight:hover,
.docs.dark-edition .station-card__highlight:focus {
    color: #fbbf24;
}

.docs.dark-edition .station-card__highlight--active {
    color: #fbbf24;
}

.station-card__selection {
    display: flex;
    align-items: center;
}

.station-card__compare-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.compare-selection-info {
    margin-right: auto;
    align-self: center;
    color: var(--dashboard-text-muted, #6c757d);
}

.station-card__name {
    font-size: 1rem;
    font-weight: 600;
    color: var(--dashboard-text-primary, #14213d);
}

.station-card__comment {
    margin-left: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--dashboard-text-muted, #6c757d);
}

.station-card__name a {
    display: inline-flex;
    margin-left: 6px;
}

.station-card__statusline {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--dashboard-text-muted, #6c757d);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: rgba(148, 163, 184, 0.16);
    color: #1f2937;
}

.status-badge--available {
    background: rgba(34, 197, 94, 0.16);
    color: #15803d;
}

.status-badge--preparing {
    background: rgba(245, 158, 11, 0.18);
    color: #b45309;
}

.status-badge--charging {
    background: rgba(59, 130, 246, 0.18);
    color: #1d4ed8;
}

.status-badge--finishing {
    background: rgba(99, 102, 241, 0.18);
    color: #4338ca;
}

.status-badge--protocol {
    background: rgba(79, 70, 229, 0.16);
    color: #4338ca;
}

.status-badge--error {
    background: rgba(248, 113, 113, 0.2);
    color: #b91c1c;
}

.status-badge--unknown {
    background: rgba(148, 163, 184, 0.22);
    color: #374151;
}

.docs.dark-edition .status-badge {
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
}

.docs.dark-edition .status-badge--available {
    background: rgba(34, 197, 94, 0.26);
    color: #bbf7d0;
}

.docs.dark-edition .status-badge--preparing {
    background: rgba(245, 158, 11, 0.28);
    color: #fcd34d;
}

.docs.dark-edition .status-badge--charging {
    background: rgba(59, 130, 246, 0.32);
    color: #bfdbfe;
}

.docs.dark-edition .status-badge--finishing {
    background: rgba(99, 102, 241, 0.32);
    color: #c7d2fe;
}

.docs.dark-edition .status-badge--error {
    background: rgba(248, 113, 113, 0.32);
    color: #fecaca;
}

.docs.dark-edition .status-badge--protocol {
    background: rgba(129, 140, 248, 0.28);
    color: #e0e7ff;
}

.docs.dark-edition .status-badge--unknown {
    background: rgba(148, 163, 184, 0.32);
    color: #cbd5f5;
}

.station-card__metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.metric-badge {
    background: var(--dashboard-badge-bg, #f8f9fc);
    border-radius: 10px;
    padding: 10px 12px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--dashboard-badge-border, transparent);
}

.metric-badge--link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.metric-badge--link:hover,
.metric-badge--link:focus {
    transform: translateY(-2px);
    box-shadow: var(--dashboard-hover-shadow, 0 6px 16px rgba(15, 23, 42, 0.1));
}

.metric-badge__label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--dashboard-text-muted, #6c757d);
}

.metric-badge__value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dashboard-text-primary, #1f2937);
}

.metric-badge__value svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: currentColor;
}

.station-card__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.station-card__actions form {
    margin: 0;
}

.docs.dark-edition .text-success {
    color: #22c55e !important;
}

.icon-action,
.icon-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--dashboard-icon-bg, #f1f3f5);
    border-radius: 8px;
    border: 1px solid var(--dashboard-card-border, transparent);
    padding: 0;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
    color: var(--dashboard-text-primary, #14213d);
}

.icon-action:hover,
.icon-action:focus,
.icon-action-btn:hover,
.icon-action-btn:focus {
    background: var(--dashboard-icon-hover-bg, #e9ecef);
    transform: translateY(-1px);
}

.icon-action svg,
.icon-action-btn svg {
    pointer-events: none;
}

.icon-action-btn[disabled] {
    cursor: default;
    background: var(--dashboard-icon-bg, #f1f3f5);
    opacity: 0.6;
    transform: none;
}

.truncate {
    max-width: 220px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .station-grid {
        grid-template-columns: 1fr;
    }

    .truncate {
        max-width: 100%;
    }
}

.station-card[hidden] {
    display: none !important;
}

.dashboard-kpi-card .card-header {
    align-items: center;
}

.kpi-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.kpi-summary__item {
    background: var(--dashboard-card-bg, #f8f9fc);
    border: 1px solid var(--dashboard-card-border, transparent);
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: var(--dashboard-summary-shadow, 0 2px 6px rgba(15, 23, 42, 0.08));
}

.kpi-summary__label {
    font-size: 12px;
    color: var(--dashboard-text-muted, #6c757d);
    margin-bottom: 4px;
    display: block;
}

.kpi-summary__value {
    font-weight: 700;
    font-size: 18px;
    color: var(--dashboard-text-primary, #14213d);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.kpi-panel {
    background: var(--dashboard-card-bg, #ffffff);
    border: 1px solid var(--dashboard-card-border, rgba(226, 232, 240, 0.7));
    border-radius: 12px;
    padding: 12px;
    box-shadow: var(--dashboard-card-shadow, 0 8px 24px rgba(15, 23, 42, 0.08));
}

.kpi-panel__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--dashboard-text-primary, #14213d);
    margin-bottom: 8px;
}

.kpi-chip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.kpi-chip {
    background: var(--dashboard-badge-bg, #f8f9fc);
    border: 1px solid var(--dashboard-badge-border, transparent);
    border-radius: 10px;
    padding: 10px;
}

.kpi-chip__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--dashboard-text-primary, #14213d);
    display: block;
}

.kpi-chip__value {
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
}

.kpi-chip__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    color: var(--dashboard-text-muted, #6c757d);
    font-size: 12px;
}

.kpi-alert-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kpi-alert {
    background: var(--dashboard-badge-bg, #f8f9fc);
    border: 1px solid var(--dashboard-badge-border, transparent);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    color: var(--dashboard-text-primary, #14213d);
}

.kpi-alert__meta {
    display: flex;
    gap: 6px;
    align-items: center;
    color: var(--dashboard-text-muted, #6c757d);
    font-size: 12px;
}

.kpi-job-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.kpi-job {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--dashboard-badge-bg, #f8f9fc);
    border: 1px solid var(--dashboard-badge-border, transparent);
    border-radius: 10px;
    padding: 8px 10px;
}

.kpi-errors {
    line-height: 1.4;
}

.docs.dark-edition .kpi-chip,
.docs.dark-edition .kpi-alert,
.docs.dark-edition .kpi-panel,
.docs.dark-edition .kpi-summary__item,
.docs.dark-edition .kpi-job {
    background: var(--dashboard-card-bg, rgba(15, 23, 42, 0.92));
    border-color: var(--dashboard-card-border, rgba(51, 65, 85, 0.8));
}

.service-icon-button,
.service-icon-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.service-icon-button {
    border-radius: 8px;
    border: 1px solid var(--dashboard-card-border, rgba(226, 232, 240, 0.8));
    background: var(--dashboard-icon-bg, #f1f3f5);
    color: var(--dashboard-text-primary, #14213d);
    padding: 0;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.service-icon-button:hover,
.service-icon-button:focus {
    background: var(--dashboard-icon-hover-bg, #e9ecef);
    transform: translateY(-1px);
}

.service-icon-button:focus-visible {
    outline: 2px solid #f59e0b;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

.service-icon-placeholder {
    color: var(--dashboard-text-muted, #6c757d);
}

</style>

<div class="dashboard-summary">
  <button type="button" class="summary-card summary-card--interactive" data-filter="connected" aria-pressed="false" title="{{ _('Show only connected charge points') }}" aria-label="{{ _('Filter connected, {count} connected charge points', count=summary.connected) }}">
    <span class="summary-card__header">
      <span class="summary-label">{{ _('Connected') }}</span>
      <span class="summary-card__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false"><path d="M7 2a1 1 0 0 1 1 1v5h8V3a1 1 0 1 1 2 0v5h3v2H3V8h3V3a1 1 0 0 1 1-1Zm5 9a4 4 0 0 1 4 4v6h-2v-6a2 2 0 1 0-4 0v6h-2v-6a4 4 0 0 1 4-4Z"/></svg>
      </span>
    </span>
    <span class="summary-value">{{ summary.connected }}</span>
  </button>
  <button type="button" class="summary-card summary-card--interactive summary-card--active" data-filter="all" aria-pressed="true" title="{{ _('Show all charge points') }}" aria-label="{{ _('Show all charge points, {count} total', count=summary.total) }}">
    <span class="summary-card__header">
      <span class="summary-label">{{ _('Total') }}</span>
      <span class="summary-card__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false"><path d="M4 3h7v7H4V3Zm9 0h7v7h-7V3ZM4 14h7v7H4v-7Zm9 0h7v7h-7v-7Z"/></svg>
      </span>
    </span>
    <span class="summary-value">{{ summary.total }}</span>
  </button>
  <div class="summary-card">
    <div class="summary-label">{{ _('Availability') }}</div>
    <div class="summary-value">{{ summary.availability_pct }}%</div>
  </div>
  <button type="button" class="summary-card summary-card--interactive" data-filter="marked" aria-pressed="false" title="{{ _('Show only flagged charge points') }}" aria-label="{{ _('Filter flagged charge points, {count} flagged', count=summary.marked) }}">
    <span class="summary-card__header">
      <span class="summary-label">{{ _('Flagged') }}</span>
      <span class="summary-card__icon" aria-hidden="true">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" focusable="false"><path d="M10.29 3.86c.8-1.53 2.62-1.53 3.42 0l8.07 15.4c.74 1.42-.04 2.74-1.71 2.74H3.93c-1.67 0-2.45-1.32-1.71-2.74l8.07-15.4ZM13 17v2h-2v-2h2Zm0-8v6h-2V9h2Z"/></svg>
      </span>
    </span>
    <span class="summary-value">{{ summary.marked }}</span>
  </button>
  <div class="summary-card">
    <div class="summary-label">{{ _('Longest connection duration') }}</div>
    <div class="summary-value">{{ summary.longest.duration }}</div>
    <div class="summary-subvalue">{{ summary.longest.station_id or '-' }}</div>
  </div>
  <div class="summary-card">
    <div class="summary-label">{{ _('Shortest connection duration') }}</div>
    <div class="summary-value">{{ summary.shortest.duration }}</div>
    <div class="summary-subvalue">{{ summary.shortest.station_id or '-' }}</div>
  </div>
</div>

<div class="dashboard-meta">

  <p class="text-xs">
  	{{ _('OCPP Broker Endpoint:') }} {{ PROXY_BASE_WS }}
  	|
    {{ _('Broker status:') }}
    {% if broker_status.reachable %}
      <span class="text-success">{{ _('Reachable') }}</span>
    {% else %}
      <span class="text-danger">{{ _('Not reachable') }}</span>
      {% if broker_status.error %}<br><span class="text-xxs text-muted">{{ broker_status.error }}</span>{% endif %}
    {% endif %}
  </p>
  <p class="text-xs">
    {{ _('Broker API Endpoint:') }} {{ PROXY_BASE_URL }}
    |
    {{ _('API status:') }}
    {% if broker_status.api_reachable %}
      <span class="text-success">{{ _('Reachable') }}</span>
    {% else %}
      <span class="text-danger">{{ _('Not reachable') }}</span>
      {% if broker_status.api_error %}<br><span class="text-xxs text-muted">{{ broker_status.api_error }}</span>{% endif %}
    {% endif %}
  </p>
  {% set conn_metrics = broker_status.connection_metrics or {} %}
  {% set conn_total = conn_metrics.get('total') or {} %}
  <p class="text-xs mb-1">
    {{ _('Connection stats:') }}
    {% if conn_total %}
      {{ _('Success rate') }}: {% if conn_total.success_rate is not none %}{{ (conn_total.success_rate * 100) | round(1) }}%{% else %}-{% endif %}
      |
      {{ _('Average RTT') }}: {% if conn_total.avg_rtt_ms is not none %}{{ conn_total.avg_rtt_ms | round(1) }} ms{% else %}-{% endif %}
      |
      {{ _('p95 RTT') }}: {% if conn_total.p95_rtt_ms is not none %}{{ conn_total.p95_rtt_ms | round(1) }} ms{% else %}-{% endif %}
      |
      {{ _('Uptime') }}: {% if conn_total.uptime_ratio is not none %}{{ (conn_total.uptime_ratio * 100) | round(1) }}%{% else %}-{% endif %}
    {% else %}
      {{ _('Not available') }}
      {% if broker_status.connection_error %}<br><span class="text-xxs text-muted">{{ broker_status.connection_error }}</span>{% endif %}
    {% endif %}
  </p>
  {% set warnings = broker_status.connection_warnings or [] %}
  {% if warnings %}
    <p class="text-xs text-warning mb-0">{{ _('Connection quality warnings:') }}</p>
    <ul class="text-xxs text-warning ps-3">
      {% for warning in warnings[:5] %}
        {% set metric_label = _('Success rate') if warning.metric == 'success_rate' else _('Uptime') %}
        <li>
          {{ warning.station_id }} – {{ metric_label }}:
          {% if warning.value is not none %}{{ (warning.value * 100) | round(1) }}%{% else %}-{% endif %}
          {% if warning.threshold is not none %}(≥ {{ (warning.threshold * 100) | round(1) }}%) {% endif %}
        </li>
      {% endfor %}
      {% if warnings|length > 5 %}
        <li>{{ _('and {count} more...', count=warnings|length - 5) }}</li>
      {% endif %}
    </ul>
  {% endif %}
  {% set reconnect_warnings = broker_status.reconnect_warnings or [] %}
  {% if reconnect_warnings %}
    <p class="text-xs text-warning mb-0">{{ _('Reconnect warnings:') }}</p>
    <ul class="text-xxs text-warning ps-3">
      {% for warning in reconnect_warnings[:5] %}
        {% set metric_key = warning.metric or '' %}
        {% if metric_key.startswith('handshake_failure') %}
          {% set reason = metric_key.split('_')[-1] %}
          <li>
            {{ _('Handshake failures ({reason})', reason=reason) }}:
            {{ warning.value }}
            {% if warning.threshold is not none %}({{ _('threshold') }}: {{ warning.threshold }}){% endif %}
          </li>
        {% else %}
          <li>
            {{ warning.station_id }} – {{ _('Reconnect rate') }}:
            {% if warning.value is not none %}{{ warning.value | round(2) }} / {{ _('day') }}{% else %}-{% endif %}
            {% if warning.threshold is not none %}(≥ {{ warning.threshold | round(2) }}){% endif %}
          </li>
        {% endif %}
      {% endfor %}
      {% if reconnect_warnings|length > 5 %}
        <li>{{ _('and {count} more...', count=reconnect_warnings|length - 5) }}</li>
      {% endif %}
    </ul>
  {% endif %}
  {% set db_metrics = broker_status.db_pool_metrics or {} %}
  {% set db_warnings = broker_status.db_pool_warnings or [] %}
  <p class="text-xs mb-1">
    {{ _('DB pool:') }}
    {% if db_metrics %}
      {{ _('size') }}: {{ db_metrics.size if db_metrics.size is not none else '-' }} |
      {{ _('free') }}: {{ db_metrics.freesize if db_metrics.freesize is not none else '-' }} |
      {{ _('in use') }}: {{ db_metrics.in_use if db_metrics.in_use is not none else '-' }} |
      {{ _('waiting') }}: {{ db_metrics.waiting if db_metrics.waiting is not none else '-' }} |
      {{ _('avg acquire') }}: {% if db_metrics.latency_avg_ms is not none %}{{ db_metrics.latency_avg_ms | round(1) }} ms{% else %}-{% endif %} |
      {{ _('p95 acquire') }}: {% if db_metrics.latency_p95_ms is not none %}{{ db_metrics.latency_p95_ms | round(1) }} ms{% else %}-{% endif %}
    {% else %}
      {{ _('Not available') }}
      {% if broker_status.db_pool_error %}<br><span class="text-xxs text-muted">{{ broker_status.db_pool_error }}</span>{% endif %}
    {% endif %}
  </p>
  {% if db_warnings %}
    <p class="text-xs text-warning mb-0">{{ _('Database pool warnings:') }}</p>
    <ul class="text-xxs text-warning ps-3">
      {% for warning in db_warnings[:5] %}
        <li>{{ warning }}</li>
      {% endfor %}
      {% if db_warnings|length > 5 %}
        <li>{{ _('and {count} more...', count=db_warnings|length - 5) }}</li>
      {% endif %}
    </ul>
  {% endif %}
  {% set log_queue_metrics = broker_status.ocpp_log_queue_metrics or {} %}
  {% set log_queue_warnings = broker_status.ocpp_log_queue_warnings or [] %}
  <p class="text-xs mb-1">
    {{ _('OCPP log queue:') }}
    {% if log_queue_metrics %}
      {{ _('size') }}: {{ log_queue_metrics.size if log_queue_metrics.size is not none else '-' }} |
      {{ _('capacity') }}: {{ log_queue_metrics.maxsize if log_queue_metrics.maxsize is not none else '-' }} |
      {{ _('remaining') }}: {{ log_queue_metrics.remaining_capacity if log_queue_metrics.remaining_capacity is not none else '-' }} |
      {{ _('fill') }}: {% if log_queue_metrics.fill_ratio is not none %}{{ (log_queue_metrics.fill_ratio * 100) | round(1) }}%{% else %}-{% endif %} |
      {{ _('drops') }}: {{ log_queue_metrics.drop_count if log_queue_metrics.drop_count is not none else 0 }} |
      {{ _('recent drops') }}: {{ log_queue_metrics.recent_drop_count if log_queue_metrics.recent_drop_count is not none else 0 }}
      {% if log_queue_metrics.last_drop_display %}
        | {{ _('last drop') }}: {{ log_queue_metrics.last_drop_display }}
      {% elif log_queue_metrics.last_drop_at %}
        | {{ _('last drop') }}: {{ log_queue_metrics.last_drop_at }}
      {% endif %}
    {% else %}
      {{ _('Not available') }}
      {% if broker_status.ocpp_log_queue_error %}<br><span class="text-xxs text-muted">{{ broker_status.ocpp_log_queue_error }}</span>{% endif %}
    {% endif %}
  </p>
  {% if log_queue_warnings %}
    <p class="text-xs text-warning mb-0">{{ _('OCPP log queue warnings:') }}</p>
    <ul class="text-xxs text-warning ps-3">
      {% for warning in log_queue_warnings[:5] %}
        <li>{{ warning }}</li>
      {% endfor %}
      {% if log_queue_warnings|length > 5 %}
        <li>{{ _('and {count} more...', count=log_queue_warnings|length - 5) }}</li>
      {% endif %}
    </ul>
  {% endif %}
  <p class="text-xs">
  <!--
    Last Database Check:
    {% if broker_status.db_last_attempt %}
      {{ broker_status.db_last_attempt }}
      {% if broker_status.db_last_success is not none %}
        – {% if broker_status.db_last_success %}successful{% else %}failed{% endif %}
      {% endif %}
    {% else %}
      No data available
    {% endif %}
    -->
  </p>
</div>

{% if marked_wallboxes %}
<div class="card mb-4">
  <div class="card-header pb-0 d-flex flex-wrap align-items-start justify-content-between gap-2">
    <div>
      <h6 class="mb-0">{{ _('Marked Wallboxes') }}</h6>
      <p class="text-xs text-muted mb-0">{{ _('Entries from manual checks and automatic fault detection.') }}</p>
    </div>
    <div class="d-flex align-items-start gap-2">
      <form method="post" action="{{ url_for('clear_all_marks') }}" id="clear-marked-wallboxes-form"></form>
      <button type="button"
              class="btn btn-outline-secondary btn-sm js-clear-marked-wallboxes"
              data-entry-count="{{ marked_wallboxes | length }}"
              aria-label="{{ _('Clear error list') }}">
        {{ _('Clear error list') }}
      </button>
    </div>
  </div>
  <div class="card-body px-0 pt-0 pb-2">
    <div class="table-responsive p-0">
      <table class="table align-items-center mb-0">
        <thead>
          <tr>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Wallbox') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Reason') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Source') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Target') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7">{{ _('Marked') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">{{ _('Error history') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">{{ _('OCPP log') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">{{ _('View config') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">{{ _('Service') }}</th>
            <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 text-center">{{ _('Action') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for mark in marked_wallboxes %}
          <tr>
            {% if mark.source_url %}
              {% set source_url = mark.source_url %}
            {% elif mark.station_id %}
              {% set source_url = '/' + (mark.station_id | trim('/')) %}
            {% else %}
              {% set source_url = None %}
            {% endif %}
            {% set details_source = (mark.station_id or source_url or '').strip('/') %}
            {% set details_source = details_source.split('/')[-1] %}
            <td class="text-xs font-weight-bold mb-0">
              {{ mark.station_id }}
            </td>
            <td class="text-xs mb-0">
              {{ mark.reason }}
            </td>
            <td class="text-xs mb-0">
              {% if mark.source == 'fault_detection' %}
                {{ _('Fault detection') }}
              {% else %}
                {{ _('Manual') }}
              {% endif %}
            </td>
            <td class="text-xs mb-0">
              {{ mark.target or '-' }}
            </td>
            <td class="text-xs mb-0">
              {% set ts = mark.marked_at %}
              {% if ts %}{{ ts }}{% else %}-{% endif %}
            </td>
            <td class="text-xs mb-0 text-center">
              {% if mark.station_id %}
                <a href="{{ url_for('marked_wallbox_history', station_id=mark.station_id) }}" class="table-icon-link table-icon-link--neutral" target="_blank" rel="noopener" title="{{ _('Error history') }}" aria-label="{{ _('Error history') }}">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
                    <path fill-rule="evenodd" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8Zm1-12h-2v6l4.5 2.7.75-1.23L13 12.3V8Z" clip-rule="evenodd"/>
                  </svg>
                </a>
              {% else %}-{% endif %}
            </td>
            <td class="text-xs mb-0 text-center">
              {% if details_source %}
              <a href="{{ url_for('details', source_url=details_source) }}" class="table-icon-link" target="_blank" rel="noopener" title="{{ _('OCPP log') }}" aria-label="{{ _('OCPP log') }}">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
                  <path fill="currentColor" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14H3V5Zm2 0v12h14V5H5Zm1 3.5 2.75 2.75L6 14l1.4 1.4L11.55 11 7.4 6.9 6 8.5Zm6 7.5h5v-2h-5v2Z"/>
                </svg>
              </a>
              {% else %}-{% endif %}
            </td>
            <td class="text-xs mb-0 text-center">
              {% if source_url %}
              <a href="{{ url_for('cp_config_view', source_url=source_url) }}" class="table-icon-link table-icon-link--neutral" target="_blank" rel="noopener" title="{{ _('View config') }}" aria-label="{{ _('View config') }}">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" aria-hidden="true">
                  <path fill="currentColor" d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
                </svg>
              </a>
              {% else %}-{% endif %}
            </td>
            <td class="text-xs mb-0 text-center">
              {% if not mark.service_requested_at %}
              <button type="button"
                      class="service-icon-button js-service-request"
                      data-mark-id="{{ mark.id }}"
                      data-station-id="{{ mark.station_id | default('', true) }}"
                      data-reason="{{ mark.reason | default('', true) }}"
                      data-marked="{{ mark.marked_at | default('', true) }}"
                      title="{{ _('Request service') }}"
                      aria-label="{{ _('Request service') }}">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <path fill="currentColor" d="M11.5 2a3.5 3.5 0 1 1-3.5 3.5A3.5 3.5 0 0 1 11.5 2Zm0 7A5.5 5.5 0 0 1 17 14.5V18h-1.5v-3.5a4 4 0 0 0-8 0V18H6v-3.5A5.5 5.5 0 0 1 11.5 9Zm10.35 1.24-1.16-.67a2.68 2.68 0 0 0-.2-.48l.55-1.25-1.12-1.12-1.25.55a2.68 2.68 0 0 0-.48-.2l-.67-1.16h-1.58l-.67 1.16a2.68 2.68 0 0 0-.48.2l-1.25-.55-1.12 1.12.55 1.25c-.08.15-.15.31-.2.48l-1.16.67v1.58l1.16.67c.05.17.12.33.2.48l-.55 1.25 1.12 1.12 1.25-.55c.15.08.31.15.48.2l.67 1.16h1.58l.67-1.16c.17-.05.33-.12.48-.2l1.25.55 1.12-1.12-.55-1.25c.08-.15.15-.31.2-.48l1.16-.67Zm-3.85.76a1.25 1.25 0 1 1-1.25-1.25 1.25 1.25 0 0 1 1.25 1.25Z"/>
                </svg>
              </button>
              {% else %}
              {% set service_title = mark.service_requested_at
                and _('Service request sent on {timestamp}', timestamp=mark.service_requested_at)
                or _('Service request sent') %}
              <span class="service-icon-placeholder" role="img" aria-label="{{ _('Service request sent') }}" title="{{ service_title }}">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
                  <path fill="currentColor" d="M13 1v2h-2V1h2Zm7.03 3.62-1.41 1.41-1.41-1.41 1.41-1.41 1.41 1.41ZM12 5a9 9 0 1 1-9 9 9 9 0 0 1 9-9Zm0 2a7 7 0 1 0 7 7 7 7 0 0 0-7-7Zm1 1v6.17l3.09 3.08-1.41 1.42L11 14V8h2Z"/>
                </svg>
              </span>
              {% endif %}
            </td>
            <td class="text-xs mb-0 text-center">
              <form method="post" action="{{ url_for('clear_mark') }}" onsubmit="return confirm('{{ _('Remove mark?') }}');" class="d-inline-flex justify-content-center">
                <input type="hidden" name="mark_id" value="{{ mark.id }}" />
                <button type="submit" class="table-icon-button table-icon-button--danger p-0 m-0" aria-label="{{ _('Remove mark') }}">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="m376-300 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 180q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520Zm-400 0v520-520Z"/></svg>
                </button>
              </form>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}


<div class="station-grid">
  {% for row in rows %}
  {% set station_id = row.source_url.split('/')[-1] %}
  {% set normalized_station_id = station_normalized_lookup.get(station_id, station_id) %}
  {% set station_anchor = station_card_anchors.get(normalized_station_id, station_card_anchors.get(station_id)) %}
  {% if not station_anchor %}
    {% set sanitized_station_id = station_id|replace('/', '-')|replace(' ', '-')|replace(':', '-') %}
    {% set station_anchor = 'station-card-' ~ sanitized_station_id %}
  {% endif %}
  {% set normalized_source = row.source_url.lstrip('/') %}
  {% set alt_source = '/' ~ normalized_source %}
  {% set is_connected = normalized_source in durations or alt_source in durations or normalized_station_id in durations %}
  {% set last_connected_raw = row.last_connected %}
  {% set last_connected_str = last_connected_raw|string %}
  {% set has_last_connected = last_connected_raw is not none and last_connected_str|trim|lower != 'none' %}
  {% if is_connected %}
    {% set indicator_state = 'status-indicator--online' %}
    {% set indicator_label = _('Connected') %}
  {% elif has_last_connected %}
    {% set indicator_state = 'status-indicator--offline' %}
    {% set indicator_label = _('Disconnected') %}
  {% else %}
    {% set indicator_state = 'status-indicator--unknown' %}
    {% set indicator_label = _('Never connected') %}
  {% endif %}
  {%- set q = qualities.get(row.source_url.lstrip('/'), qualities.get('/' ~ row.source_url.lstrip('/'), qualities.get(normalized_station_id))) -%}
  {% set highlight_active = (normalized_station_id in highlighted_station_ids) or (station_id in highlighted_station_ids) %}
  <article class="station-card" id="{{ station_anchor }}" data-station-anchor="{{ station_anchor }}" data-connected="{{ 'true' if is_connected else 'false' }}" data-marked="{{ 'true' if (station_id in marked_station_ids) or (normalized_station_id in marked_station_ids) else 'false' }}">
    <header class="station-card__header">
      <div class="station-card__title">
        <button
          type="button"
          class="station-card__highlight js-station-highlight{% if highlight_active %} station-card__highlight--active{% endif %}"
          data-station-id="{{ normalized_station_id }}"
          data-display-id="{{ station_id }}"
          data-location="{{ (row.location_name or '')|e }}"
          data-card-target="{{ station_anchor }}"
          data-highlighted="{{ 'true' if highlight_active else 'false' }}"
          aria-pressed="{{ 'true' if highlight_active else 'false' }}"
          title="{{ _('Remove highlight') if highlight_active else _('Mark as highlight') }}"
        >
          <span class="station-card__highlight-icon" aria-hidden="true">{{ '★' if highlight_active else '☆' }}</span>
          <span class="visually-hidden">{{ _('Toggle highlight') }}</span>
        </button>
        <span class="status-indicator {{ indicator_state }}" title="{{ indicator_label }}"></span>
        <div>
          <div class="station-card__name">
            {{ station_id }}
            {% if row.comment %}
            <span class="station-card__comment">&ndash; {{ row.comment }}</span>
            {% endif %}
            {% if row.location_link %}
            <a href="{{ row.location_link }}" target="_blank" rel="noopener noreferrer" title="{{ row.location_name or _('Open location') }}">
              <svg xmlns="http://www.w3.org/2000/svg" height="18" viewBox="0 -960 960 960" width="18" fill="#4ba2e3"><path d="M480-120q-119 0-199.5-80.5T200-400q0-66 30.5-128T312-636l168-204 168 204q51 58 82 120t31 128q0 119-80.5 199.5T480-120Zm0-80q86 0 143-57t57-143q0-48-22-95.5T604-585L480-736 356-585q-32 37-54 84.5T280-400q0 86 57 143t143 57Zm0-180q-25 0-42.5-17.5T420-440q0-25 17.5-42.5T480-500q25 0 42.5 17.5T540-440q0 25-17.5 42.5T480-380Z"/></svg>
            </a>
            {% endif %}
          </div>
          <div class="station-card__statusline">
            <span>{{ indicator_label }}</span>
            {% set charge_state = station_charge_states.get(normalized_station_id)
              or station_charge_states.get(station_id)
              or station_charge_states.get(row.source_url.lstrip('/'))
              or station_charge_states.get(row.source_url) %}
            {% if charge_state and charge_state.key != 'unknown' %}
              <span class="status-badge status-badge--{{ charge_state.key }}">{{ charge_state.label }}</span>
            {% endif %}
            {% set ocpp_version = ocpp_versions.get(normalized_station_id)
              or ocpp_versions.get(station_id)
              or ocpp_versions.get(normalized_source)
              or ocpp_versions.get(row.source_url)
              or ocpp_versions.get('/' ~ normalized_source) %}
            {% if not ocpp_version %}
              {% set ocpp_version = 'Auto' %}
            {% endif %}
            <span class="status-badge status-badge--protocol" title="{{ _('OCPP version') }}">OCPP {{ ocpp_version }}</span>
            {% if row.activity == 'block' %}
              <span class="badge badge-sm badge-secondary">{{ _('Block') }}</span>
            {% else %}
              <span class="badge badge-sm badge-success">{{ _('Allow') }}</span>
            {% endif %}
          </div>
        </div>
      </div>
      <div class="station-card__selection">
        <input
          type="checkbox"
          class="station-card__compare-checkbox js-compare-checkbox"
          value="{{ station_id }}"
          aria-label="{{ _('Select {id} for comparison', id=station_id) }}"
        />
      </div>
    </header>
    <div class="station-card__metrics">
      {% if row.webui_remote_access_url %}
      <a class="metric-badge metric-badge--link" href="{{ row.webui_remote_access_url }}" target="_blank" rel="noopener noreferrer" title="{{ _('Open WebUI remote access') }}">
        <span class="metric-badge__label">{{ _('WebUI Remote') }}</span>
        <span class="metric-badge__value">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#2dd4bf">
            <path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"/>
            <path d="M21 3h-6v2h3.59L9 14.59 10.41 16 19 7.41V11h2V3z"/>
          </svg>
        </span>
      </a>
      {% endif %}
      {% if row.load_management_remote_access_url %}
      <a class="metric-badge metric-badge--link" href="{{ row.load_management_remote_access_url }}" target="_blank" rel="noopener noreferrer" title="{{ _('Open Load Management remote access') }}">
        <span class="metric-badge__label">{{ _('Load Management') }}</span>
        <span class="metric-badge__value">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20" fill="#2dd4bf">
            <path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7z"/>
            <path d="M21 3h-6v2h3.59L9 14.59 10.41 16 19 7.41V11h2V3z"/>
          </svg>
        </span>
      </a>
      {% endif %}
      <div class="metric-badge">
        <span class="metric-badge__label">{{ _('Connected') }}</span>
        <span class="metric-badge__value">{{ durations.get(row.source_url.lstrip('/'), durations.get('/' ~ row.source_url.lstrip('/'), durations.get(normalized_station_id, '00:00:00'))) }}</span>
      </div>
      <div class="metric-badge">
        <span class="metric-badge__label">{{ _('Quality') }}</span>
        <span class="metric-badge__value">{%- if q is not none -%}{{ q }}%{%- else -%}-{% endif %}</span>
      </div>
      <div class="metric-badge">
        <span class="metric-badge__label">{{ _('Reconnect counter') }}</span>
        <span class="metric-badge__value">{{ row.reconnect_count }}</span>
      </div>
      <div class="metric-badge" title="{{ row.ws_url or '-' }}">
        <span class="metric-badge__label">{{ _('Target WS URL') }}</span>
        <span class="metric-badge__value truncate">{% if row.ws_url %}{{ row.ws_url }}{% else %}-{% endif %}</span>
      </div>
      <div class="metric-badge">
        <span class="metric-badge__label">{{ _('Last connected') }}</span>
        <span class="metric-badge__value">{% if has_last_connected %}{{ last_connected_str }}{% else %}-{% endif %}</span>
      </div>
    </div>
    <div class="station-card__actions">
      <a class="icon-action icon-action--primary" href="{{ url_for('cp_config_view') }}?source_url={{ row.source_url|urlencode }}" title="{{ _('View configuration') }}">
        <svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22" fill="currentColor" aria-hidden="true">
          <path d="m370-80-16-128q-13-5-24.5-12T307-235l-119 50L78-375l103-78q-1-7-1-13.5v-27q0-6.5 1-13.5L78-585l110-190 119 50q11-8 23-15t24-12l16-128h220l16 128q13 5 24.5 12t22.5 15l119-50 110 190-103 78q1 7 1 13.5v27q0 6.5-2 13.5l103 78-110 190-118-50q-11 8-23 15t-24 12L590-80H370Zm70-80h79l14-106q31-8 57.5-23.5T639-327l99 41 39-68-86-65q5-14 7-29.5t2-31.5q0-16-2-31.5t-7-29.5l86-65-39-68-99 42q-22-23-48.5-38.5T533-694l-13-106h-79l-14 106q-31 8-57.5 23.5T321-633l-99-41-39 68 86 64q-5 15-7 30t-2 32q0 16 2 31t7 30l-86 65 39 68 99-42q22 23 48.5 38.5T427-266l13 106Zm42-180q58 0 99-41t41-99q0-58-41-99t-99-41q-59 0-99.5 41T342-480q0 58 40.5 99t99.5 41Zm-2-140Z"/>
        </svg>
      </a>
      <a class="icon-action icon-action--primary" href="{{ url_for('details') }}?source_url={{ station_id|urlencode }}" title="{{ _('Open OCPP logs') }}">
        <svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 0 24 24" width="22" fill="currentColor" aria-hidden="true">
          <path d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14H3V5Zm2 0v12h14V5H5Zm1 3.5 2.75 2.75L6 14l1.4 1.4L11.55 11 7.4 6.9 6 8.5Zm6 7.5h5v-2h-5v2Z"/>
        </svg>
      </a>
      <a class="icon-action icon-action--primary" href="Javascript:rebootCP('{{ row.source_url }}')" title="{{ _('Restart charge point') }}">
        <svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22" fill="currentColor" aria-hidden="true"><path d="M440-122q-121-15-200.5-105.5T160-440q0-66 26-126.5T260-672l57 57q-38 34-57.5 79T240-440q0 88 56 155.5T440-202v80Zm80 0v-80q87-16 143.5-83T720-440q0-100-70-170t-170-70h-3l44 44-56 56-140-140 140-140 56 56-44 44h3q134 0 227 93t93 227q0 121-79.5 211.5T520-122Z"/></svg>
      </a>
      <a class="icon-action icon-action--primary" href="Javascript:downloadDiag('{{ row.source_url }}')" title="{{ _('Download diagnostics') }}">
        <svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22" fill="currentColor" aria-hidden="true"><path d="m720-120 160-160-56-56-64 64v-167h-80v167l-64-64-56 56 160 160ZM560 0v-80h320V0H560ZM240-160q-33 0-56.5-23.5T160-240v-560q0-33 23.5-56.5T240-880h280l240 240v121h-80v-81H480v-200H240v560h240v80H240Zm0-80v-560 560Z"/></svg>
      </a>
      <a class="icon-action" href="Javascript:deleteRedirect('{{ row.source_url }}')" title="{{ _('Delete connection') }}">
        <svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22" fill="#ed7039"><path d="m376-300 104-104 104 104 56-56-104-104 104-104-56-56-104 104-104-104-56 56 104 104-104 104 56 56Zm-96 180q-33 0-56.5-23.5T200-200v-520h-40v-80h200v-40h240v40h200v80h-40v520q0 33-23.5 56.5T680-120H280Zm400-600H280v520h400v-520Zm-400 0v520-520Z"/></svg>
      </a>
      <form method="post" action="{{ url_for('mark_station') }}">
        <input type="hidden" name="station_id" value="{{ station_id }}">
        <button type="submit" class="icon-action-btn" title="{{ _('Mark charge point') }}" {% if station_id in marked_station_ids %}disabled{% endif %}>
          <svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 -960 960 960" width="22" fill="{% if station_id in marked_station_ids %}#6c757d{% else %}#28a745{% endif %}"><path d="m382-300 314-314-56-56-258 258-122-122-56 56 178 178Zm98 180q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-120Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Z"/></svg>
        </button>
      </form>
      <a class="icon-action" href="{{ url_for('edit') }}?source_url={{ row.source_url|urlencode }}" title="{{ _('Open settings') }}">
        <svg xmlns="http://www.w3.org/2000/svg" height="22" viewBox="0 0 24 24" width="22" fill="#4ba2e3" aria-hidden="true">
          <path d="M4 7v2h6V7H4Zm0 10v-2h10v2H4Zm0-6v2h6v-2H4Zm8-6v6h2V5h-2Zm0 8v6h2v-6h-2Zm4-8v6h2V5h-2Zm0 8v6h2v-6h-2Z"/>
        </svg>
      </a>
    </div>
  </article>
  {% endfor %}
</div>

<div class="dashboard-actions" role="group" aria-label="{{ _('Comparison and server actions') }}">
  <div class="compare-selection-info text-xs" id="compareSelectionInfo" role="status" aria-live="polite" aria-atomic="true">
    {{ _('No charge point selected (max. {limit})', limit=max_compare_wallboxes) }}
  </div>
  <button
    type="button"
    class="btn btn-primary btn-sm dashboard-action-button"
    id="compareButton"
    data-compare-url="{{ url_for('cp_config_compare_view') }}"
    data-max-selections="{{ max_compare_wallboxes }}"
    aria-label="{{ _('Compare charge points, open selection') }}"
    aria-describedby="compareSelectionInfo"
    disabled
  >
    {{ _('Compare') }}
  </button>
  <form method="post" action="{{ url_for('flush_reconnects') }}" class="dashboard-actions__form">
    <button class="btn btn-outline-secondary btn-sm dashboard-action-button" type="submit" aria-label="{{ _('Reset reconnect counter') }}">
      {{ _('Reset reconnect counter') }}
    </button>
  </form>
  <form method="POST" action="/op_refreshStationList" class="dashboard-actions__form">
    <button class="btn btn-outline-secondary btn-sm dashboard-action-button" type="submit" aria-label="{{ _('Reload server-side database') }}">
      {{ _('Reload server-side database') }}
    </button>
  </form>
</div>
</main>

<div class="modal fade" id="serviceRequestModal" tabindex="-1" aria-labelledby="serviceRequestModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="serviceRequestModalLabel">{{ _('Service request') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ _('Close') }}"></button>
      </div>
      <form id="serviceRequestForm">
        <div class="modal-body">
          <div class="alert alert-danger d-none service-modal-error" role="alert"></div>
          <div class="mb-3">
            <label for="serviceChargepoint" class="form-label">{{ _('Chargepoint ID') }}</label>
            <input type="text" class="form-control" id="serviceChargepoint" data-field="station-id" readonly>
          </div>
          <div class="mb-3">
            <label for="serviceReason" class="form-label">{{ _('Reason') }}</label>
            <textarea class="form-control" id="serviceReason" data-field="reason" rows="2" readonly></textarea>
          </div>
          <div class="mb-3">
            <label for="serviceMarked" class="form-label">{{ _('Marked') }}</label>
            <input type="text" class="form-control" id="serviceMarked" data-field="marked" readonly>
          </div>
          <div class="mb-3">
            <label for="serviceMeasure" class="form-label">{{ _('Action') }}</label>
            <select class="form-select" id="serviceMeasure" data-field="measure" required>
              <option value="" selected>{{ _('Please select') }}</option>
              <option value="Gerät Tauschen">{{ _('Replace device') }}</option>
              <option value="Techniker vor Ort erforderlich">{{ _('Technician on site required') }}</option>
              <option value="Thirdlevel">Thirdlevel</option>
            </select>
          </div>
          <div class="mb-0">
            <label for="serviceComment" class="form-label">{{ _('Comment') }}</label>
            <textarea class="form-control" id="serviceComment" data-field="comment" rows="3" placeholder="{{ _('Additional information') }}"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ _('Cancel') }}</button>
          <button type="submit" class="btn btn-primary" data-role="submit">{{ _('Send') }}</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var i18n = {
    removeHighlight: "{{ _('Remove highlight') }}",
    addHighlight: "{{ _('Mark as highlight') }}",
    highlightSet: "{{ _('Charge point {id} marked as highlight.') }}",
    highlightRemoved: "{{ _('Highlight removed for {id}.') }}",
    highlightUpdateFailed: "{{ _('Could not update highlight: {error}') }}",
    noEntriesToDelete: "{{ _('No entries to delete.') }}"
  };
  var locale = "{{ current_language or 'en' }}";
  var highlightButtons = Array.from(document.querySelectorAll('.js-station-highlight'));
  var stationGrid = document.querySelector('.station-grid');
  var stationCards = [];
  var filterButtons = [];
  var activeFilter = 'all';

  function updateStationCardsList() {
    stationCards = Array.from(document.querySelectorAll('.station-card'));
  }

  function updateFilterButtons(filter) {
    filterButtons.forEach(function (button) {
      var isActive = button.dataset.filter === filter;
      button.classList.toggle('summary-card--active', isActive);
      if (button.tagName === 'BUTTON') {
        button.setAttribute('aria-pressed', isActive ? 'true' : 'false');
      }
    });
  }

  function applyFilter(filter) {
    if (!filter) {
      filter = 'all';
    }

    activeFilter = filter;

    stationCards.forEach(function (card) {
      var shouldShow = true;

      if (filter === 'connected') {
        shouldShow = card.dataset.connected === 'true';
      } else if (filter === 'marked') {
        shouldShow = card.dataset.marked === 'true';
      }

      if (shouldShow) {
        card.removeAttribute('hidden');
      } else {
        card.setAttribute('hidden', 'hidden');
      }
    });

    updateFilterButtons(filter);
  }

  function setButtonState(button, isHighlighted) {
    button.setAttribute('data-highlighted', isHighlighted ? 'true' : 'false');
    button.setAttribute('aria-pressed', isHighlighted ? 'true' : 'false');
    button.classList.toggle('station-card__highlight--active', isHighlighted);
    var icon = button.querySelector('.station-card__highlight-icon');
    if (icon) {
      icon.textContent = isHighlighted ? '★' : '☆';
    }
    button.setAttribute('title', isHighlighted ? i18n.removeHighlight : i18n.addHighlight);
  }

  function showToast(message, type) {
    if (!window.toastr) {
      return;
    }
    if (type === 'success' && typeof window.toastr.success === 'function') {
      window.toastr.success(message);
    } else if (type === 'info' && typeof window.toastr.info === 'function') {
      window.toastr.info(message);
    } else if (type === 'error' && typeof window.toastr.error === 'function') {
      window.toastr.error(message);
    }
  }

  function reorderStationCards() {
    if (!stationGrid || !highlightButtons.length) {
      updateStationCardsList();
      applyFilter(activeFilter);
      return;
    }

    var cardData = highlightButtons
      .map(function (button) {
        var card = button.closest('.station-card');
        if (!card) {
          return null;
        }
        var displayId = button.getAttribute('data-display-id') || '';
        var stationId = button.getAttribute('data-station-id') || displayId;
        var sortLabel = (displayId || stationId || '').toLocaleLowerCase(locale);
        return {
          card: card,
          isHighlighted: button.getAttribute('data-highlighted') === 'true',
          sortLabel: sortLabel,
          displayId: displayId || stationId
        };
      })
      .filter(Boolean);

    cardData.sort(function (a, b) {
      if (a.isHighlighted !== b.isHighlighted) {
        return a.isHighlighted ? -1 : 1;
      }
      var labelComparison = a.sortLabel.localeCompare(b.sortLabel, undefined, { sensitivity: 'base' });
      if (labelComparison !== 0) {
        return labelComparison;
      }
      return a.displayId.localeCompare(b.displayId);
    });

    var fragment = document.createDocumentFragment();
    cardData.forEach(function (entry) {
      fragment.appendChild(entry.card);
    });
    stationGrid.appendChild(fragment);

    updateStationCardsList();
    applyFilter(activeFilter);
  }

  highlightButtons.forEach(function (button) {
    var initialHighlight = button.getAttribute('data-highlighted') === 'true';
    setButtonState(button, initialHighlight);

    button.addEventListener('click', function () {
      var stationId = button.getAttribute('data-station-id') || '';
      if (!stationId) {
        return;
      }
      var displayId = button.getAttribute('data-display-id') || stationId;
      var currentlyHighlighted = button.getAttribute('data-highlighted') === 'true';

      fetch('/op_station_highlight', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          station_id: stationId,
          highlight: !currentlyHighlighted
        })
      })
        .then(function (response) {
          return response
            .json()
            .then(function (payload) {
              return { status: response.status, payload: payload };
            })
            .catch(function () {
              return { status: response.status, payload: {} };
            });
        })
        .then(function (result) {
          if (result.status !== 200 || !result.payload || result.payload.success === false) {
            var message = (result.payload && result.payload.error) ? result.payload.error : 'Unbekannter Fehler';
            throw new Error(message);
          }

          var payload = result.payload;
          var isHighlighted = !!payload.highlight;
          if (payload.station_id) {
            button.setAttribute('data-station-id', payload.station_id);
          }
          if (payload.card_target) {
            button.setAttribute('data-card-target', payload.card_target);
          }

          setButtonState(button, isHighlighted);
          reorderStationCards();

          if (isHighlighted) {
            showToast((i18n.highlightSet || '').replace('{id}', displayId), 'success');
          } else {
            showToast((i18n.highlightRemoved || '').replace('{id}', displayId), 'info');
          }
        })
        .catch(function (error) {
          var message = error && error.message ? error.message : error;
          showToast((i18n.highlightUpdateFailed || '').replace('{error}', message), 'error');
        });
    });
  });

  filterButtons = Array.from(document.querySelectorAll('.summary-card[data-filter]'));
  updateStationCardsList();

  filterButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      var targetFilter = button.dataset.filter;
      if (!targetFilter) {
        return;
      }
      applyFilter(targetFilter);
    });
  });

  applyFilter(activeFilter);
  reorderStationCards();
});
</script>

{% if not show_proxy_errors %}
<script>
document.addEventListener('DOMContentLoaded', function () {
  var proxyErrorSections = document.querySelectorAll('[data-section="proxy-errors"], .js-proxy-error-box');
  proxyErrorSections.forEach(function (el) {
    el.style.display = 'none';
  });

  var headings = Array.from(document.querySelectorAll('h1, h2, h3, h4, h5, h6'));
  var match = headings.find(function (heading) {
    return heading.textContent.trim().toLowerCase() === 'ocpp-proxy fehlermeldungen';
  });
  if (match) {
    var container = match.closest('.card') || match.closest('[role="alert"]') || match;
    container.style.display = 'none';
  }
});
</script>
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function () {
  var compareCheckboxes = Array.from(document.querySelectorAll('.js-compare-checkbox'));
  if (!compareCheckboxes.length) {
    return;
  }

  var compareButton = document.getElementById('compareButton');
  var compareInfo = document.getElementById('compareSelectionInfo');
  var compareUrl = compareButton ? compareButton.getAttribute('data-compare-url') : null;
  var compareTexts = {
    noneSelected: "{{ _('No charge point selected (max. {limit})', limit=max_compare_wallboxes) }}",
    selected: "{{ _('{count} charge point selected (max. {limit})', count='{count}', limit=max_compare_wallboxes) }}",
    selectedPlural: "{{ _('{count} charge points selected (max. {limit})', count='{count}', limit=max_compare_wallboxes) }}",
    maxReached: "{{ _('You can compare up to {limit} charge points.', limit=max_compare_wallboxes) }}"
  };
  var maxSelections = 5;
  if (compareButton) {
    var parsedMax = parseInt(compareButton.getAttribute('data-max-selections') || '', 10);
    if (!isNaN(parsedMax) && parsedMax > 0) {
      maxSelections = parsedMax;
    }
  }

  function updateCompareState() {
    var selected = compareCheckboxes.filter(function (checkbox) { return checkbox.checked; });
    if (compareInfo) {
      var countText = selected.length === 0
        ? (compareTexts.noneSelected || '').replace('{limit}', maxSelections)
        : (selected.length === 1
            ? (compareTexts.selected || '').replace('{count}', selected.length).replace('{limit}', maxSelections)
            : (compareTexts.selectedPlural || '').replace('{count}', selected.length).replace('{limit}', maxSelections));
      compareInfo.textContent = countText;
    }
    if (compareButton) {
      compareButton.disabled = selected.length === 0 || !compareUrl;
    }
  }

  compareCheckboxes.forEach(function (checkbox) {
    checkbox.addEventListener('change', function (event) {
      var selected = compareCheckboxes.filter(function (cb) { return cb.checked; });
      if (selected.length > maxSelections) {
        event.target.checked = false;
        if (window.toastr && typeof window.toastr.warning === 'function') {
          window.toastr.warning((compareTexts.maxReached || '').replace('{limit}', maxSelections));
        }
        selected = compareCheckboxes.filter(function (cb) { return cb.checked; });
      }
      updateCompareState();
    });
  });

  if (compareButton && compareUrl) {
    compareButton.addEventListener('click', function () {
      var selectedValues = compareCheckboxes
        .filter(function (checkbox) { return checkbox.checked; })
        .map(function (checkbox) { return checkbox.value; });

      if (!selectedValues.length) {
        return;
      }

      var params = new URLSearchParams();
      selectedValues.forEach(function (value) {
        params.append('station_id', value);
      });

      window.location.href = compareUrl + '?' + params.toString();
    });
  }

  updateCompareState();
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var clearButtons = document.querySelectorAll('.js-clear-marked-wallboxes');
  var clearTexts = {
    nothing: "{{ _('No entries to delete.') }}",
    confirmSingle: "{{ _('1 entry will be deleted. Continue?') }}",
    confirmMultiple: "{{ _('{count} entries will be deleted. Continue?', count='{count}') }}"
  };
  clearButtons.forEach(function (button) {
    button.addEventListener('click', function () {
      var countRaw = button.getAttribute('data-entry-count') || '0';
      var count = parseInt(countRaw, 10);
      if (isNaN(count) || count < 0) {
        count = 0;
      }

      if (count === 0) {
        toastr.info(clearTexts.nothing || '');
        return;
      }

      var message = count === 1
        ? clearTexts.confirmSingle
        : (clearTexts.confirmMultiple || '').replace('{count}', count);
      var confirmed = window.confirm(message);
      if (!confirmed) {
        return;
      }

      var form = document.getElementById('clear-marked-wallboxes-form');
      if (form) {
        form.submit();
      }
    });
  });
});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
  var modalElement = document.getElementById('serviceRequestModal');
  if (!modalElement || typeof bootstrap === 'undefined') {
    return;
  }

  var modal = new bootstrap.Modal(modalElement);
  var form = modalElement.querySelector('#serviceRequestForm');
  var stationField = form.querySelector('[data-field="station-id"]');
  var reasonField = form.querySelector('[data-field="reason"]');
  var markedField = form.querySelector('[data-field="marked"]');
  var measureField = form.querySelector('[data-field="measure"]');
  var commentField = form.querySelector('[data-field="comment"]');
  var errorBox = form.querySelector('.service-modal-error');
  var submitButton = form.querySelector('[data-role="submit"]');
  var activeTrigger = null;
  var serviceTexts = {
    selectAction: "{{ _('Please choose an action.') }}",
    requestSent: "{{ _('Service request sent.') }}",
    requestSentOn: "{{ _('Service request sent on {timestamp}', timestamp='{timestamp}') }}",
    requestAlreadySent: "{{ _('Service request already sent.') }}",
    requestConflict: "{{ _('Service request already sent.') }}",
    requestFailed: "{{ _('The service request could not be sent.') }}",
    networkError: "{{ _('Network error: {error}', error='{error}') }}"
  };

  function decodeAttribute(element, attribute) {
    var raw = element.getAttribute(attribute);
    if (raw === null) {
      return '';
    }
    var parser = document.createElement('textarea');
    parser.innerHTML = raw;
    return parser.value;
  }

  function resetFormState() {
    errorBox.classList.add('d-none');
    errorBox.textContent = '';
    submitButton.disabled = false;
    form.reset();
    commentField.value = '';
  }

  function showError(message) {
    if (!message) {
      errorBox.classList.add('d-none');
      errorBox.textContent = '';
      return;
    }
    errorBox.textContent = message;
    errorBox.classList.remove('d-none');
  }

  function createStopwatchElement(title) {
    var span = document.createElement('span');
    span.className = 'service-icon-placeholder';
    span.setAttribute('role', 'img');
    if (title) {
      span.setAttribute('aria-label', title);
      span.setAttribute('title', title);
    } else {
      span.setAttribute('aria-hidden', 'true');
    }
    span.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="currentColor" d="M13 1v2h-2V1h2Zm7.03 3.62-1.41 1.41-1.41-1.41 1.41-1.41 1.41 1.41ZM12 5a9 9 0 1 1-9 9 9 9 0 0 1 9-9Zm0 2a7 7 0 1 0 7 7 7 7 0 0 0-7-7Zm1 1v6.17l3.09 3.08-1.41 1.42L11 14V8h2Z"/></svg>';
    return span;
  }

  modalElement.addEventListener('hidden.bs.modal', function () {
    resetFormState();
    activeTrigger = null;
  });

  document.querySelectorAll('.js-service-request').forEach(function (button) {
    button.addEventListener('click', function () {
      activeTrigger = button;
      resetFormState();
      stationField.value = decodeAttribute(button, 'data-station-id');
      reasonField.value = decodeAttribute(button, 'data-reason');
      markedField.value = decodeAttribute(button, 'data-marked');
      measureField.value = '';
      commentField.value = '';
      modal.show();
    });
  });

  form.addEventListener('submit', function (event) {
    event.preventDefault();
    if (!activeTrigger) {
      return;
    }

    var measure = measureField.value;
    if (!measure) {
      showError(serviceTexts.selectAction || '');
      return;
    }

    showError('');
    submitButton.disabled = true;

    var markId = activeTrigger.dataset.markId;
    fetch('/op_marked_wallboxes/' + markId + '/request_service', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        measure: measure,
        comment: commentField.value || ''
      })
    })
      .then(function (response) {
        return response.json().then(function (data) {
          return { status: response.status, data: data };
        }).catch(function () {
          return { status: response.status, data: {} };
        });
      })
      .then(function (result) {
        submitButton.disabled = false;
        if (result.status === 200 && result.data && result.data.status === 'ok') {
          modal.hide();
          toastr.success(serviceTexts.requestSent || '');
          var title = serviceTexts.requestSent || '';
          if (result.data.service_requested_at_display) {
            title = (serviceTexts.requestSentOn || '').replace('{timestamp}', result.data.service_requested_at_display);
          }
          var replacement = createStopwatchElement(title);
          activeTrigger.replaceWith(replacement);
        } else if (result.status === 409) {
          modal.hide();
          var conflictMessage = result.data.error || serviceTexts.requestAlreadySent;
          toastr.info(conflictMessage || '');
          var conflictReplacement = createStopwatchElement(conflictMessage || serviceTexts.requestConflict);
          activeTrigger.replaceWith(conflictReplacement);
        } else {
          var message = (result.data && result.data.error) ? result.data.error : serviceTexts.requestFailed;
          showError(message);
        }
      })
      .catch(function (error) {
        submitButton.disabled = false;
        var msg = (serviceTexts.networkError || '').replace('{error}', error);
        showError(msg);
      });
  });
});

const dashboardActionsTexts = {
  downloadStarted: "{{ _('Download started for {id}', id='{id}') }}",
  rebootTriggered: "{{ _('Reboot command sent to {id}', id='{id}') }}",
  rebootFailed: "{{ _('Reboot failed: {error}', error='{error}') }}",
  rebootNetworkError: "{{ _('Network error during reboot: {error}', error='{error}') }}",
  deleteConfirm: "{{ _('Delete entry: {id}?', id='{id}') }}",
  deleteSuccess: "{{ _('Entry deleted: {id}', id='{id}') }}",
  deleteFailed: "{{ _('Delete failed: {error}', error='{error}') }}",
  deleteNetworkError: "{{ _('Network error while deleting') }}"
};

function downloadDiag(source) {
  var url = "{{ url_for('download_diag_get') }}" + '?source_url=' + encodeURIComponent(source);
  window.open(url, '_blank');
  toastr.info((dashboardActionsTexts.downloadStarted || '').replace('{id}', source));
}

function rebootCP(source) {
  var stationId = source.split('/').pop();
  toastr.info((dashboardActionsTexts.rebootTriggered || '').replace('{id}', stationId));
  fetch("{{ url_for('reboot_cp') }}", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ station_id: source })
  })
  .then(res => res.json().then(data => ({ status: res.status, data })))
  .then(obj => {
    if (obj.status === 200 && obj.data.status === 'ok') {
      toastr.success((dashboardActionsTexts.rebootTriggered || '').replace('{id}', obj.data.station_id));
    } else {
      toastr.error((dashboardActionsTexts.rebootFailed || '').replace('{error}', obj.data.error || ''));
    }
  })
  .catch(err => toastr.error((dashboardActionsTexts.rebootNetworkError || '').replace('{error}', err)));
}

function deleteRedirect(source) {
  if(!confirm((dashboardActionsTexts.deleteConfirm || '').replace('{id}', source))) return;
  fetch("{{ url_for('delete_redirect') }}", {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({ source_url: source })
  })
  .then(r=>r.json().then(d=>({s:r.status,d})))
  .then(o=>{
    if(o.s===200) {
      toastr.success((dashboardActionsTexts.deleteSuccess || '').replace('{id}', o.d.source_url));
      var tr = document.querySelector('tr[data-source="'+ o.d.source_url +'" ]');
      if(tr) tr.remove();
    } else {
      toastr.error((dashboardActionsTexts.deleteFailed || '').replace('{error}', o.d.error||''));
    }
  })
  .catch(e=>toastr.error(dashboardActionsTexts.deleteNetworkError || ''));
}

// toastr.info('Welcome');
</script>
{% endblock %}