{% 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 src="/static/js/user-sites-inline.js"></script>
{% endblock %}