{% block content %}
<div class="foreground"></div>
<div class="foregroundContent">
  <h2 class='concentratedHead'>Service Status Monitor</h2>

  <div class="info-box">
    <div class='flex spaceBetween'>
      <div>
        <span id="lastUpdate">Last checked: Loading...</span>
        <br />
        <span id="nextUpdate">Next check: --</span>
      </div>
      <button id="refreshBtn" onclick="refreshStatus()">Refresh Now</button>
    </div>
    <br/>

    <h4>Status Legend</h4>
    <div class="legend-items">
      <div class="legend-item">
        <span class="state-dot online"></span>
        <span>Operational (response successful)</span>
      </div>
      <div class="legend-item">
        <span class="state-dot degraded"></span>
        <span>Degraded (timeout or errors)</span>
      </div>
      <div class="legend-item">
        <span class="state-dot offline"></span>
        <span>Offline (unreachable)</span>
      </div>
    </div>
  </div>

  <!-- Overall Status Bar -->
  <div class="info-card summary-card" id="overallStatus">
    <div class="summary-content">
      <div class="summary-indicator">
        <span class="summary-icon loading">&#x25D0;</span>
        <div>
          <h3 class="summary-title">Checking Systems...</h3>
          <h5 id="summary-subtitle">Loading service status</h5>
        </div>
      </div>
      <div class="flex spaceBetween">
        <div class="metric-box">
          <span class="metric-number" id="onlineCount">--</span>
          <span class="metric-label">Online</span>
        </div>
        <div class="metric-box">
          <span class="metric-number" id="totalCount">--</span>
          <span class="metric-label">Total</span>
        </div>
      </div>
    </div>
  </div>

  <div class="card-grid">
    {% for service in var.services %}
    <a href="{{ service.url }}">
      <div class="info-card" id="status-{{ service.id }}">
        <div class="card-header">
          <h3>{{ service.name }}</h3>
          <div class="state-indicator">
            <span class="state-dot loading"></span>
            <span class="state-text">Loading...</span>
          </div>
        </div>
        <div class="card-body">
          <div class="metric-row">
            <span class="metric-label">Response Time:</span>
            <span class="metric-value" id="time-{{ service.id }}">--</span>
          </div>
          <div class="metric-row">
            <span class="metric-label">Status Code:</span>
            <span class="metric-value" id="code-{{ service.id }}">--</span>
          </div>
          <div class="metric-row">
            <span class="metric-label">Total Checks:</span>
            <span class="metric-value" id="checks-{{ service.id }}">--</span>
          </div>
        </div>
        <div class="card-footer">
          <div class="detail-label">Uptime:</div>
          <div class="detail-values" id="uptime-{{ service.id }}">Loading...</div>
        </div>
      </div>
    </a>
    {% endfor %}
  </div>

  <div class="info-box">
    <h4>About This Monitor</h4>
    <ul>
      <li><strong>Check Frequency:</strong> Services are checked automatically every minute from the server</li>
      <li><strong>Page Refresh:</strong> This page auto-refreshes every minute to show latest data</li>
    </ul>
  </div>
</div>

<script src="{{ url_for('static', filename='js/status.js') }}"></script>
{% endblock %}
