<div class="monitoring-container">
  <div class="monitoring-header">
    <h1 class="monitoring-title">System Monitoring Dashboard</h1>
    <div class="monitoring-controls">
      <button phx-click="refresh" class="refresh-button">
        Refresh
      </button>
      <div class="last-updated">
        Last updated: <%= @metrics.last_updated %>
      </div>
    </div>
  </div>

  <div class="metrics-grid">
    <div class="metric-card">
      <h3 class="metric-title">CPU Usage</h3>
      <div class="metric-value"><%= @metrics.cpu_usage %>%</div>
      <div class="metric-gauge">
        <div class="gauge-fill" style={"width: #{@metrics.cpu_usage}%"}>
        </div>
      </div>
    </div>

    <div class="metric-card">
      <h3 class="metric-title">Memory Usage</h3>
      <div class="metric-value"><%= @metrics.memory_usage %>%</div>
      <div class="metric-gauge">
        <div class="gauge-fill" style={"width: #{@metrics.memory_usage}%"}>
        </div>
      </div>
    </div>

    <div class="metric-card">
      <h3 class="metric-title">Active Sessions</h3>
      <div class="metric-value"><%= @metrics.active_sessions %></div>
      <div class="metric-gauge">
        <div class="gauge-fill" style={"width: #{@metrics.active_sessions * 10}%"}>
        </div>
      </div>
    </div>

    <div class="metric-card">
      <h3 class="metric-title">Network Traffic</h3>
      <div class="metric-value"><%= @metrics.network_traffic %> MB/s</div>
      <div class="metric-gauge">
        <div class="gauge-fill" style={"width: #{@metrics.network_traffic * 5}%"}>
        </div>
      </div>
    </div>

    <div class="metric-card">
      <h3 class="metric-title">Database Connections</h3>
      <div class="metric-value"><%= @metrics.database_connections %></div>
      <div class="metric-trend">
        <span class="trend-indicator">→</span>
        <span class="trend-value">stable</span>
      </div>
    </div>
  </div>

  <div class="charts-section">
    <div class="chart-card">
      <h3 class="chart-title">Response Times (ms)</h3>
      <div class="chart-container">
        <canvas id="responseTimeChart" phx-hook="LineChart"></canvas>
      </div>
    </div>

    <div class="chart-card">
      <h3 class="chart-title">Error Rates</h3>
      <div class="chart-container">
        <canvas id="errorRateChart" phx-hook="BarChart"></canvas>
      </div>
    </div>
  </div>

  <div class="alerts-section">
    <h3 class="section-title">Recent Alerts</h3>
    <div class="alerts-list">
      <div class="alert-item warning">
        <div class="alert-icon">⚠️</div>
        <div class="alert-content">
          <div class="alert-title">High CPU Usage</div>
          <div class="alert-time">2 minutes ago</div>
        </div>
      </div>
      <div class="alert-item info">
        <div class="alert-icon">ℹ️</div>
        <div class="alert-content">
          <div class="alert-title">New Session Started</div>
          <div class="alert-time">5 minutes ago</div>
        </div>
      </div>
    </div>
  </div>
</div> 