{% extends "base.html" %}
{% block title %}Apps — Hassette{% endblock %}
{% block content %}
  <h1 class="ht-heading-4">
    <span class="ht-icon"><i class="fas fa-cubes"></i></span>
    <span>App Management</span>
  </h1>
  {% if manifest_snapshot.total == 0 %}
    <div class="ht-notice--info">
      <p>No apps are configured. Add apps to your Hassette configuration to see them here.</p>
    </div>
  {% else %}
    <div class="ht-card">
      <!-- Status filter tabs -->
      <div class="ht-tabs ht-mb-3" hx-disinherit="hx-select">
        <ul>
          <li class="is-active" id="tab-all">
            <a hx-get="/ui/partials/manifest-list"
               hx-target="#manifest-list"
               hx-swap="innerHTML"
               hx-on::after-request="document.querySelectorAll('.ht-tabs li').forEach(t=>t.classList.remove('is-active')); document.getElementById('tab-all').classList.add('is-active')">
              All ({{ manifest_snapshot.total }})
            </a>
          </li>
          <li id="tab-running">
            <a hx-get="/ui/partials/manifest-list?status=running"
               hx-target="#manifest-list"
               hx-swap="innerHTML"
               hx-on::after-request="document.querySelectorAll('.ht-tabs li').forEach(t=>t.classList.remove('is-active')); document.getElementById('tab-running').classList.add('is-active')">
              Running ({{ manifest_snapshot.running }})
            </a>
          </li>
          <li id="tab-stopped">
            <a hx-get="/ui/partials/manifest-list?status=stopped"
               hx-target="#manifest-list"
               hx-swap="innerHTML"
               hx-on::after-request="document.querySelectorAll('.ht-tabs li').forEach(t=>t.classList.remove('is-active')); document.getElementById('tab-stopped').classList.add('is-active')">
              Stopped ({{ manifest_snapshot.stopped }})
            </a>
          </li>
          <li id="tab-failed">
            <a hx-get="/ui/partials/manifest-list?status=failed"
               hx-target="#manifest-list"
               hx-swap="innerHTML"
               hx-on::after-request="document.querySelectorAll('.ht-tabs li').forEach(t=>t.classList.remove('is-active')); document.getElementById('tab-failed').classList.add('is-active')">
              Failed ({{ manifest_snapshot.failed }})
            </a>
          </li>
          <li id="tab-disabled">
            <a hx-get="/ui/partials/manifest-list?status=disabled"
               hx-target="#manifest-list"
               hx-swap="innerHTML"
               hx-on::after-request="document.querySelectorAll('.ht-tabs li').forEach(t=>t.classList.remove('is-active')); document.getElementById('tab-disabled').classList.add('is-active')">
              Disabled ({{ manifest_snapshot.disabled }})
            </a>
          </li>
        </ul>
      </div>
      <table class="ht-table ht-table--dense">
        <thead>
          <tr>
            <th>App Key</th>
            <th>Name</th>
            <th>Class</th>
            <th>Status</th>
            <th>Error</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody id="manifest-list"
               x-data="{ expanded: {} }"
               data-live-on-app="/ui/partials/manifest-list">
          {% set manifests = manifest_snapshot.manifests %}
          {% include "partials/manifest_list.html" %}
        </tbody>
      </table>
    </div>
  {% endif %}
{% endblock %}