{% extends 'base.html' %}

{% block title %}Your Sites — AgentForms{% endblock %}

{% block head_extra %}
<style nonce="{{ csp_nonce }}">
    .btn-danger { background: #dc3545; }
    .btn-danger:hover { background: #c82333; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }.badge-ai { background: #f3e8ff; color: #6b21a8; font-weight: 600; }.warning { background: #fff3cd; color: #856404; padding: 12px; border-radius: 4px; margin-bottom: 16px; }.token { font-family: monospace; background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 12px; cursor: pointer; }.header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .usage-bar { background: #e9ecef; border-radius: 4px; height: 8px; overflow: hidden; margin-top: 4px; }
    .usage-bar-fill { height: 100%; background: #1a1a2e; border-radius: 4px; }
    .usage-bar-fill.warning { background: #ffc107; }
    .usage-bar-fill.danger { background: #dc3545; }
    .usage-row { display: flex; gap: 20px; margin-bottom: 16px; }
    .usage-item { flex: 1; }
    .usage-label { font-size: 13px; color: #666; display: flex; justify-content: space-between; }.actions { display: flex; gap: 8px; }
    /* MOBILE */
    @media (max-width: 640px) {
        .container { padding: 8px; }
        .header-row { flex-direction: column; align-items: flex-start; gap: 12px; }
        .header-row .btn, .header-row > div { width: 100%; }
        .header-row > div { display: flex; flex-direction: column; gap: 8px; }
        .usage-row { flex-direction: column; gap: 12px; }
        /* Tables: card layout on mobile */
        table { display: block; width: 100%; }
        thead { display: none; }
        tbody { display: block; width: 100%; }
        tr {
            display: block; width: 100%; padding: 12px; margin-bottom: 12px;
            background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            box-sizing: border-box;
        }
        td {
            display: flex; width: 100%; justify-content: space-between; align-items: center;
            text-align: right; padding: 6px 0; border: none; box-sizing: border-box;
        }
        td:before {
            content: attr(data-label); position: static; font-weight: 600; color: #666;
            text-align: left; flex-shrink: 0; margin-right: 8px; font-size: 11px; text-transform: uppercase;
        }
        td:last-child { justify-content: flex-end; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eee; }
        td:last-child::before { display: none; }
        .actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
        .actions .btn { flex: 1 1 auto; text-align: center; min-height: 36px; font-size: 12px; padding: 6px 8px; }
        .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 %}

        <!-- Usage overview -->
        <div class="card">
            <div class="header-row">
                <h2>Usage</h2>
                <span class="badge">{{ usage.tier_name }} Tier</span>
            </div>
            <div class="usage-row">
                <div class="usage-item">
                    <div class="usage-label">
                        <span>Forms</span>
                        <span>{{ usage.site_count }} / {% if usage.sites_unlimited %}∞{% else %}{{ usage.max_sites }}{% endif %}</span>
                    </div>
                    <div class="usage-bar">
                        <div class="usage-bar-fill {% if usage.sites_pct > 80 %}warning{% endif %}" style="width: {% if usage.sites_pct > 100 %}100{% else %}{{ usage.sites_pct|round }}{% endif %}%"></div>
                    </div>
                </div>
                <div class="usage-item">
                    <div class="usage-label">
                        <span>Submissions this month</span>
                        <span>{{ usage.submissions }} / {{ usage.max_submissions }}</span>
                    </div>
                    <div class="usage-bar">
                        <div class="usage-bar-fill {% if usage.subs_pct > 95 %}danger{% elif usage.subs_pct > 80 %}warning{% endif %}" style="width: {% if usage.subs_pct > 100 %}100{% else %}{{ usage.subs_pct|round }}{% endif %}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sites list -->
        <div class="card">
            <div class="header-row">
                <h2>Your Sites</h2>
                <div style="display:flex;gap:8px;">
                    <a href="{{ url_for('user_sites.browse_templates') }}" class="btn btn-outline">Browse Templates</a>
                    {% if can_add %}
                        <a href="{{ url_for('user_sites.new_site') }}" class="btn">+ New Site</a>
                    {% else %}
                        <a href="{{ url_for('billing.upgrade') }}" class="btn btn-outline">Upgrade for More</a>
                    {% endif %}
                </div>
            </div>

            {% if sites %}
            <table>
                <thead>
                    <tr>
                        <th>Site Name</th>
                        <th>Token</th>
                        <th>Owner Email</th>
                        <th>Created</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                {% for site in sites %}
                    <tr>
                        <td data-label="Site Name">
                            {{ site.name }}
                        </td>
                        <td data-label="Token">
                            <code class="token" data-onclick="copyToken('{{ site.token }}')" title="Click to copy">{{ site.token }}</code>
                        </td>
                        <td data-label="Owner Email">{{ site.owner_email }}</td>
                        <td data-label="Created">{{ site.created_at[:10] }}</td>
                        <td data-label="Actions" class="actions">
                            <a href="{{ url_for('user_sites.view_submissions', site_id=site.id) }}" class="btn btn-sm btn-outline">Submissions</a>
                            <a href="{{ url_for('user_sites.edit_site', site_id=site.id) }}" class="btn btn-sm btn-outline">Settings</a>
               <form method="POST" action="/sites/{{ site.id }}/delete" style="display:inline;" data-onsubmit="return confirm('Delete this site? This cannot be undone.');">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>
                                <button type="submit" class="btn btn-sm btn-danger">Delete</button>
                            </form>
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% else %}
            <div class="empty">
                <p>No sites yet. Start from scratch or browse our template marketplace.</p>
                <div style="display:flex; gap:8px; justify-content:center; margin-top:12px;">
                    {% if can_add %}
                        <a href="{{ url_for('user_sites.new_site') }}" class="btn">+ Create First Site</a>
                    {% endif %}
                    <a href="{{ url_for('user_sites.browse_templates') }}" class="btn btn-outline">Browse Templates</a>
                </div>
            </div>
            {% endif %}
        </div>
{% endblock %}

{% block scripts %}
<script nonce="{{ csp_nonce }}">
    function copyToken(token) {
        navigator.clipboard.writeText(token).then(() => {
            const el = event.target;
            const orig = el.textContent;
            el.textContent = '✓ Copied!';
            setTimeout(() => el.textContent = orig, 1500);
        });
    }

    // Flask jinja doesn't have min() built-in, use JS for template
    function min(a, b) { return Math.min(a, b); }
</script>
{% endblock %}