<div class="api-monitor-detail-wrapper">
  <h2>Statistiche per: {{ api_id }}</h2>

  <div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="apiResponseChart"></canvas>
  </div>

  <div class="stats-summary">
    {# Qui aggiungeremo i blocchi Uptime % e Media ms #}
  </div>
</div>

<div class="api-monitor-container">
  <h1>{{ 'Dettaglio Monitoraggio:'|t }} <strong>{{ api_id }}</strong></h1>

  <div class="api-stats-grid" style="display: flex; gap: 20px; margin-bottom: 30px;">
    <div class="stat-card" style="padding: 20px; border: 1px solid #ccc; border-radius: 8px; flex: 1;">
      <h3>{{ 'Uptime (24h)'|t }}</h3>
      <div class="value" style="font-size: 24px; color: {{ uptime > 98 ? 'green' : 'orange' }};">
        {{ uptime }}%
      </div>
    </div>

    <div class="stat-card" style="padding: 20px; border: 1px solid #ccc; border-radius: 8px; flex: 1;">
      <h3>{{ 'Latenza Media'|t }}</h3>
      <div class="value" style="font-size: 24px;">{{ avg_latency }} ms</div>
    </div>

    <div class="stat-card" style="padding: 20px; border: 1px solid #ccc; border-radius: 8px; flex: 1;">
      <h3>{{ 'Check eseguiti'|t }}</h3>
      <div class="value" style="font-size: 24px;">{{ total_checks }}</div>
    </div>
  </div>

  <div class="chart-wrapper" style="background: #f9f9f9; padding: 20px; border-radius: 8px;">
    <canvas id="apiHistoryChart"></canvas>
  </div>
</div>

<a href="{{ url('api_monitor_client.status_page') }}" class="button">Back</a>
