{% extends "base.html" %}

{% block title %}Forms - University ATS{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h1><i class="fas fa-wpforms"></i> Forms</h1>
                <a href="{% url 'form_builder' %}" class="btn btn-primary">
                    <i class="fas fa-plus"></i> Create New Form
                </a>
            </div>

            <!-- Search and Filter -->
            <div class="card mb-4">
                <div class="card-body">
                    <form method="get" class="row g-3">
                        <div class="col-md-8">
                            <div class="input-group">
                                <input type="text" class="form-control" name="search" placeholder="Search forms..." value="{{ request.GET.search }}">
                                <button class="btn btn-outline-secondary" type="submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <select class="form-select" name="sort">
                                <option value="-created_at">Latest First</option>
                                <option value="created_at">Oldest First</option>
                                <option value="title">Title (A-Z)</option>
                                <option value="-title">Title (Z-A)</option>
                            </select>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Forms List -->
            {% if page_obj %}
                <div class="row">
                    {% for form in page_obj %}
                        <div class="col-lg-4 col-md-6 mb-4">
                            <div class="card h-100">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h5 class="card-title mb-1">{{ form.title }}</h5>
                                        <span class="badge bg-success">Active</span>
                                    </div>

                                    <p class="card-text text-muted small">
                                        {{ form.description|truncatewords:15 }}
                                    </p>

                                    <div class="mb-2">
                                        <small class="text-muted">
                                            <i class="fas fa-user"></i> {{ form.created_by.username }}
                                        </small>
                                    </div>

                                    <div class="mb-2">
                                        <small class="text-muted">
                                            <i class="fas fa-calendar"></i> {{ form.created_at|date:"M d, Y" }}
                                        </small>
                                    </div>

                                    <div class="mb-3">
                                        <small class="text-muted">
                                            <i class="fas fa-chart-bar"></i> {{ form.submissions.count }} submissions
                                        </small>
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent">
                                    <div class="btn-group w-100" role="group">
                                        {% if form.created_by == user %}
                                            <a href="{% url 'edit_form' form.slug %}" class="btn btn-sm btn-outline-warning">
                                                <i class="fas fa-edit"></i> Edit
                                            </a>
                                        {% endif %}
                                        <a href="{% url 'form_preview' form.slug %}" class="btn btn-sm btn-outline-primary" target="_blank">
                                            <i class="fas fa-eye"></i> Preview
                                        </a>
                                        <a href="{% url 'form_embed' form.slug %}" class="btn btn-sm btn-outline-secondary" target="_blank">
                                            <i class="fas fa-code"></i> Embed
                                        </a>
                                        <a href="{% url 'form_submissions' form.slug %}" class="btn btn-sm btn-outline-info">
                                            <i class="fas fa-list"></i> Submissions
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    {% endfor %}
                </div>

                <!-- Pagination -->
                {% if page_obj.has_other_pages %}
                    <nav aria-label="Forms pagination">
                        <ul class="pagination justify-content-center">
                            {% if page_obj.has_previous %}
                                <li class="page-item">
                                    <a class="page-link" href="?page=1{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}">First</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}">Previous</a>
                                </li>
                            {% endif %}

                            <li class="page-item active">
                                <span class="page-link">{{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
                            </li>

                            {% if page_obj.has_next %}
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}">Next</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}{% if request.GET.sort %}&sort={{ request.GET.sort }}{% endif %}">Last</a>
                                </li>
                            {% endif %}
                        </ul>
                    </nav>
                {% endif %}
            {% else %}
                <div class="text-center py-5">
                    <i class="fas fa-wpforms fa-3x text-muted mb-3"></i>
                    <h3>No forms found</h3>
                    <p class="text-muted">Create your first form to get started.</p>
                    <a href="{% url 'form_builder' %}" class="btn btn-primary">Create Form</a>
                </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Add any interactive JavaScript here if needed
</script>
{% endblock %}