{% extends "base.html" %}
{% block content %}
{% set apps_data = response_data(apps) or [] %}
{% set apps_error = response_error(apps) %}
<div class="w-full max-w-full space-y-6">
  <div class="flex items-start justify-between gap-4">
    <div>
      <h1 class="text-lg font-semibold text-slate-100">Apps</h1>
      <p class="mt-1 text-sm text-slate-500">
        <code class="text-cyan-400">octa_client.apps.list</code> — available application catalog for service sessions.
      </p>
    </div>
    <div class="flex items-center gap-3">
      {% if playground_mock_active %}
        <span class="rounded bg-amber-500/15 px-2 py-0.5 text-[11px] font-medium text-amber-400">Mock: {{ playground_mock_scenario }}</span>
      {% endif %}
      <a href="{{ request.url.path }}{% if request.url.query %}?{{ request.url.query }}{% endif %}" class="rounded border border-slate-700 px-3 py-1.5 text-xs text-slate-400 transition-colors hover:border-slate-600 hover:text-slate-200">Refetch</a>
    </div>
  </div>

  {% if apps_error %}
    {% set error = apps_error %}
    {% include "shared/error_card.html" %}
  {% elif apps_data %}
    <div class="overflow-hidden rounded-xl border border-slate-800 bg-slate-900">
      <div class="flex items-center justify-between border-b border-slate-800 px-4 py-3">
        <span class="text-xs font-medium text-slate-400">{{ apps_data|length }} apps</span>
        <code class="text-[11px] text-violet-400">octa_client.apps.list</code>
      </div>
      <div class="overflow-x-auto">
        <table class="min-w-full text-left text-xs">
          <thead>
            <tr class="border-b border-slate-800 text-[11px] uppercase tracking-wider text-slate-500">
              <th class="px-3 py-2 font-medium">Name</th>
              <th class="px-3 py-2 font-medium">Category</th>
              <th class="px-3 py-2 font-medium">UUID</th>
              <th class="px-3 py-2 font-medium">Image</th>
              <th class="px-3 py-2 text-right font-medium">Ports</th>
              <th class="px-3 py-2 text-right font-medium">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for app_item in apps_data %}
              {% set app_uuid = app_item.get("uuid") %}
              {% set app_image = app_item.get("image") or app_item.get("docker_image") %}
              <tr class="border-b border-slate-800/60 text-slate-300 transition-colors hover:bg-slate-800/40">
                <td class="px-3 py-2.5">
                  <div class="font-medium text-slate-200">{{ app_item.get("name") or "—" }}</div>
                  {% if app_item.get("description") %}
                    <div class="mt-1 max-w-xl text-[11px] leading-5 text-slate-500">{{ app_item.get("description") }}</div>
                  {% endif %}
                </td>
                <td class="px-3 py-2.5 text-slate-400">{{ app_item.get("category") or "—" }}</td>
                <td class="px-3 py-2.5 font-mono text-slate-400" title="{{ app_uuid }}">{{ app_uuid or "—" }}</td>
                <td class="px-3 py-2.5 font-mono text-slate-400">{{ app_image or "—" }}</td>
                <td class="px-3 py-2.5 text-right text-slate-400">{{ app_ports_count(app_item) }}</td>
                <td class="px-3 py-2.5 text-right">
                  {% if app_uuid %}
                    <a href="{{ diagnostics_preset_path(request, 'services.mr.create', settings, {'app': app_uuid, 'image': app_image}) }}" class="inline-flex items-center rounded border border-cyan-500/20 bg-cyan-500/10 px-2.5 py-1 text-[11px] font-medium text-cyan-400 transition-colors hover:bg-cyan-500/20 hover:text-cyan-300">Use in MR Create</a>
                  {% else %}
                    <span class="text-[11px] text-slate-600">No UUID</span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="rounded-lg border border-slate-800 bg-slate-900/50 p-4">
      <div class="mb-2 text-[11px] font-medium uppercase tracking-wider text-slate-500">Raw JSON</div>
      {% set data = apps_data %}
      {% set max_height = "max-h-80" %}
      {% include "shared/json_viewer.html" %}
    </div>
  {% else %}
    <div class="rounded-xl border border-dashed border-slate-800 bg-slate-900/30 px-6 py-12 text-center text-sm text-slate-500">No apps found.</div>
  {% endif %}
</div>
{% endblock %}