{% extends "base.html" %}
{% block title %}Dashboard — Hassette{% endblock %}
{% block content %}
  <h1 class="ht-heading-4">
    <span class="ht-icon"><i class="fas fa-gauge-high"></i></span>
    <span>Dashboard</span>
  </h1>
  <!-- App Status Grid (full width) -->
  <div class="ht-card ht-mb-4">
    <h2 class="ht-heading-5">
      <span class="ht-icon"><i class="fas fa-cubes"></i></span>
      <span>Apps</span>
    </h2>
    <div id="dashboard-app-grid"
         data-live-on-app="/ui/partials/dashboard-app-grid">{% include "partials/dashboard_app_grid.html" %}</div>
  </div>
  <div class="ht-grid">
    <!-- Recent Logs (larger, left) -->
    <div class="ht-grid-col-7">
      <div class="ht-card ht-card--full-height">
        <h2 class="ht-heading-5">
          <span class="ht-icon"><i class="fas fa-scroll"></i></span>
          <span>Recent Logs</span>
        </h2>
        <div id="dashboard-logs" data-live-on-app="/ui/partials/dashboard-logs">
          {% include "partials/dashboard_logs.html" %}
        </div>
      </div>
    </div>
    <!-- Activity Timeline (smaller, right) -->
    <div class="ht-grid-col-5">
      <div class="ht-card ht-card--full-height">
        <h2 class="ht-heading-5">
          <span class="ht-icon"><i class="fas fa-bolt"></i></span>
          <span>Activity</span>
        </h2>
        <div id="dashboard-timeline"
             data-live-on-state="/ui/partials/dashboard-timeline"
             data-live-on-app="/ui/partials/dashboard-timeline">{% include "partials/dashboard_timeline.html" %}</div>
      </div>
    </div>
  </div>
{% endblock %}