{% extends 'base.html' %}
{% load static %}
{% load form_tags %}

{% block title %}My Forms - Form Builder{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="fas fa-clipboard-list me-2"></i>My Forms</h1>
    <a href="{% url 'form_create' %}" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i>Create New Form
    </a>
</div>

{% if forms %}
    <div class="row">
        {% for form in forms %}
            <div class="col-md-6 col-lg-4 mb-4">
                <div class="card h-100 shadow-sm">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">{{ form.title }}</h5>
                        <div class="dropdown">
                            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                <i class="fas fa-ellipsis-v"></i>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a class="dropdown-item" href="{% url 'form_detail' form.pk %}">
                                    <i class="fas fa-eye me-1"></i>View
                                </a></li>
                                <li><a class="dropdown-item" href="{% url 'form_builder' form.pk %}">
                                    <i class="fas fa-edit me-1"></i>Edit Fields
                                </a></li>
                                <li><a class="dropdown-item" href="{% url 'form_edit' form.pk %}">
                                    <i class="fas fa-cog me-1"></i>Settings
                                </a></li>
                                <li><a class="dropdown-item" href="{% url 'form_responses' form.pk %}">
                                    <i class="fas fa-chart-bar me-1"></i>Responses
                                </a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item text-danger" href="{% url 'form_delete' form.pk %}">
                                    <i class="fas fa-trash me-1"></i>Delete
                                </a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body">
                        {{ form.description|truncatewords:20|render_markdown|add_class:"text-muted card-text" }}
                        <div class="row text-center">
                            <div class="col-4">
                                <div class="stat-item">
                                    <div class="stat-number">{{ form.fields.count }}</div>
                                    <div class="stat-label">Fields</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="stat-item">
                                    <div class="stat-number">{{ form.response_count }}</div>
                                    <div class="stat-label">Responses</div>
                                </div>
                            </div>
                            <div class="col-4">
                                <div class="stat-item">
                                    <div class="stat-number">
                                        {% if form.can_accept_submissions %}
                                            <span class="badge bg-success">Active</span>
                                        {% else %}
                                            <span class="badge bg-secondary">Inactive</span>
                                        {% endif %}
                                    </div>
                                    <div class="stat-label">Status</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer text-muted">
                        <small>Created {{ form.created_at|timesince }} ago</small>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>

    <!-- Pagination -->
    {% if is_paginated %}
        <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">First</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">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 }}">Next</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    {% endif %}
{% else %}
    <div class="text-center py-5">
        <i class="fas fa-clipboard-list fa-4x text-muted mb-3"></i>
        <h3>No forms yet</h3>
        <p class="text-muted">Create your first form to get started!</p>
        <a href="{% url 'form_create' %}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>Create Your First Form
        </a>
    </div>
{% endif %}
{% endblock %}