{#
  Showcase - Forms & Interaction
  Demonstrates all form and interactive macros available in APEP.
#}
{% set required_keys = [] %}

{% set dropdown_options = [
    {"label": "Option A", "value": "a"},
    {"label": "Option B", "value": "b"},
    {"label": "Option C", "value": "c"}
] %}

{% set checkbox_options = [
    {"label": "Option 1", "value": "1", "checked": true},
    {"label": "Option 2", "value": "2"},
    {"label": "Option 3", "value": "3"}
] %}

{% set radio_options = [
    {"label": "Yes",   "value": "yes", "checked": true},
    {"label": "No",    "value": "no"},
    {"label": "Maybe", "value": "maybe"}
] %}


<section style="padding: 2rem; max-width: 900px; display: flex; flex-direction: column; gap: 3rem;">
    <h1>Showcase - Forms & Interaction</h1>

    {# ---- Buttons ---------------------------------------------------- #}
    <div>
        <h2>Buttons - Variants</h2>
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4);">
            {{ apep.macros.btn(label="Primary",   variant="primary") }}
            {{ apep.macros.btn(label="Secondary", variant="secondary") }}
            {{ apep.macros.btn(label="Ghost",     variant="ghost") }}
            {{ apep.macros.btn(label="Danger",    variant="danger") }}
        </div>

        <h2 style="margin-top: 1.5rem;">Buttons - Sizes</h2>
        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-4);">
            {{ apep.macros.btn(label="Small",  variant="primary", size="sm") }}
            {{ apep.macros.btn(label="Medium", variant="primary", size="md") }}
            {{ apep.macros.btn(label="Large",  variant="primary", size="lg") }}
        </div>

        <h2 style="margin-top: 1.5rem;">Buttons - States</h2>
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4);">
            {{ apep.macros.btn(label="Disabled", variant="primary",   disabled=true) }}
            {{ apep.macros.btn(label="As Link",  variant="secondary", url="/contact") }}
        </div>
    </div>

    <hr>

    {# ---- Hero Button ------------------------------------------------ #}
    <div>
        <h2>Hero Button - Variants</h2>
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4);">
            {{ apep.macros.hero_btn(label="Primary CTA",   url="/contact",  subtitle="Free & non-binding", variant="primary") }}
            {{ apep.macros.hero_btn(label="Secondary CTA", url="/about_us",                                 variant="secondary") }}
        </div>
    </div>

    <hr>

    {# ---- Download Button -------------------------------------------- #}
    <div>
        <h2>Download Button - Variants</h2>
        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4);">
            {{ apep.macros.download_btn(label="Default", file_path="example.pdf", variant="default") }}
            {{ apep.macros.download_btn(label="Icon",    file_path="example.pdf", variant="icon") }}
            {{ apep.macros.download_btn(label="Minimal", file_path="example.pdf", variant="minimal") }}
        </div>
    </div>

    <hr>

    {# ---- Inputs ----------------------------------------------------- #}
    <div>
        <h2>Input - Types</h2>
        <div style="max-width: 480px; margin-top: var(--space-4);">
            {{ apep.macros.input(name="s_text",     label="Text",     type="text",     placeholder="Free text...") }}
            {{ apep.macros.input(name="s_email",    label="Email",    type="email",    required=true, hint="Your business email address") }}
            {{ apep.macros.input(name="s_password", label="Password", type="password") }}
        </div>

        <h2 style="margin-top: 1.5rem;">Input - Validation & Hints</h2>
        <div style="max-width: 480px; margin-top: var(--space-4);">
            {{ apep.macros.input(name="s_text_req",   label="Required Field",   type="text", required=true, placeholder="Cannot be empty") }}
            {{ apep.macros.input(name="s_text_hint",  label="With Hint",        type="text", hint="This is a helper text below the input") }}
            {{ apep.macros.input(name="s_text_chars", label="Only Letters a-z", type="text", allowed_chars=["a-z"]) }}
        </div>
    </div>

    <hr>

    {# ---- Dropdown --------------------------------------------------- #}
    <div>
        <h2>Dropdown</h2>
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-4);">
            <div style="flex: 1; min-width: 200px;">
                {{ apep.macros.dropdown(name="s_dropdown",     label="Default",      options=dropdown_options) }}
            </div>
            <div style="flex: 1; min-width: 200px;">
                {{ apep.macros.dropdown(name="s_dropdown_pre", label="Pre-selected", options=dropdown_options, selected="b") }}
            </div>
            <div style="flex: 1; min-width: 200px;">
                {{ apep.macros.dropdown(name="s_dropdown_req", label="Required",     options=dropdown_options, required=true) }}
            </div>
        </div>
    </div>

    <hr>

    {# ---- Checkbox & Radio ------------------------------------------- #}
    <div>
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: flex-start;">
            <div style="flex: 1; min-width: 220px;">
                <h2>Checkbox</h2>
                <div style="margin-top: var(--space-4);">
                    {{ apep.macros.checkbox(name="s_checkbox", options=checkbox_options) }}
                </div>
                <h2 style="margin-top: 1.5rem;">Checkbox - With Hidden Input</h2>
                <div style="margin-top: var(--space-4);">
                    {{ apep.macros.checkbox(name="s_checkbox_sync", options=checkbox_options, hidden_name="s_checkbox_sync_value") }}
                </div>
            </div>
            <div style="flex: 1; min-width: 220px;">
                <h2>Radio</h2>
                <div style="margin-top: var(--space-4);">
                    {{ apep.macros.radio(name="s_radio", options=radio_options) }}
                </div>
                <h2 style="margin-top: 1.5rem;">Radio - Pre-selected Override</h2>
                <div style="margin-top: var(--space-4);">
                    {{ apep.macros.radio(name="s_radio_pre", options=radio_options, selected="maybe") }}
                </div>
            </div>
        </div>
    </div>

    <hr>

    {# ---- Date Picker ------------------------------------------------ #}
    <div>
        <h2>Date Picker</h2>
        <p style="font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-4);">
            Full keyboard support: arrow keys &amp; WASD to navigate days, Enter to select, Escape to close.
        </p>
        <div style="display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-2);">
            <div style="flex: 1; min-width: 240px;">
                <p style="font-size: 0.875rem; margin-bottom: 0.5rem; opacity: 0.6;">Default</p>
                {{ apep.macros.date_picker(name="s_date") }}
            </div>
            <div style="flex: 1; min-width: 240px;">
                <p style="font-size: 0.875rem; margin-bottom: 0.5rem; opacity: 0.6;">With Min/Max & Value</p>
                {{ apep.macros.date_picker(name="s_date_range", min_date="2024.01.01", max_date="2025.12.31", value="2025.06.15") }}
            </div>
        </div>
    </div>

    <hr>

    {# ---- Theme & Language ------------------------------------------- #}
    <div>
        <h2>Theme Switch - Variants</h2>
        <div style="display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-4);">
            <div>
                <p style="font-size: 0.875rem; margin-bottom: 0.5rem; opacity: 0.6;">Icon</p>
                {{ apep.macros.theme_switch(variant="icon") }}
            </div>
            <div>
                <p style="font-size: 0.875rem; margin-bottom: 0.5rem; opacity: 0.6;">Slider</p>
                {{ apep.macros.theme_switch(variant="slider") }}
            </div>
            <div>
                <p style="font-size: 0.875rem; margin-bottom: 0.5rem; opacity: 0.6;">Floating (fixed bottom-right)</p>
                {{ apep.macros.theme_switch(variant="floating") }}
            </div>
        </div>

        <h2 style="margin-top: 1.5rem;">Language Switch</h2>
        <div style="margin-top: var(--space-4);">
            {{ apep.macros.lang_switch(current_lang="de") }}
        </div>
    </div>

</section>