{% extends "base.html" %}
{% block title %}Actions — Grimoire{% endblock %}
{% block nav_actions %}active{% endblock %}
{% block content %}
<h1 class="text-3xl font-bold mb-6">Actions</h1>

{# ── Available Actions (checks-style vertical list) ───────────────── #}
{% if actions %}
<div class="flex flex-col gap-3">
    {% for action in actions %}
    <div class="bg-base-100 rounded-lg shadow-sm hover:shadow-md transition-shadow {% if not action.enabled %}opacity-50{% endif %}"
         id="action-card-{{ action.slug }}">
        <div class="px-5 py-4">

            {# ── Header Row: name, metadata, actions ── #}
            <div class="flex items-start gap-4">
                {# Left: name + description + metadata #}
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2 flex-wrap">
                        <h3 class="text-base font-semibold">{{ action.name }}</h3>
                        {% if not action.enabled %}
                        <span class="opacity-40 text-sm">· disabled</span>
                        {% endif %}
                    </div>
                    {% if action.description %}
                    <p class="text-sm opacity-60 mt-0.5">{{ action.description }}</p>
                    {% endif %}
                    <div class="flex items-center gap-3 mt-1.5 text-sm">
                        <span class="font-mono text-xs opacity-50">{{ action.target_summary }}</span>
                        {% if action.pass_count or action.fail_count %}
                        <span class="opacity-30">│</span>
                        {% if action.pass_count %}
                        <span class="text-success"><i class="fa-solid fa-check"></i> {{ action.pass_count }}</span>
                        {% endif %}
                        {% if action.fail_count %}
                        <span class="text-error"><i class="fa-solid fa-xmark"></i> {{ action.fail_count }}</span>
                        {% endif %}
                        {% if action.last_run %}
                        <span class="opacity-30">│</span>
                        <span class="opacity-40">{{ time_ago(action.last_run) }}</span>
                        {% endif %}
                        {% else %}
                        <span class="opacity-30">│</span>
                        <span class="opacity-40">no runs yet</span>
                        {% endif %}
                    </div>
                </div>

                {# Right: schedule, toggle, run button #}
                <div class="flex items-center gap-3 shrink-0">
                    <span class="text-xs opacity-40 whitespace-nowrap">
                        <i class="fa-regular fa-clock"></i> Scheduled: {% if action.schedule %}{{ action.schedule }}{% else %}manual{% endif %}
                    </span>
                    {% if action.schedule %}
                    <button class="btn btn-sm {% if action.enabled %}btn-outline btn-warning{% else %}btn-outline btn-success{% endif %} gap-1"
                            hx-post="/api/actions/{{ action.slug }}/toggle"
                            hx-swap="none"
                            hx-on::after-request="if(event.detail.successful) { location.reload(); } else { showToast('Toggle failed', 'error'); }">
                        {% if action.enabled %}
                        <i class="fa-solid fa-pause text-xs"></i> Disable
                        {% else %}
                        <i class="fa-solid fa-play text-xs"></i> Enable
                        {% endif %}
                    </button>
                    {% endif %}
                    <div hx-get="/partials/action-run-status/{{ action.slug }}"
                         hx-trigger="load"
                         hx-swap="outerHTML">
                        <button class="btn btn-primary btn-sm gap-1" disabled>
                            <span class="loading loading-spinner loading-xs"></span>
                        </button>
                    </div>
                </div>
            </div>

            {# ── Expandable sections ── #}
            <div class="flex gap-2 mt-2">
                {# Script preview toggle #}
                <button class="btn btn-ghost btn-xs opacity-60"
                        onclick="this.closest('.bg-base-100').querySelector('.action-script').classList.toggle('hidden')">
                    Script
                </button>
                {# Results toggle #}
                {% if action.pass_count or action.fail_count %}
                <button class="btn btn-ghost btn-xs opacity-60"
                        hx-get="/partials/action-results/{{ action.slug }}"
                        hx-target="#action-results-{{ action.slug }}"
                        hx-swap="innerHTML"
                        hx-on::before-request="var t = document.getElementById('action-results-{{ action.slug }}'); if(t.innerHTML.trim()) { t.innerHTML = ''; event.preventDefault(); }">
                    Results
                </button>
                {% endif %}
            </div>

            {# Script content (hidden by default) #}
            <div class="action-script hidden mt-2">
                <pre class="rounded-box overflow-x-auto text-xs"><code class="language-bash">{{ action.script }}</code></pre>
            </div>

            {# Inline results container #}
            <div id="action-results-{{ action.slug }}" class="mt-2"></div>

        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="hero min-h-[20vh]">
    <div class="hero-content text-center">
        <div class="max-w-md">
            <div class="text-4xl mb-3">⚡</div>
            <h2 class="text-xl font-bold mb-2">No actions configured</h2>
            <p class="opacity-60">Add YAML files to the <code class="kbd kbd-sm">data/actions/</code> directory to define actions.</p>
        </div>
    </div>
</div>
{% endif %}

{# Highlight.js for bash syntax highlighting #}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/bash.min.js"></script>
<script>hljs.highlightAll();</script>
<script>
// Refresh page when an action run completes (triggered by HX-Trigger header)
document.body.addEventListener('actionRunCompleted', function() {
    showToast('Action completed', 'success');
    setTimeout(() => location.reload(), 500);
});
</script>
{% endblock %}