{% extends 'base.html' %}

{% block title %}New Site — 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: 560px; margin: 0 auto; padding: 20px; }
    nav { background: #1a1a2e; color: white; }
    .card { background: white; border-radius: 8px; padding: 24px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .card h2 { font-size: 18px; margin-bottom: 16px; }
    .btn { display: inline-block; padding: 8px 16px; background: #1a1a2e; color: white; text-decoration: none; border-radius: 4px; border: none; cursor: pointer; font-size: 14px; }
    .btn:hover { background: #2d2d44; }
    .btn-outline { background: transparent; border: 1px solid #1a1a2e; color: #1a1a2e; }
    .error { background: #f8d7da; color: #721c24; padding: 12px; border-radius: 4px; margin-bottom: 16px; }
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; margin-bottom: 4px; font-weight: 600; font-size: 14px; }
    .form-group input { width: 100%; padding: 12px 14px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 16px; min-height: 48px; background: #fafafa; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; }
    .form-group input:focus { outline: none; border-color: #1a1a2e; background: #fff; box-shadow: 0 0 0 3px rgba(26,26,46,0.1); }
    .form-group select { width: 100%; padding: 12px 14px; border: 1.5px solid #ddd; border-radius: 6px; font-size: 16px; min-height: 48px; background: #fafafa; transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box; }
    .form-group select:focus { outline: none; border-color: #1a1a2e; background: #fff; box-shadow: 0 0 0 3px rgba(26,26,46,0.1); }
    .form-group .hint { font-size: 12px; color: #888; margin-top: 4px; }
    .form-group select option.featured { background: #e8f5e9; font-weight: 600; }
    .form-group select option { padding: 8px; }
    .template-preview { background: #f8f9fa; border-radius: 4px; padding: 12px; margin-top: 8px; display: none; font-size: 13px; }
    .template-preview.active { display: block; }
    .template-preview .desc { color: #666; margin-bottom: 4px; }
    .template-preview .fields { font-size: 12px; color: #888; }
    /* MOBILE */
    @media (max-width: 640px) {
        .container { padding: 12px; }
        .card { padding: 16px; }
        .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
        div[style*="flex"] { flex-direction: column; }
        div[style*="flex"] > * { width: 100%; }
    }
</style>
{% endblock %}

{% block content %}
    {% if errors %}
        <div class="error">{{ errors[0] }}{% if errors|length > 1 %} — {{ errors[1] }}{% endif %}</div>
    {% endif %}

    <div class="card">
        <h2>Create New Form</h2>
        <p style="color:#666; margin-bottom:16px; font-size:14px;">
            Start from a template or build from scratch. Your form is live in seconds.
        </p>

        <form method="POST">
            <input type="hidden" name="csrf_token" value="{{ csrf_token }}"/>

            <div class="form-group" id="templateGroup">
                <label>Start from Template <span style="font-weight:400;color:#888;">(optional)</span></label>
                <select name="template_slug" id="templateSlug">
                    <option value="">— Blank Form —</option>
                    {%- for cat, cat_templates in grouped_templates %}
                    <optgroup label="{{ cat }}">
                        {%- for tpl in cat_templates %}
                        <option value="{{ tpl.slug }}" data-desc="{{ tpl.description }}" data-fields="{{ tpl.field_count }} fields{% if tpl.is_featured %} ★ featured{% endif %}">{{ tpl.name }}{% if tpl.is_featured %} ★{% endif %}</option>
                        {%- endfor %}
                    </optgroup>
                    {%- endfor %}
                </select>
                <div class="template-preview" id="templatePreview">
                    <div class="desc"></div>
                    <div class="fields"></div>
                </div>
            </div>

            <div class="form-group">
                <label>Site Name</label>
                <input type="text" name="name" value="{{ name or '' }}" placeholder="e.g. Plumbing Service Request Form" required>
                <div class="hint">Just for you — a label to identify this form.</div>
            </div>

            <div class="form-group">
                <label>Owner Email</label>
                <input type="email" name="owner_email" value="{{ owner_email or user.email }}" placeholder="you@example.com" required>
                <div class="hint">Where submission notifications are sent.</div>
            </div>

            <div class="form-group">
                <label>SMTP From Address <span style="font-weight:400;color:#888;">(optional)</span></label>
                <input type="email" name="smtp_from" placeholder="noreply@yoursite.com">
                <div class="hint">Overrides the default sender for notification emails.</div>
            </div>

            <div style="display:flex;gap:12px;margin-top:20px;">
                <button type="submit" class="btn">Create Site</button>
                <a href="{{ url_for('user_sites.list_sites') }}" class="btn btn-outline">Cancel</a>
            </div>
        </form>
    </div>
{% endblock %}

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