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

  <div class="status-legend">
    <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="status-dot online"></span>
        <span>Operational (response successful)</span>
      </div>
      <div class="legend-item">
        <span class="status-dot degraded"></span>
        <span>Degraded (timeout or errors)</span>
      </div>
      <div class="legend-item">
        <span class="status-dot offline"></span>
        <span>Offline (unreachable)</span>
      </div>
    </div>
  </div>

  <!-- Overall Status Bar -->
  <div class="status-card overall-status-card" id="overallStatus">
    <div class="overall-status-content">
      <div class="overall-status-indicator">
        <span class="overall-status-icon loading">◐</span>
        <div>
          <h3 class="overall-status-title">Checking Systems...</h3>
          <h5 id="overall-status-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="status-container">
    {% for service in var.services %}
    <a href="https://{{ service.url }}">
      <div class="status-card" id="status-{{ service.id }}">
        <div class="status-header">
          <h3>{{ service.name }}</h3>
          <div class="status-indicator">
            <span class="status-dot loading"></span>
            <span class="status-text">Loading...</span>
          </div>
        </div>
        <div class="status-details">
          <div class="status-metric">
            <span class="metric-label">Response Time:</span>
            <span class="metric-value" id="time-{{ service.id }}">--</span>
          </div>
          <div class="status-metric">
            <span class="metric-label">Status Code:</span>
            <span class="metric-value" id="code-{{ service.id }}">--</span>
          </div>
          <div class="status-metric">
            <span class="metric-label">Total Checks:</span>
            <span class="metric-value" id="checks-{{ service.id }}">--</span>
          </div>
        </div>
        <div class="status-uptime">
          <div class="uptime-label">Uptime:</div>
          <div class="uptime-values" id="uptime-{{ service.id }}">Loading...</div>
        </div>
      </div>
    </a>
    {% endfor %}
  </div>

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

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