{% extends 'superuser/base_superuser.html' %}

{% block title %}Form Submissions | ChatLab{% endblock %}
{% block superuser_leads_active %}active{% endblock %}

{% block workspace %}
<div class="page-header" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <div>
        <h1 class="page-title">Form Submissions</h1>
        <p class="page-subtitle">Manage global lead capture submissions from the homepage.</p>
    </div>
    {% if leads %}
        <form action="{% url 'superuser_leads_list' %}" method="post" onsubmit="return confirm('Are you sure you want to clear all form submissions? This action cannot be undone.');">
            {% csrf_token %}
            <input type="hidden" name="action" value="clear_all">
            <button type="submit" class="btn btn-secondary" style="color: var(--danger); border-color: rgba(239, 68, 68, 0.2); display: flex; align-items: center; gap: 0.5rem; border-radius: 0;">
                <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                Clear All Submissions
            </button>
        </form>
    {% endif %}
</div>

<div class="glass-card" style="padding: 1.75rem; border-radius: 0;">
    {% if leads %}
        <div class="table-container">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Phone Number</th>
                        <th>Page URL</th>
                        <th>Submission Date</th>
                        <th style="text-align: right;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for lead in leads %}
                        <tr>
                            <td style="font-weight: 600; color: var(--text-primary);">{{ lead.name }}</td>
                            <td>{{ lead.phone }}</td>
                            <td>
                                {% if lead.page_url %}
                                    <a href="{{ lead.page_url }}" target="_blank" style="color: var(--primary); text-decoration: underline;">{{ lead.page_url }}</a>
                                {% else %}
                                    <span style="color: var(--text-muted); font-style: italic;">Not provided</span>
                                {% endif %}
                            </td>
                            <td style="font-size: 0.85rem; color: var(--text-muted);">{{ lead.created_at|date:"M d, Y H:i" }}</td>
                            <td style="text-align: right;">
                                <form action="{% url 'superuser_delete_lead' lead.pk %}" method="post" onsubmit="return confirm('Are you sure you want to delete this submission?');" 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>
                            </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 Form Submissions Yet</h4>
            <p style="font-size: 0.9rem; color: var(--text-muted);">Form submissions captured from the landing page "Try Now" button will be listed here.</p>
        </div>
    {% endif %}
</div>
{% endblock %}