<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{{APP_TITLE}}</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header class="app-header">
    <h1>{{APP_TITLE}}</h1>
    <span class="app-subtitle">Built with RDesk</span>
  </header>

  <div class="app-container">
    <aside class="app-sidebar">
      <div class="sidebar-group">
        <label>Data Filter</label>
        <!-- Add more filters by copying this block and changing the column name -->
        <select id="cyl-filter" onchange="rdesk.send('filter', { column: 'cyl', value: this.value })">
          <option value="all">All Cylinders</option>
          <option value="4">4 Cylinders</option>
          <option value="6">6 Cylinders</option>
          <option value="8">8 Cylinders</option>
        </select>
      </div>
      <div class="sidebar-footer">
        <button id="btn-refresh" class="btn-primary" onclick="rdesk.send('get_data', {})">
          Refresh All
        </button>
      </div>
    </aside>

    <main class="app-main">
      <section class="kpi-bar">
        <div class="kpi-card">
          <div class="kpi-label">Avg MPG</div>
          <div id="kpi-mpg" class="kpi-value">-</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Total Rows</div>
          <div id="kpi-count" class="kpi-value">-</div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Avg HP</div>
          <div id="kpi-hp" class="kpi-value">-</div>
        </div>
      </section>

      <section class="dashboard-grid">
        <div class="chart-section">
          <h3 class="section-title">MPG vs Weight</h3>
          <img id="main-chart" class="chart-img" alt="Chart loading..." />
        </div>

        <div class="table-section">
          <h3 class="section-title">Data Explorer</h3>
          <div class="table-wrap">
            <table id="data-table">
              <thead id="table-head"></thead>
              <tbody id="table-body"></tbody>
            </table>
          </div>
        </div>
      </section>
      
      <div class="app-footer">
        <span id="status-label" class="status-label">Ready</span>
      </div>
    </main>
  </div>

  <script src="js/rdesk.js"></script>
  <script src="js/app.js"></script>
</body>
</html>
