{% extends "base.html" %}

{% block title %}{{ flow.name }} - Flow Runs{% endblock %}

{% block body %}
<main class="mx-auto max-w-6xl px-4 py-7 sm:px-6 lg:px-8">
    <nav class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <div>
            <a href="{% url 'flows:flow_list' %}"
               class="inline-flex items-center gap-2 text-sm font-medium text-stone-700 hover:text-stone-900">
                <span aria-hidden="true">←</span>
                Back to Flows
            </a>
        </div>
        <div class="flex items-center gap-2">
            <form method="post" action="{% url 'flows:flow_push_deployments' flow_id=flow.pk %}">
                {% csrf_token %}
                <button type="submit"
                        class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-[var(--color-aqua)]/80 text-stone-900 hover:bg-[var(--color-aqua)]">
                    Push Deployments
                </button>
            </form>
            <form method="post" action="{% url 'flows:flow_run' flow_id=flow.pk %}">
                {% csrf_token %}
                <button type="submit"
                        class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-[var(--color-accent)] text-stone-950 hover:bg-[var(--color-pop)]">
                    Run Flow
                </button>
            </form>
            <a href="{% url 'flows:flow_editor' flow_id=flow.pk %}"
               class="btn btn-sm sketch-border border-stone-900 bg-base-100 text-stone-900 hover:bg-base-200">
                Edit Flow
            </a>
        </div>
    </nav>
    {% include "_page_header.html" with header_label="Automation" header_title=flow.name header_description="Deployments and latest flow runs." %}

    <section
        id="flow-runs-panel"
        hx-get="{% url 'flows:flow_runs_panel' flow_id=flow.pk %}?page={{ current_page }}"
        hx-trigger="load"
        hx-swap="innerHTML">
        <div class="sketch-border paper-card bg-base-100/95 p-5 text-sm text-stone-700">
            Loading run status...
        </div>
    </section>
</main>
{% endblock %}