<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ og_title or site_name }}</title>
    {% if og_description %}<meta name="description" content="{{ og_description }}">{% endif %}
    {% if og_title %}<meta property="og:title" content="{{ og_title }}">{% else %}<meta property="og:title" content="{{ site_name }}">{% endif %}
    {% if og_description %}<meta property="og:description" content="{{ og_description }}">{% endif %}
    {% if og_image %}<meta property="og:image" content="{{ og_image }}">{% endif %}
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="{{ og_title or site_name }}">
    {% if og_title %}<meta name="twitter:title" content="{{ og_title }}">{% endif %}
    {% if og_description %}<meta name="twitter:description" content="{{ og_description }}">{% endif %}
    {% if og_image %}<meta name="twitter:image" content="{{ og_image }}">{% endif %}
    <meta name="twitter:card" content="summary_large_image">
    {% if favicon_url %}<link rel="icon" href="{{ favicon_url }}">{% endif %}
    {% if favicon_url %}<link rel="apple-touch-icon" href="{{ favicon_url }}">{% endif %}
    {% if branding_color %}<meta name="theme-color" content="{{ branding_color }}">{% endif %}
    {% set color = branding_color or '#2563eb' %}
    <style nonce="{{ csp_nonce }}">
        *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
            background: #f7f7f8;
            color: #1a1a2e;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
        }

        .form-container {
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 8px 24px rgba(0,0,0,0.04);
            width: 100%;
            max-width: 520px;
            overflow: hidden;
        }

        .form-header {
            padding: 28px 32px 20px;
            {% if branding_color %}background: {{ branding_color }}; color: white;{% else %}border-bottom: 1px solid #eee;{% endif %}
        }

        {% if logo_url %}
        .form-logo {
            max-height: 48px;
            max-width: 200px;
            margin-bottom: 16px;
            display: block;
        }
        {% endif %}

        .form-header h1 {
            font-size: 22px;
            font-weight: 700;
            {% if branding_color %}color: white;{% else %}color: #1a1a2e;{% endif %}
            line-height: 1.3;
        }

        {% if og_description %}
        .form-header p {
            font-size: 14px;
            {% if branding_color %}color: rgba(255,255,255,0.85);{% else %}color: #666;{% endif %}
            margin-top: 8px;
        }
        {% endif %}

        .form-body {
            padding: 24px 32px 32px;
        }

        .field-group {
            margin-bottom: 20px;
        }

        .field-group label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #333;
            margin-bottom: 6px;
        }

        .field-group label .required {
            color: #e53e3e;
            margin-left: 2px;
        }

        .field-group input,
        .field-group textarea,
        .field-group select {
            width: 100%;
            padding: 10px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
            font-size: 15px;
            color: #333;
            background: #fff;
            transition: border-color 0.15s, box-shadow 0.15s;
            outline: none;
        }

        .field-group input:focus,
        .field-group textarea:focus,
        .field-group select:focus {
            border-color: {{ color }};
            box-shadow: 0 0 0 3px {{ color }}20;
        }

        .field-group textarea {
            min-height: 100px;
            resize: vertical;
        }

        .field-group .checkbox-group {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .field-group .checkbox-group input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: {{ color }};
        }

        .field-group .checkbox-group label {
            margin-bottom: 0;
            font-weight: 400;
        }

        .field-group .options-list {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .field-group .options-list label {
            font-weight: 400;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .field-group .options-list input {
            width: 16px;
            height: 16px;
            accent-color: {{ color }};
        }

        .submit-btn {
            width: 100%;
            padding: 12px 24px;
            background: {{ color }};
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s;
            margin-top: 8px;
        }

        .submit-btn:hover {
            background: {{ color }}dd;
        }

        .form-footer {
            padding: 16px 32px;
            background: #f9fafb;
            border-top: 1px solid #eee;
            text-align: center;
        }

        .form-footer p {
            font-size: 12px;
            color: #9ca3af;
        }

        .form-footer a {
            color: #6b7280;
            text-decoration: none;
        }

        .honeypot {
            position: absolute;
            left: -9999px;
        }

        @media (max-width: 480px) {
            body { padding: 12px; }
            .form-header { padding: 20px 20px 16px; }
            .form-body { padding: 20px; }
            .form-footer { padding: 12px 20px; }
        }
    </style>
</head>
<body>
    <div class="form-container">
        <div class="form-header">
            {% if logo_url %}
            <img class="form-logo" src="{{ logo_url }}" alt="{{ site_name }}">
            {% endif %}
            <h1>{{ site_name }}</h1>
            {% if og_description %}
            <p>{{ og_description }}</p>
            {% endif %}
        </div>

        <div class="form-body">
            <form action="/api/submit" method="POST">
                <input type="hidden" name="token" value="{{ token }}">

                {% if honeypot_enabled %}
                <div class="honeypot" aria-hidden="true">
                    <label>
                        _fr_check
                        <input type="text" name="_fr_check" tabindex="-1" autocomplete="off">
                    </label>
                </div>
                {% endif %}

                {% for field in fields %}
                <div class="field-group"
                     data-field-key="{{ field.key }}"
                     {% if field.condition %}data-condition="{{ field.condition | tojson | forceescape }}" style="display:none;"{% endif %}>
                    {% set field_type = field.type | default('text') %}

                    {% if field_type == 'checkbox' %}
                    <div class="checkbox-group">
                        <input type="checkbox"
                               id="{{ field.key }}"
                               name="{{ field.key }}"
                               {% if field.required %}required{% endif %}
                               {% if field.default == 'true' %}checked{% endif %}>
                        <label for="{{ field.key }}">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</label>
                    </div>

                    {% elif field_type in ['radio', 'select'] and field.options | length > 0 %}
                    {% if field_type == 'radio' %}
                    <p style="font-weight:600;font-size:14px;margin-bottom:6px;">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</p>
                    <div class="options-list">
                        {% for opt in field.options %}
                        <label>
                            <input type="radio"
                                   name="{{ field.key }}"
                                   value="{{ opt.value if opt is mapping else opt }}"
                                   {% if field.required and loop.first == false %}required{% endif %}
                                   {% if field.default and (opt.value if opt is mapping else opt) == field.default %}checked{% endif %}>
                            {{ opt.label if opt is mapping else opt }}
                        </label>
                        {% endfor %}
                    </div>
                    {% else %}
                    <label for="{{ field.key }}">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</label>
                    <select id="{{ field.key }}" name="{{ field.key }}" {% if field.required %}required{% endif %}>
                        <option value="">Select an option</option>
                        {% for opt in field.options %}
                        <option value="{{ opt.value if opt is mapping else opt }}"
                                {% if field.default and (opt.value if opt is mapping else opt) == field.default %}selected{% endif %}>
                            {{ opt.label if opt is mapping else opt }}
                        </option>
                        {% endfor %}
                    </select>
                    {% endif %}

                    {% elif field_type == 'textarea' %}
                    <label for="{{ field.key }}">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</label>
                    <textarea id="{{ field.key }}"
                              name="{{ field.key }}"
                              {% if field.required %}required{% endif %}
                              placeholder="{{ field.placeholder | default('') }}"
                              rows="{{ field.rows | default(4) }}">{{ field.default | default('') }}</textarea>

                    {% else %}
                    <label for="{{ field.key }}">{{ field.label | default(field.key) }}{% if field.required %} <span class="required">*</span>{% endif %}</label>
                    <input type="{{ field_type | default('text') }}"
                           id="{{ field.key }}"
                           name="{{ field.key }}"
                           value="{{ field.default | default('') }}"
                           {% if field.required %}required{% endif %}
                           {% if field.placeholder %}placeholder="{{ field.placeholder }}"{% endif %}
                           {% if field_type == 'number' %}step="{{ field.step | default('any') }}"{% endif %}
                           {% if field.min %}min="{{ field.min }}"{% endif %}
                           {% if field.max %}max="{{ field.max }}"{% endif %}
                           {% if field.pattern %}pattern="{{ field.pattern }}"{% endif %}>
                    {% endif %}
                </div>
                {% endfor %}

                <button type="submit" class="submit-btn">{{ submit_text | default('Submit') }}</button>
            </form>
        </div>

        <div class="form-footer">
            <p>Powered by <a href="https://agentforms.io" target="_blank" rel="noopener">AgentForms</a></p>
        </div>
    </div>

    <script type="application/json" id="data-hosted-form">{{ {'submit_text': submit_text | default('Submit')} | tojson }}</script>
    <script src="/static/js/hosted-form-inline.js"></script>

</body>
</html>
