{%- set demoArea = craft.app.request.segment(2) -%}
{%- set pageTemplate = craft.app.request.segment(3)|default('basic-light') -%}
{%- set pageTemplateFile = pageTemplate ~ '/index.twig' -%}
{%- if demoArea == "templates" -%}
    {%- set formHandle = craft.app.request.segment(4) -%}
{%- elseif demoArea in ["submissions", "custom"] -%}
    {%- set formHandle = craft.app.request.segment(3) -%}
    {%- set pageTemplateFile = null -%}
{%- elseif demoArea == "extras" -%}
    {%- set formHandle = "" -%}
    {%- set pageTemplateFile = "basic-light/index.twig" -%}
{%- elseif craft.app.request.segment(2) is empty -%}
    {%- set formHandle = "" -%}
    {%- set pageTemplate = "basic-dark" %}
{%- endif -%}
{%- if formHandle -%}
    {%- set form = freeform.form(formHandle, {
        formattingTemplate: pageTemplateFile,
    }) -%}
{%- endif -%}

<!doctype html>
<html lang="en"
{%- if pageTemplate in ["basic-dark", "bootstrap-5-dark", "tailwind-3-dark", "tailwind-4-dark", "conversational"] %}
 data-theme="dark"
{%- endif -%}
{%- if pageTemplate == "bootstrap-5-dark" %} data-bs-theme="dark"{%- endif %}>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <title>{{ pageTitle ? "Freeform Demo | " ~ pageTitle : "Freeform Demo" }}</title>
    {% if pageTemplate in ["basic-dark", "bootstrap-5-dark", "tailwind-3-dark", "tailwind-4-dark", "conversational"] %}
        {% set colorMode = "dark" %}
    {% else %}
        {% set colorMode = "light" %}
    {% endif %}
    {% if demoArea == "templates" and craft.app.request.segment(4) %}
        {% if pageTemplate in ["bootstrap-5", "bootstrap-5-dark", "bootstrap-5-floating-labels"] %}
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
        {% endif %}
        {% if pageTemplate == "foundation-6" %}
            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css" crossorigin="anonymous">
            <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>
        {% endif %}
        {% if pageTemplate in ["tailwind-4-light", "tailwind-4-dark"] %}
            <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
        {% endif %}
        {% if pageTemplate in ["tailwind-3", "tailwind-3-dark"] %}
            <script src="https://cdn.tailwindcss.com/3.3.3"></script>
        {% endif %}
    {% endif %}
    <style>
        :root {
            --page-bg: #{% if colorMode == "dark" %}1f2226{% else %}ffffff{% endif %};
            --page-text: #{% if colorMode == "dark" %}dfdfdf{% else %}4e4e4e{% endif %};
            --nav-text: #{% if colorMode == "dark" %}959595{% else %}8a8a8a{% endif %};
            --nav-bg: {% if colorMode == "dark" %}rgb(19,22,24,0.85){% else %}rgb(232,232,232,0.85){% endif %};
            --nav-highlight: #{% if colorMode == "dark" %}dfdfdf{% else %}4e4e4e{% endif %};
            --nav-bg-hover: {% if colorMode == "dark" %}rgb(19,22,24,0.25){% else %}rgb(232,232,232,0.25){% endif %};
            --logo-glow: 0 0 7px 1px {% if colorMode == "dark" %}rgb(255,255,255,0.2){% else %}rgb(0,0,0,0.1){% endif %};
            --menu-bg: #{% if colorMode == "dark" %}dfdfdf{% else %}4e4e4e{% endif %};
            --menu-list-bg: #{% if colorMode == "dark" %}191c1f{% else %}f1f1f1{% endif %};
            --menu-list-border: 1px solid #{% if colorMode == "dark" %}252b31{% else %}c5c5c5{% endif %};
            --nav-button-bg: #{% if colorMode == "dark" %}3c474f{% else %}d0d0d0{% endif %};
            --nav-button-text: #{% if colorMode == "dark" %}dfdfdf{% else %}4e4e4e{% endif %};
            --nav-button-hover: #{% if colorMode == "dark" %}dfdfdf{% else %}dfdfdf{% endif %};
            --nav-button-active:  #{% if colorMode == "dark" %}dfdfdf{% else %}eeeeee{% endif %};
            --nav-dropdown-bg: #{% if colorMode == "dark" %}191c1f{% else %}f1f1f1{% endif %};
            --nav-dropdown-bg-hover: #{% if colorMode == "dark" %}252b31{% else %}dedede{% endif %};
            --nav-dropdown-text: #{% if colorMode == "dark" %}dfdfdf{% else %}4e4e4e{% endif %};
            --nav-dropdown-divider: 1px solid #{% if colorMode == "dark" %}252b31{% else %}c5c5c5{% endif %};
            --form-box-submissions: {% if colorMode == "dark" %}rgb(0,0,0,0.2){% else %}rgb(0,0,0,0.05){% endif %};
            --table-row-bg: #{% if colorMode == "dark" %}212529{% else %}ffffff{% endif %};
            --table-row-bg-alt: #{% if colorMode == "dark" %}3c474f{% else %}f3f3f3{% endif %};
            --table-head-bg: #{% if colorMode == "dark" %}3c474f{% else %}d0d0d0{% endif %};
            --table-head-bg-alt: #{% if colorMode == "dark" %}404b53{% else %}eeeeee{% endif %};
            --table-head-bg-alt2: #{% if colorMode == "dark" %}404b53{% else %}e3e3e3{% endif %};
        }
    </style>
    <link href="{{ siteUrl }}assets/demo/css/demo.css" rel="stylesheet">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/demo/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/demo/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/demo/favicon/favicon-16x16.png">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

{% block headerCss %}{% endblock %}

</head>
<body{% if spamMode is defined and spamMode == true %} class="freeform-spam-mode"{% endif %}>

    {% macro pageTemplateItem(template, form) %}
        {% if template == "divider" %}
            <hr />
        {% else %}
            <a{% if craft.app.request.segment(3) == template %} class="active"{% endif %} href="{{ siteUrl }}demo/templates/{{ template }}/{{ form }}{% if craft.app.request.segment(5) == "edit" %}/edit/{{ craft.app.request.segment(6) }}{% endif %}">{{ template|title|replace({'-':' '}) }}</a>
        {% endif %}
    {% endmacro %}

    {% macro extrasItem(template, name) %}
        {% if template == "divider" %}
            <hr />
        {% else %}
            <a{% if craft.app.request.segment(3) == template %} class="active"{% endif %} href="{{ siteUrl }}demo/extras/{{ template }}">{{ name }}</a>
        {% endif %}
    {% endmacro %}

    {% set extrasTemplates = {
        1: {
            "t": "current-user-data",
            "n": "Populate a form with Current User Data",
            "d": "This example shows you how to populate a form with some User account values from the currently logged in user.",
        },
        2: {
            "t": "craft-entry-data",
            "n": "Populate a form with Craft Entry Data",
            "d": "This example shows how to populate some of a form's fields with some data from a Craft Entry.",
        },
        3: {
            "t": "date-pickers",
            "n": "Adjustments to a Date Field Date/Time Picker",
            "d": "This example shows some ways to manipulate a Date & Time field type using Freeform's developer events.",
        },
        4: {
            "t": "suppress-edit-submissions",
            "n": "Suppress Notifications when Editing Submissions",
            "d": "This example shows how to suppress email notifications and other integrations from being triggered when editing an existing submission.",
        },
        5: {
            "t": "js-override",
            "n": "Overriding Freeform JS behavior",
            "d": "This example shows how to manually override Freeform's built-in JS behavior inside a template.",
        },
        6: {
            "t": "submission-limit",
            "n": "Setting Submission Limits",
            "d": "This example shows how to set a limit for the number of submissions a form can have.",
        },
        7: {
            "t": "submission-duplicate",
            "n": "Checking Submission Duplicates",
            "d": "This example shows how to check if the user has already submitted the form when using the Limit Form Submission Rate setting.",
        },
        8: {
            "t": "twig-cache",
            "n": "Twig Template Caching on Forms",
            "d": "This example will show how to refresh the CSRF token and other parts of Freeform when using Twig Caching on a template that contains a form.",
        },
        9: {
            "t": "formatting-inside-template",
            "n": "Formatting Directly Inside Regular Template",
            "d": "This example shows how you can add formatting code directly inside a regular template.",
        },
        10: {
            "t": "manual-form",
            "n": "Manual Rendering of Forms",
            "d": "This example shows how to manually template a basic form.",
        },
        11: {
            "t": "manual-multipage",
            "n": "Manual Multi-Page Forms",
            "d": "This example shows how to manually template multi-page forms.",
        },
        12: {
            "t": "multiple-forms",
            "n": "Multiple Forms in the Same Page",
            "d": "This example shows how you might have the same form (or 2 similar ones) more than once in the same template.",
        },
        13: {
            "t": "parsley",
            "n": "Form Validation with Parsley",
            "d": "This example will show you how to implement form validation for your Freeform forms with Parsley JS.",
        },
        14: {
            "t": "relating-submission",
            "n": "Relating Submissions to Elements",
            "d": "This example will relate the newly created submission to another element via the Freeform Submission relation element field type.",
        },
        15: {
            "t": "form-field-type",
            "n": "Freeform Form Element Field Type",
            "d": "This example will show how to display and adjust forms that are assigned to Craft Entries via the Freeform Form element field type.",
        },
        16: {
            "t": "ajax-div-success",
            "n": "Alternate Success Markup from Div after AJAX Submit",
            "d": "This example shows how to override the default AJAX success message and load a success message from a `div` instead.",
        },
        17: {
            "t": "ajax-template-success",
            "n": "Alternate Success from Template after AJAX Submit",
            "d": "This example shows how to override the default AJAX success message and load a success message from another template instead.",
        },
        18: {
            "t": "override-return-url",
            "n": "Overiding Success Return URL",
            "d": "This example shows how to manipulate a form to allow a user to override the Return URL for successful submits.",
        },
        19: {
            "t": "success-same-page",
            "n": "Returning Success to Same Page",
            "d": "This example shows how to have a successful submit return to the same page with a success query in the URL.",
        }
    } %}

    <div class="freeform-nav">
        <a href="{{ siteUrl }}demo/" class="freeform-logo">
            <img src="{{ siteUrl }}assets/demo/images/freeform.svg" alt="Freeform Demo"><h1>Freeform Demo</h1>
        </a>
        {% if demoArea == "templates" or craft.app.request.segment(2) is empty %}
            This section {{ craft.app.request.segment(4) ? "has" : "will" }} automatically {{ craft.app.request.segment(4) ? "loaded" : "load" }} the
            <div class="freeform-nav-dropdown">
                <span class="freeform-nav-button">
                    {{ pageTemplate ? pageTemplate|title|replace({'-':' '}) : 'Select a template...' }}
                </span>
                <div class="freeform-nav-dropdown-content">
                {% for pageTemplate in (["basic-light", "basic-dark", "basic-floating-labels", "conversational", "multipage-all-fields", "divider", "grid", "flexbox", "divider", "bootstrap-5", "bootstrap-5-dark", "bootstrap-5-floating-labels", "tailwind-4-light", "tailwind-4-dark", "tailwind-3", "tailwind-3-dark", "foundation-6"]) -%}
                    {{ _self.pageTemplateItem(pageTemplate, formHandle) }}
                {%- endfor %}
                </div>
            </div>
            formatting template for the
            <div class="freeform-nav-dropdown">
                <span class="freeform-nav-button{{ form.name is not defined ? " dropdown-glow"}}">
                    {% set formColor = form.color is defined ? 'style="background:' ~ form.color ~ '"' : 'style="display:none"' %}
                    <div class="freeform-form-circle" {{ formColor|raw }}></div>{{ form.name is defined ? form.name : 'Select a form...' }}
                </span>
                <div class="freeform-nav-dropdown-content">
                {% set forms = freeform.forms %}
                {% for form in forms %}
                    {% set formColor = 'style="background:' ~ form.color ~ '"' %}
                    <a{{ formHandle == form.handle ? ' class="active"' }} href="{{ siteUrl }}demo/templates/{{ pageTemplate ? pageTemplate : 'basic-light' }}/{{ form.handle }}"><div class="freeform-form-circle" {{ formColor|raw }}></div>{{ form.name }}</a>
                {% endfor %}
                </div>
            </div>
            form.
        {% elseif demoArea == "submissions" %}
            {{ craft.app.request.segment(3) ? "Viewing" : "View" }} submissions for the
            <div class="freeform-nav-dropdown">
                <span class="freeform-nav-button{{ form.name is not defined ? " dropdown-glow"}}">
                    <div class="freeform-form-circle"{{ form.name is defined ? ' style=background:' ~ form.color : ' style=display:none' }}></div>{{ form.name is defined ? form.name : 'Select a form...' }}
                </span>
                <div class="freeform-nav-dropdown-content">
                {% set forms = freeform.forms %}
                {% for form in forms %}
                    <a{{ formHandle == form.handle ? ' class="active"' }} href="{{ siteUrl }}demo/submissions/{{ form.handle }}"><div class="freeform-form-circle" style="background: {{ form.color }}"></div>{{ form.name }} ({{ freeform.submissions({formId: form.id}).count }})</a>
                {% endfor %}
                </div>
            </div>
            form.
        {% elseif demoArea == "custom" %}
            This section {{ craft.app.request.segment(3) ? "has" : "will" }} automatically {% if craft.app.request.segment(3) %}loaded the <code>{{ form.settings.formattingTemplate }}</code>{% else %}load the{% endif %} formatting template for the 
            <div class="freeform-nav-dropdown">
                <span class="freeform-nav-button{{ form.name is not defined ? " dropdown-glow"}}">
                    <div class="freeform-form-circle"{{ form.name is defined ? ' style=background:' ~ form.color : ' style=display:none' }}></div>{{ form.name is defined ? form.name : 'Select a form...' }}
                </span>
                <div class="freeform-nav-dropdown-content">
                {% set forms = freeform.forms %}
                {% for form in forms %}
                    <a{{ formHandle == form.handle ? ' class="active"' }} href="{{ siteUrl }}demo/custom/{{ form.handle }}"><div class="freeform-form-circle" style="background: {{ form.color }}"></div>{{ form.name }} ({{ freeform.submissions({formId: form.id}).count }})</a>
                {% endfor %}
                </div>
            </div>
            form. Consider forcing a
            <div class="freeform-nav-dropdown">
                <span class="freeform-nav-button">
                    {{ "sample template"|t('freeform') }}
                </span>
                <div class="freeform-nav-dropdown-content">
                {% for pageTemplate in (["basic-light", "basic-dark", "basic-floating-labels", "conversational", "multipage-all-fields", "divider", "grid", "flexbox", "divider", "bootstrap-5", "bootstrap-5-dark", "bootstrap-5-floating-labels", "tailwind-3", "tailwind-3-dark", "foundation-6"]) -%}
                    {{ _self.pageTemplateItem(pageTemplate, formHandle) }}
                {%- endfor %}
                </div>
            </div>
            instead.
        {% elseif demoArea == "extras" %}
            Try another extras demo:
            <div class="freeform-nav-dropdown">
                <span class="freeform-nav-button">
                    Please select...
                </span>
                <div class="freeform-nav-dropdown-content extras-dropdown">
                {% for extras in extrasTemplates -%}
                    {{ _self.extrasItem(extras['t'], extras['n']) }}
                {%- endfor %}
                </div>
            </div>
        {% else %}
        {% endif %}
        <div class="freeform-menu">
            <input id="freeform-menu-toggle" type="checkbox" />
            <label class="freeform-menu-hamburger" for="freeform-menu-toggle">
                <div class="top"></div>
                <div class="top-inner"></div>
                <div class="meat"></div>
                <div class="bottom-inner"></div>
                <div class="bottom"></div>
            </label>
            <div class="freeform-menu-list">
                <a href="{{ siteUrl }}demo/templates" class="{{ demoArea == 'templates' ? ' active' }}">Templates</a>
                <a href="{{ siteUrl }}demo/submissions" class="{{ demoArea == 'submissions' ? ' active' }}">Submissions</a>
                <a href="{{ siteUrl }}demo/custom" class="{{ demoArea == 'custom' ? ' active' }}">Custom</a>
                <a href="{{ siteUrl }}demo/extras" class="{{ siteUrl == 'extras' ? ' active' }}">Extras</a>
            </div>
        </div>
    </div>

    <div class="freeform-form-content">

{% block content %}{% endblock %}

    </div>

{% block footerJs %}{% endblock %}

{% if demoArea == "extras" %}
    <script>
        document.addEventListener('freeform-ready', (event) => {
            event.options.scrollOffset = -200;
        });
    </script>
{% endif %}

</body>
</html>