{% extends "base.html" %}
{% from "macros/ui.html" import status_badge, action_buttons, log_table %}
{% block title %}{{ manifest.display_name }} — Hassette{% endblock %}
{% block content %}
  <!-- Header -->
  <div class="level mb-4">
    <div class="level-left">
      <div class="level-item">
        <h1 class="title is-4">
          <a href="/ui/apps" class="has-text-grey-light mr-2"><i class="fas fa-arrow-left"></i></a>
          <span class="icon"><i class="fas fa-cube"></i></span>
          <span>{{ manifest.display_name }}</span>
          {{ status_badge(manifest.status) }}
        </h1>
      </div>
    </div>
    <div class="level-right">
      <div class="level-item">{{ action_buttons(app_key, manifest.status) }}</div>
    </div>
  </div>
  <div class="columns is-multiline">
    <!-- Config panel -->
    <div class="column is-half">
      <div class="box">
        <h2 class="title is-5">Configuration</h2>
        <table class="table is-fullwidth is-compact">
          <tbody>
            <tr>
              <th>App Key</th>
              <td>
                <code>{{ manifest.app_key }}</code>
              </td>
            </tr>
            <tr>
              <th>Class Name</th>
              <td>
                <code>{{ manifest.class_name }}</code>
              </td>
            </tr>
            <tr>
              <th>Filename</th>
              <td>
                <code>{{ manifest.filename }}</code>
              </td>
            </tr>
            <tr>
              <th>Enabled</th>
              <td>{{ "Yes" if manifest.enabled else "No" }}</td>
            </tr>
            <tr>
              <th>Auto-loaded</th>
              <td>{{ "Yes" if manifest.auto_loaded else "No" }}</td>
            </tr>
            <tr>
              <th>Instances</th>
              <td>{{ manifest.instance_count }}</td>
            </tr>
            {% if manifest.error_message %}
              <tr>
                <th>Error</th>
                <td class="has-text-danger">{{ manifest.error_message }}</td>
              </tr>
            {% endif %}
            {% if manifest.block_reason %}
              <tr>
                <th>Block Reason</th>
                <td>{{ manifest.block_reason }}</td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
    <!-- Instances -->
    {% if manifest.instance_count != 1 %}
      <div class="column is-half">
        <div class="box">
          <h2 class="title is-5">
            <span class="icon"><i class="fas fa-cubes"></i></span>
            <span>Instances</span>
            <span class="tag is-info is-light is-small ml-2">{{ manifest.instance_count }}</span>
          </h2>
          {% if manifest.instances %}
            <table class="table is-fullwidth is-hoverable is-compact is-size-7">
              <thead>
                <tr>
                  <th>Index</th>
                  <th>Instance Name</th>
                  <th>Status</th>
                  <th>Error</th>
                </tr>
              </thead>
              <tbody>
                {% for inst in manifest.instances %}
                  <tr>
                    <td>
                      <a href="/ui/apps/{{ manifest.app_key }}/{{ inst.index }}">{{ inst.index }}</a>
                    </td>
                    <td>
                      <a href="/ui/apps/{{ manifest.app_key }}/{{ inst.index }}"><code>{{ inst.instance_name }}</code></a>
                    </td>
                    <td>{{ status_badge(inst.status, size="small") }}</td>
                    <td>
                      {% if inst.error_message %}
                        <span class="has-text-danger">{{ inst.error_message }}</span>
                      {% else %}
                        —
                      {% endif %}
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          {% else %}
            <p class="has-text-grey is-size-7">No instances running.</p>
          {% endif %}
        </div>
      </div>
    {% endif %}
    <!-- Bus Listeners -->
    <div class="column is-half">
      <div class="box">
        <h2 class="title is-5">
          <span class="icon"><i class="fas fa-ear-listen"></i></span>
          <span>Bus Listeners</span>
        </h2>
        <div id="app-listeners"
             data-live-on-app="/ui/partials/app-detail-listeners/{{ app_key }}"
             hx-get="/ui/partials/app-detail-listeners/{{ app_key }}"
             hx-trigger="every 30s"
             hx-swap="innerHTML">{% include "partials/app_detail_listeners.html" %}</div>
      </div>
    </div>
    <!-- Scheduled Jobs -->
    <div class="column is-half">
      <div class="box">
        <h2 class="title is-5">
          <span class="icon"><i class="fas fa-clock"></i></span>
          <span>Scheduled Jobs</span>
        </h2>
        <div id="app-jobs"
             data-live-refresh="/ui/partials/app-detail-jobs/{{ app_key }}"
             hx-get="/ui/partials/app-detail-jobs/{{ app_key }}"
             hx-trigger="every 30s"
             hx-swap="innerHTML">{% include "partials/app_detail_jobs.html" %}</div>
      </div>
    </div>
    <!-- Recent Logs -->
    <div class="column is-half">
      <div class="box">
        <h2 class="title is-5">
          <span class="icon"><i class="fas fa-scroll"></i></span>
          <span>Recent Logs</span>
        </h2>
        {{ log_table(show_app_column=false, app_key=app_key, max_height="400px") }}
      </div>
    </div>
  </div>
{% endblock %}