{% extends 'admin/base_admin.html' %}

{% block title %}Forms Setup | ChatLab{% endblock %}
{% block admin_forms_active %}active{% endblock %}

{% block workspace %}
<div class="page-header">
    <div>
        <h2 class="page-title">Custom Forms</h2>
        <p class="page-subtitle">Configure structured forms that visitors can fill out in the chat interface via trigger keywords.</p>
    </div>
    <a href="{% url 'admin_form_create' %}" class="btn btn-primary">
        Create Custom Form
    </a>
</div>

<div class="glass-card" style="padding: 2rem; border-radius: 0;">
    <h3 style="margin-bottom: 1.25rem; font-family: var(--font-heading); font-size: 1.25rem;">Configured Forms</h3>
    
    {% if forms %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th style="width: 30%;">Form Title</th>
                        <th style="width: 25%;">Trigger Keyword</th>
                        <th style="width: 25%;">Number of Fields</th>
                        <th style="text-align: right; width: 20%;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for form in forms %}
                        <tr>
                            <td style="font-weight: 600; color: var(--text-primary);">{{ form.title }}</td>
                            <td style="font-family: monospace; font-size: 0.95rem;">{{ form.keyword }}</td>
                            <td>{{ form.fields.count }} field(s)</td>
                            <td style="text-align: right;">
                                <div style="display: inline-flex; gap: 0.5rem; justify-content: flex-end;">
                                    <a href="{% url 'admin_form_edit' form.pk %}" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; border-radius: 0;">
                                        Edit
                                    </a>
                                    <form action="{% url 'admin_form_delete' form.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this Form? All field data and submissions will be deleted.');" style="display: inline;">
                                        {% csrf_token %}
                                        <button type="submit" class="btn btn-secondary" style="padding: 0.4rem 0.75rem; font-size: 0.8rem; color: var(--danger); border-color: rgba(239, 68, 68, 0.2); border-radius: 0;">
                                            Delete
                                        </button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% else %}
        <div style="text-align: center; padding: 4rem 2rem; color: var(--text-secondary);">
            <div style="font-size: 3rem; margin-bottom: 1.5rem;">📝</div>
            <h4 style="margin-bottom: 0.5rem;">No Custom Forms Created</h4>
            <p style="font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--text-muted);">Create custom forms like Lead Forms or Order Forms with fields you want to collect.</p>
            <a href="{% url 'admin_form_create' %}" class="btn btn-primary">Create Custom Form</a>
        </div>
    {% endif %}
</div>
{% endblock %}