{# Shared Jinja2 macros for the Hassette Web UI #}
{# Status badge for apps/instances #}
{% macro status_badge(status, size="", block_reason="") %}
  {% if status == "running" %}
    <span class="ht-badge ht-badge--success{{ ' ht-badge--sm' if size == 'small' else '' }}{{ ' ht-ml-2' if size != 'small' else '' }}">running</span>
  {% elif status == "failed" %}
    <span class="ht-badge ht-badge--danger{{ ' ht-badge--sm' if size == 'small' else '' }}{{ ' ht-ml-2' if size != 'small' else '' }}">failed</span>
  {% elif status == "stopped" %}
    <span class="ht-badge ht-status-stopped{{ ' ht-badge--sm' if size == 'small' else '' }}{{ ' ht-ml-2' if size != 'small' else '' }}">stopped</span>
  {% elif status == "disabled" %}
    <span class="ht-badge ht-status-disabled{{ ' ht-badge--sm' if size == 'small' else '' }}{{ ' ht-ml-2' if size != 'small' else '' }}">disabled</span>
  {% elif status == "blocked" %}
    <span class="ht-badge ht-status-blocked{{ ' ht-badge--sm' if size == 'small' else '' }}{{ ' ht-ml-2' if size != 'small' else '' }}"
          {% if block_reason %}title="{{ block_reason }}"{% endif %}>blocked</span>
  {% else %}
    <span class="ht-badge ht-badge--neutral{{ ' ht-badge--sm' if size == 'small' else '' }}{{ ' ht-ml-2' if size != 'small' else '' }}">{{ status }}</span>
  {% endif %}
{% endmacro %}
{# Action buttons for starting/stopping/reloading apps #}
{% macro action_buttons(app_key, status, after_action="location.reload()", show_labels=true) %}
  <div class="ht-btn-group">
    {% if status == "running" %}
      <button class="ht-btn ht-btn--sm ht-btn--warning"
              hx-post="/api/apps/{{ app_key }}/stop"
              hx-swap="none"
              hx-on::after-request="{{ after_action }}">
        <span class="ht-icon{% if not show_labels %} ht-icon--sm{% endif %}"><i class="fas fa-stop"></i></span>
        {% if show_labels %}<span>Stop</span>{% endif %}
      </button>
      <button class="ht-btn ht-btn--sm ht-btn--info"
              hx-post="/api/apps/{{ app_key }}/reload"
              hx-swap="none"
              hx-on::after-request="{{ after_action }}">
        <span class="ht-icon{% if not show_labels %} ht-icon--sm{% endif %}"><i class="fas fa-rotate"></i></span>
        {% if show_labels %}<span>Reload</span>{% endif %}
      </button>
    {% elif status in ["failed", "stopped"] %}
      <button class="ht-btn ht-btn--sm ht-btn--success"
              hx-post="/api/apps/{{ app_key }}/start"
              hx-swap="none"
              hx-on::after-request="{{ after_action }}">
        <span class="ht-icon{% if not show_labels %} ht-icon--sm{% endif %}"><i class="fas fa-play"></i></span>
        {% if show_labels %}<span>Start</span>{% endif %}
      </button>
    {% endif %}
  </div>
{% endmacro %}
{# Log table Alpine.js component #}
{% macro log_table(show_app_column, app_key="", max_height="600px", app_keys=None) %}
  {% if app_key %}
    <div x-data="logTable({ showAppColumn: {{ 'true' if show_app_column else 'false' }}, appKey: '{{ app_key }}' })">
    {% else %}
      <div x-data="logTable({ showAppColumn: {{ 'true' if show_app_column else 'false' }}, appKey: null })">
      {% endif %}
      <div class="ht-field-group ht-mb-3">
        <div class="ht-control">
          <div class="ht-select ht-select--sm">
            <select x-model="filters.level">
              <option value="">All Levels</option>
              <option value="DEBUG">DEBUG</option>
              <option value="INFO">INFO</option>
              <option value="WARNING">WARNING</option>
              <option value="ERROR">ERROR</option>
              <option value="CRITICAL">CRITICAL</option>
            </select>
          </div>
        </div>
        {% if show_app_column and app_keys is not none %}
          <div class="ht-control">
            <div class="ht-select ht-select--sm">
              <select x-model="filters.app">
                <option value="">All Apps</option>
                {% for key in app_keys %}<option value="{{ key }}">{{ key }}</option>{% endfor %}
              </select>
            </div>
          </div>
        {% endif %}
        <div class="ht-control">
          <input class="ht-input ht-input--sm"
                 type="text"
                 placeholder="Search..."
                 x-model.debounce.200ms="filters.search">
        </div>
        <div class="ht-control">
          <span class="ht-badge ht-badge--neutral ht-badge--sm"
                x-show="!loading"
                x-text="filteredEntries.length + ' entries'"></span>
          {% if show_app_column %}
            <span class="ht-badge ht-badge--neutral ht-badge--sm" x-show="loading">Loading...</span>
          {% endif %}
        </div>
      </div>
      <div class="ht-log-container"
           style="max-height: {{ max_height }};
                  overflow-y: auto">
        <table class="ht-table ht-table--dense ht-text-xs">
          <thead style="position: sticky;
                        top: 0;
                        background: var(--ht-surface-sticky);
                        z-index: 1">
            <tr>
              <th style="width: 80px; cursor: pointer;" @click="toggleSort('level')">
                Level <i class="fas" :class="sortIcon('level')"></i>
              </th>
              <th style="width: 160px;
                         cursor: pointer"
                  @click="toggleSort('timestamp')">
                Timestamp <i class="fas" :class="sortIcon('timestamp')"></i>
              </th>
              {% if show_app_column %}
                <th style="width: 120px; cursor: pointer;" @click="toggleSort('app_key')">
                  App <i class="fas" :class="sortIcon('app_key')"></i>
                </th>
              {% endif %}
              <th style="cursor: pointer;" @click="toggleSort('message')">
                Message <i class="fas" :class="sortIcon('message')"></i>
              </th>
            </tr>
          </thead>
          <tbody>
            <template x-if="loading">
              <tr>
                <td colspan="{{ 4 if show_app_column else 3 }}"
                    class="ht-text-center ht-text-muted">Loading...</td>
              </tr>
            </template>
            <template x-if="error">
              <tr>
                <td colspan="{{ 4 if show_app_column else 3 }}"
                    class="ht-text-center ht-text-danger"
                    x-text="error"></td>
              </tr>
            </template>
            <template x-if="!loading && !error && filteredEntries.length === 0">
              <tr>
                <td colspan="{{ 4 if show_app_column else 3 }}"
                    class="ht-text-center ht-text-muted">No log entries.</td>
              </tr>
            </template>
            <template x-for="(entry, index) in filteredEntries"
                      :key="entry.timestamp + '-' + index">
              <tr>
                <td>
                  <span class="ht-badge ht-badge--sm"
                        :class="levelClass(entry.level)"
                        x-text="entry.level"></span>
                </td>
                <td x-text="formatTime(entry.timestamp)"></td>
                {% if show_app_column %}
                  <td>
                    <template x-if="entry.app_key">
                      <a :href="'/ui/apps/' + encodeURIComponent(entry.app_key)"><code x-text="entry.app_key"></code></a>
                    </template>
                    <template x-if="!entry.app_key">
                      <code>&mdash;</code>
                    </template>
                  </td>
                {% endif %}
                <td x-text="entry.message"></td>
              </tr>
            </template>
          </tbody>
        </table>
      </div>
    </div>
  {% endmacro %}
  {# Job execution status badge #}
  {% macro job_status_badge(status) %}
    {% if status == "success" %}
      <span class="ht-badge ht-badge--success ht-badge--sm">success</span>
    {% elif status == "error" %}
      <span class="ht-badge ht-badge--danger ht-badge--sm">error</span>
    {% else %}
      <span class="ht-badge ht-badge--neutral ht-badge--sm">{{ status }}</span>
    {% endif %}
  {% endmacro %}