{% extends "base.html" %}

{% block title %}Flows - Lamb{% endblock %}

{% block body %}
<main class="mx-auto max-w-6xl px-4 py-7 sm:px-6 lg:px-8">
    {% include "_page_header.html" with header_label="Automation" header_title="Flows" header_description="Build and manage your automations." %}

    <div class="mb-6 flex flex-wrap items-center gap-2">
        <form method="post" action="{% url 'flows:flow_create' %}">
            {% 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)]">
                New Flow
            </button>
        </form>
        <form method="post" action="{% url 'flows:flow_import' %}" enctype="multipart/form-data" class="flex items-center gap-2">
            {% csrf_token %}
            <input type="file" name="flow_json" accept=".json,application/json" class="file-input file-input-xs sketch-border border-stone-900 bg-base-100/95 text-xs text-stone-800">
            <button type="submit" class="btn btn-xs sketch-border border-stone-900 bg-base-100 text-stone-900 hover:bg-base-200">
                Import JSON
            </button>
        </form>
    </div>

    {% if import_error %}
    <div class="alert alert-error mb-5 text-sm">{{ import_error }}</div>
    {% endif %}

    {% if flows %}
    <section class="flex flex-col gap-4">
        {% for flow in flows %}
        <article class="sketch-border paper-card flex flex-wrap items-center gap-4 bg-white p-4">
            <div class="min-w-0 flex-1">
                <div class="flex flex-wrap items-center gap-2">
                    <a href="{% url 'flows:flow_detail' flow_id=flow.pk %}"
                       class="font-bold text-stone-900 hover:underline underline-offset-2">
                        {{ flow.name }}
                    </a>
                    <span class="inline-flex items-center gap-1 text-sm text-stone-600">
                        <span class="inline-block h-2 w-2 rounded-full
                            {% if flow.status == 'active' %}bg-emerald-500
                            {% elif flow.status == 'paused' %}bg-yellow-500
                            {% elif flow.status == 'archived' %}bg-stone-400
                            {% else %}bg-blue-500{% endif %}">
                        </span>
                        {{ flow.get_status_display }}
                        &middot; updated {{ flow.updated_at|timesince }} ago
                    </span>
                </div>
                {% if flow.description %}
                <p class="mt-1 text-xs text-stone-600">{{ flow.description }}</p>
                {% endif %}
            </div>
            <div class="flex flex-shrink-0 flex-wrap items-center gap-2">
                <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
                    </button>
                </form>
                <a href="{% url 'flows:flow_detail' flow_id=flow.pk %}"
                   class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-[var(--color-aqua)]/80 text-stone-900 hover:bg-[var(--color-aqua)]">
                    View
                </a>
                <a href="{% url 'flows:flow_editor' flow_id=flow.pk %}"
                   class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-base-100 text-stone-900 hover:bg-base-200">
                    Edit
                </a>
                <a href="{% url 'flows:flow_export' flow_id=flow.pk %}"
                   class="btn btn-sm sketch-border rounded-2xl border-stone-900 bg-base-100 text-stone-900 hover:bg-base-200">
                    Export
                </a>
                <form method="post" action="{% url 'flows:flow_delete' flow_id=flow.pk %}"
                      onsubmit="return confirm('Delete this flow?')">
                    {% csrf_token %}
                    <button type="submit"
                            class="p-1 text-red-400 transition-colors hover:text-red-600"
                            title="Delete">
                        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 6l12 12M18 6L6 18"/>
                        </svg>
                    </button>
                </form>
            </div>
        </article>
        {% endfor %}
    </section>
    {% else %}
    <div class="sketch-border paper-card bg-base-100/95 p-8 text-center">
        <p class="text-lg text-stone-700">No flows yet. Create your first automation!</p>
        <form method="post" action="{% url 'flows:flow_create' %}" class="mt-4">
            {% csrf_token %}
            <button type="submit" class="btn sketch-border rounded-2xl border-stone-900 bg-[var(--color-accent)] text-stone-950 hover:bg-[var(--color-pop)]">
                Create Flow
            </button>
        </form>
    </div>
    {% endif %}
</main>
{% endblock %}