{% extends 'base.html' %}

{% block title %}Submissions — {{ site.name }} — AgentForms{% endblock %}

{% block head_extra %}
<style nonce="{{ csp_nonce }}">
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, sans-serif; background: #f5f5f5; color: #333; }
    .container { max-width: 960px; margin: 0 auto; padding: 20px; }
    .card { background: white; border-radius: 8px; padding: 20px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .card h2 { font-size: 18px; margin-bottom: 16px; }
    .success { background: #d4edda; color: #155724; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
    .error { background: #f8d7da; color: #721c24; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
    .token { font-family: monospace; background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 12px; }
    .empty { text-align: center; padding: 40px; color: #888; }
    .header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    table { width: 100%; border-collapse: collapse; }
    th, td { text-align: left; padding: 12px; border-bottom: 1px solid #eee; }
    th { background: #f8f8f8; font-weight: 600; }
    .badge { display: inline-block; padding: 2px 8px; background: #e9ecef; border-radius: 12px; font-size: 12px; }
    td.text-trunc { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* MOBILE */
    @media (max-width: 640px) {
        .container { padding: 12px; }
        .header-row { flex-direction: column; align-items: flex-start; gap: 12px; }
        .header-row .btn { align-self: stretch; text-align: center; min-height: 44px; }
        table { display: block; }
        thead, tbody, tr, th, td { display: block; }
        thead tr { display: none; }
        tr { padding: 12px 0; border-bottom: 2px solid #e9ecef; }
        td { text-align: right; padding: 6px 12px; border: none; position: relative; padding-left: 50%; }
        td:before { content: attr(data-label); position: absolute; left: 12px; font-weight: 600; color: #666; text-align: left; }
        td.text-trunc { max-width: none; overflow: visible; text-overflow: unset; white-space: normal; }
        .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    }
</style>
{% endblock %}

{% block content %}
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
            <div class="{{ category }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
        {% endwith %}

        <div class="card">
            <div class="header-row">
                <div>
                    <h2>{{ site.name }}</h2>
                    <p style="color:#666; font-size:13px; margin-top:4px;">
                        Token: <code class="token token-masked" data-token="{{ site.token }}">{{ site.token }}</code> · 
                        Owner: {{ site.owner_email }} · 
                        Created: {{ site.created_at[:10] }}
                    </p>
                </div>
                <a href="{{ url_for('user_sites.list_sites') }}" class="btn btn-outline btn-sm">← Back to Sites</a>
            </div>

           {% if submissions %}
            <p style="color:#666; font-size:13px; margin-bottom:12px;">{{ submissions|length }} submission(s)</p>
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Message</th>
                        {% for field in field_config %}
                        <th>{{ field.label or field.key }}</th>
                        {% endfor %}
                        <th>When</th>
                    </tr>
                </thead>
                <tbody>
                {% for sub in submissions %}
                    <tr>
                        <td data-label="Name">{{ sub.customer_name or '-' }}</td>
                        <td data-label="Email" class="text-trunc" title="{{ sub.customer_email or '-' }}">{{ sub.customer_email or '-' }}</td>
                        <td data-label="Phone">{{ sub.customer_phone or '-' }}</td>
                        <td data-label="Message">{{ (sub.customer_message or '')[0:40] }}{% if sub.customer_message and sub.customer_message|length > 40 %}...{% endif %}</td>
                        {% for field in field_config %}
                        <td data-label="{{ field.label or field.key }}">{{ sub._dynamic.get(field.key, '-') if sub._dynamic else '-' }}</td>
                        {% endfor %}
                        <td data-label="When">{{ sub.submitted_at[:10] }}</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="empty">
                <p>No submissions yet for this form.</p>
                <p style="margin-top:8px; font-size:13px;">Share this endpoint with your agent:</p>
                <code class="token token-masked" data-token="{{ site.token }}" style="display:inline-block; margin-top:8px; padding:4px 8px; word-break:break-all;">
                    POST {{ base_url }}/api/submit?token={{ site.token }}
                </code>
            </div>
            {% endif %}
        </div>
{% endblock %}

{% block scripts %}
<script src="/static/js/site-submissions-inline.js"></script>
{% endblock %}