{% extends "base.html" %}

{% block title %}Dashboard - Form Relay{% endblock %}

{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;">
    <h1 style="font-size:20px;margin:0;">Dashboard</h1>
    <nav style="display:flex;gap:8px;font-size:13px;">
        <a href="{{ url_for('admin.dashboard') }}" style="color:#1a1a2e;text-decoration:none;padding:4px 10px;border-radius:4px;background:#f0f0f0;">Submissions</a>
        <a href="{{ url_for('admin.sites') }}" style="color:#1a1a2e;text-decoration:none;padding:4px 10px;border-radius:4px;">Sites</a>
        <a href="{{ url_for('admin.users') }}" style="color:#1a1a2e;text-decoration:none;padding:4px 10px;border-radius:4px;">Users</a>
        <a href="{{ url_for('admin.admin_templates') }}" style="color:#1a1a2e;text-decoration:none;padding:4px 10px;border-radius:4px;">Templates</a>
    </nav>
</div>

<!-- PLATFORM STATS -->
<div style="margin-bottom:24px;">
    <div style="font-size:13px;font-weight:600;color:#666;margin-bottom:8px;text-transform:uppercase;letter-spacing:0.5px;">Platform Overview</div>
    <div class="stats" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;">
        <div class="stat" style="background:white;padding:16px;border-radius:8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
            <div class="stat-value" style="font-size:1.8em;font-weight:700;color:#1a1a2e;">{{ platform_stats.total_users }}</div>
            <div class="stat-label" style="color:#666;font-size:12px;margin-top:2px;">Total Users</div>
        </div>
        <div class="stat" style="background:white;padding:16px;border-radius:8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
            <div class="stat-value" style="font-size:1.8em;font-weight:700;color:#1a1a2e;">{{ platform_stats.total_sites }}</div>
            <div class="stat-label" style="color:#666;font-size:12px;margin-top:2px;">Total Forms</div>
        </div>
        <div class="stat" style="background:white;padding:16px;border-radius:8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
            <div class="stat-value" style="font-size:1.8em;font-weight:700;color:#10b981;">{{ platform_stats.total_submissions_today }}</div>
            <div class="stat-label" style="color:#666;font-size:12px;margin-top:2px;">Today</div>
        </div>
        <div class="stat" style="background:white;padding:16px;border-radius:8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
            <div class="stat-value" style="font-size:1.8em;font-weight:700;color:#4a9eff;">{{ platform_stats.total_submissions_week }}</div>
            <div class="stat-label" style="color:#666;font-size:12px;margin-top:2px;">This Week</div>
        </div>
        <div class="stat" style="background:white;padding:16px;border-radius:8px;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,0.1);">
            <div class="stat-value" style="font-size:1.8em;font-weight:700;color:#7c3aed;">{{ platform_stats.total_submissions_month }}</div>
            <div class="stat-label" style="color:#666;font-size:12px;margin-top:2px;">This Month</div>
        </div>
    </div>
</div>

<div class="card">
    <form method="GET" style="display:flex;gap:8px;margin-bottom:16px;">
        <select name="site" style="padding:8px;border:1px solid #ddd;border-radius:4px;">
            <option value="">All Sites</option>
            {% for site in sites %}
            <option value="{{ site.id }}" {% if site_filter == site.id %}selected{% endif %}>
                {{ site.name }}
            </option>
            {% endfor %}
        </select>
        <button type="submit" class="btn">Filter</button>
    </form>

    {% if submissions %}
    <div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Date</th>
                <th>Site</th>
                <th>Name</th>
                <th>Phone</th>
                <th>Email</th>
                <th>Equipment</th>
            </tr>
        </thead>
        <tbody>
            {% for sub in submissions %}
            <tr>
                <td>{{ sub.submitted_at[:16] }}</td>
                <td><span class="badge">{{ sub.site_name }}</span></td>
                <td>{{ sub.customer_name or '-' }}</td>
                <td class="text-trunc" title="{{ sub.customer_phone or '-' }}">{{ sub.customer_phone or '-' }}</td>
                <td class="text-trunc" title="{{ sub.customer_email or '-' }}">{{ sub.customer_email or '-' }}</td>
                <td>{{ sub.customer_equipment or '-' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    </div>
    {% else %}
    <p style="color:#888;text-align:center;padding:40px;">No submissions yet</p>
    {% endif %}
</div>

<script nonce="{{ csp_nonce }}">
    // Insert zero-width space before @ in email addresses for clean line breaks
    document.querySelectorAll('.text-trunc').forEach(function(el) {
        var text = el.textContent;
        if (text.indexOf('@') !== -1) {
            el.textContent = text.replace(/@/g, '\u200B@');
        }
    });
</script>
{% endblock %}
