{% extends 'base.html' %}

{% block title %}Flows | FlowBot{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="fw-bold">Conversation Flows</h2>
        <a href="/admin/core/flow/add/" class="btn btn-coral px-4">Create New Flow</a>
    </div>

    <div class="row g-4">
        {% for flow in flows %}
        <div class="col-md-6">
            <div class="card p-4">
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h4 class="fw-bold mb-0">{{ flow.name }}</h4>
                    {% if flow.is_default %}
                        <span class="badge bg-indigo">Default</span>
                    {% endif %}
                </div>
                <p class="text-muted mb-4">{{ flow.description|default:"No description provided." }}</p>
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <span class="badge bg-light text-dark">{{ flow.fanpage.name }}</span>
                        <span class="small text-muted ms-2">{{ flow.nodes.count }} nodes</span>
                    </div>
                    <div class="btn-group">
                        <a href="/admin/core/flow/{{ flow.id }}/change/" class="btn btn-sm btn-outline-indigo">Edit</a>
                        <button class="btn btn-sm btn-indigo">Builder</button>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="col-12 text-center py-5">
            <div class="card p-5">
                <h3 class="text-muted">No flows defined</h3>
                <p>Start by creating a conversation flow for one of your pages.</p>
                <a href="/admin/core/flow/add/" class="btn btn-coral mt-3 mx-auto" style="width: fit-content;">Create Flow</a>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
