{% extends "base.html" %}
{% from "macros/ui.html" import status_badge, action_buttons, log_table %}
{% block title %}{{ instance.instance_name if instance else manifest.display_name }} — Hassette{% endblock %}
{% block content %}
  <!-- Header -->
  <div class="ht-level ht-mb-4">
    <div class="ht-level-start">
      <div class="ht-level-item">
        <h1 class="ht-heading-4">
          <a href="/ui/apps" class="ht-text-faint ht-mr-2"><i class="fas fa-arrow-left"></i></a>
          <span class="ht-icon"><i class="fas fa-cube"></i></span>
          <span>{{ manifest.display_name }}</span>
          {% set inst_status = instance.status if instance else manifest.status %}
          {{ status_badge(inst_status) }}
        </h1>
      </div>
    </div>
    <div class="ht-level-end">
      <div class="ht-level-item">{{ action_buttons(app_key, manifest.status) }}</div>
    </div>
  </div>
  <!-- Instance switcher (multi-instance only) -->
  {% if is_multi_instance and manifest.instances %}
    <div class="ht-mb-4" x-data>
      <label class="ht-detail-label ht-mr-2">Instance</label>
      <div class="ht-select ht-select--sm">
        <select @change="window.location.href = $el.value">
          {% for inst in manifest.instances %}
            <option value="/ui/apps/{{ app_key }}/{{ inst.index }}"
                    {% if inst.index == instance_index %}selected{% endif %}>
              {{ inst.instance_name }} ({{ inst.status }})
            </option>
          {% endfor %}
        </select>
      </div>
    </div>
  {% endif %}
  <!-- Collapsible metadata -->
  <div class="ht-mb-4" x-data="{ detailsOpen: false }">
    <button class="ht-btn ht-btn--sm" @click="detailsOpen = !detailsOpen">
      <i class="fas fa-caret-right" x-show="!detailsOpen"></i>
      <i class="fas fa-caret-down" x-show="detailsOpen" x-cloak></i>
      Details
    </button>
    <div x-show="detailsOpen" x-cloak x-transition class="ht-card ht-mt-3">
      <div class="ht-detail-fields">
        <div class="ht-detail-field">
          <span class="ht-detail-label">App Key</span>
          <code>{{ manifest.app_key }}</code>
        </div>
        <div class="ht-detail-field">
          <span class="ht-detail-label">Class</span>
          <code>{{ manifest.class_name }}</code>
        </div>
        <div class="ht-detail-field">
          <span class="ht-detail-label">File</span>
          <code>{{ manifest.filename }}</code>
        </div>
        {% if is_multi_instance and instance %}
          <div class="ht-detail-field">
            <span class="ht-detail-label">Instance</span>
            <code>{{ instance.instance_name }}</code>
          </div>
          {% if owner_id %}
            <div class="ht-detail-field">
              <span class="ht-detail-label">Owner ID</span>
              <code>{{ owner_id }}</code>
            </div>
          {% endif %}
        {% endif %}
        <div class="ht-detail-field">
          <span class="ht-detail-label">Enabled</span>
          <span>{{ "Yes" if manifest.enabled else "No" }}</span>
        </div>
        <div class="ht-detail-field">
          <span class="ht-detail-label">Auto-loaded</span>
          <span>{{ "Yes" if manifest.auto_loaded else "No" }}</span>
        </div>
      </div>
    </div>
  </div>
  <!-- Error display -->
  {% if instance and instance.error_message %}
    <div class="ht-card ht-mb-4">
      <p class="ht-text-danger">
        <strong>Error:</strong> {{ instance.error_message }}
      </p>
      {% if instance.error_traceback %}
        <div x-data="{ tbOpen: false }">
          <button class="ht-btn ht-btn--sm ht-mt-3"
                  @click="tbOpen = !tbOpen"
                  :aria-expanded="tbOpen"
                  x-text="tbOpen ? 'Hide traceback' : 'Show traceback'">Show traceback</button>
          <pre class="ht-traceback" x-cloak x-show="tbOpen" x-transition>{{ instance.error_traceback }}</pre>
        </div>
      {% endif %}
    </div>
  {% elif manifest.error_message %}
    <div class="ht-card ht-mb-4">
      <p class="ht-text-danger">
        <strong>Error:</strong> {{ manifest.error_message }}
      </p>
      {% if manifest.error_traceback %}
        <div x-data="{ tbOpen: false }">
          <button class="ht-btn ht-btn--sm ht-mt-3"
                  @click="tbOpen = !tbOpen"
                  :aria-expanded="tbOpen"
                  x-text="tbOpen ? 'Hide traceback' : 'Show traceback'">Show traceback</button>
          <pre class="ht-traceback" x-cloak x-show="tbOpen" x-transition>{{ manifest.error_traceback }}</pre>
        </div>
      {% endif %}
    </div>
  {% endif %}
  <!-- Bus Listeners -->
  <div class="ht-card ht-mb-4"
       id="app-listeners"
       data-live-on-app="/ui/partials/instance-listeners/{{ app_key }}/{{ instance_index }}">
    <h2 class="ht-heading-5">
      <i class="fas fa-ear-listen"></i> Bus Listeners
    </h2>
    {% include "partials/app_detail_listeners.html" %}
  </div>
  <!-- Scheduled Jobs -->
  <div class="ht-card ht-mb-4"
       id="app-jobs"
       data-live-on-app="/ui/partials/instance-jobs/{{ app_key }}/{{ instance_index }}">
    <h2 class="ht-heading-5">
      <i class="fas fa-clock"></i> Scheduled Jobs
    </h2>
    {% include "partials/app_detail_jobs.html" %}
  </div>
  <!-- Recent Logs -->
  <div class="ht-card">
    <h2 class="ht-heading-5">
      <i class="fas fa-scroll"></i> Recent Logs
    </h2>
    {{ log_table(show_app_column=false, app_key=app_key, max_height="600px") }}
  </div>
{% endblock %}