{% extends 'django_forms_workflows/base.html' %}
{% load forms_workflows_tags %}

{% block title %}Available Forms - {{ site_name }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">

        {# ── Page header + search ── #}
        <div class="d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
            <h1 class="mb-0"><i class="bi bi-list-ul"></i> Available Forms</h1>
            <form method="get" action="" class="d-flex" role="search">
                <div class="input-group input-group-sm">
                    <input type="search" name="q" class="form-control"
                           placeholder="Search forms…"
                           value="{{ search_query }}"
                           aria-label="Search forms">
                    <button class="btn btn-outline-secondary" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                    {% if search_query %}
                    <a href="?" class="btn btn-outline-danger" title="Clear search">
                        <i class="bi bi-x-lg"></i>
                    </a>
                    {% endif %}
                </div>
            </form>
        </div>

        {% if search_query %}
        <p class="text-muted small mb-3">
            {% with total=forms|length %}
            {{ total }} result{{ total|pluralize }} for &ldquo;<strong>{{ search_query }}</strong>&rdquo;
            {% endwith %}
        </p>
        {% endif %}

        {% if grouped_forms %}
            {% render_form_categories grouped_forms %}
        {% elif forms %}
            {# Fallback: flat list when grouped_forms is not provided #}
            <div class="row">
                {% for form in forms %}
                    <div class="col-md-6 col-lg-4 mb-4">
                        <div class="card h-100">
                            <div class="card-body">
                                <h5 class="card-title">{{ form.name }}</h5>
                                <p class="card-text">{{ form.description|striptags|truncatewords:20 }}</p>
                            </div>
                            <div class="card-footer bg-transparent">
                                <a href="{% url 'forms_workflows:form_submit' form.slug %}" class="btn btn-primary btn-sm">
                                    <i class="bi bi-pencil-square"></i> Fill Out Form
                                </a>
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="alert alert-info">
                <i class="bi bi-info-circle"></i>
                No forms are currently available. Please check back later or contact your administrator.
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}