{#
  macros/forms.html - Form component macros for APEP.
  Import with: {% from "apep/macros/forms.html" import input, checkbox, radio, dropdown, date_picker,
                toggle, range_slider, file_upload %}

  Macros:
    input(name, label, type, allowed_chars, validate, placeholder, value, required, hint, resize)
    checkbox(name, options, hidden_name)
    radio(name, options, selected)
    dropdown(name, label, options, selected, required)
    date_picker(name, id, format, display, value, required, min_date, max_date, placeholder)
    toggle(name, label, checked, disabled, hint)
    range_slider(name, label, min, max, value, step, unit, hint)
    file_upload(name, label, url, accept, multiple, required, hint)

  CSS dependency: forms.css (loaded via ApepLoader.register("forms.css"))
  Author: sora7672
#}

{% from "apep/macros/helper.html" import alert %}


{#
  Renders a labeled text, email, password input, or resizable textarea with optional validation,
  character filtering, hint text, and inline error state.
  When type is "email", allowed_chars is ignored and email format validation
  is applied automatically regardless of the validate param.
  When resize is set, a <textarea> is rendered instead of <input>.

  @param name          {string}      - field name attribute, also used to build the id and error element id
  @param label         {string}      - visible label text
  @param type          {string}      - "text" | "email" | "password", default "text". Ignored when resize is set.
  @param allowed_chars {list}        - list of allowed char ranges, e.g. ["a-z", "A-Z", "0-9"].
                                       Ignored when type is "email" or resize is set.
  @param validate      {string}      - pass "email" to enforce email format on a text field explicitly.
                                       Automatically set when type is "email". Ignored when resize is set.
  @param placeholder   {string}      - placeholder text, default ""
  @param value         {string}      - prefilled value, default ""
  @param required      {bool}        - adds required and aria-required attributes, marks label with
                                       form-label-required class, default false
  @param hint          {string}      - muted helper text rendered below the input, optional
  @param resize        {string}      - renders a <textarea> instead of <input>.
                                       Allowed: "vertical" | "horizontal" | "both" | "none". Optional.
#}
{% macro input(name, label, type="text", allowed_chars=None, validate=None, placeholder="", value="", required=False, hint=None, resize=None) %}
{% if not name %}
    {{ alert("input: name is required", "Pass a non-empty string as the first argument.") }}
{% elif not label %}
    {{ alert("input: label is required", "Pass a non-empty string as the second argument.") }}
{% elif resize is not none and resize not in ["vertical", "horizontal", "both", "none"] %}
    {{ alert("input: invalid resize \"" ~ resize ~ "\"", "Allowed values: \"vertical\", \"horizontal\", \"both\", \"none\".") }}
{% elif resize is none and type not in ["text", "email", "password"] %}
    {{ alert("input: invalid type \"" ~ type ~ "\"", "Allowed values: \"text\", \"email\", \"password\".") }}
{% else %}
{% set _validate = "email" if type == "email" else validate %}
<div class="form-group">
    <label class="form-label {% if required %}form-label-required{% endif %}" for="field-{{ name }}">
        {{ label }}
    </label>
    {% if resize is not none %}
    <textarea
        class="form-input form-textarea"
        id="field-{{ name }}"
        name="{{ name }}"
        placeholder="{{ placeholder }}"
        style="resize: {{ resize }};"
        {% if required %}required aria-required="true"{% endif %}
    >{{ value }}</textarea>
    {% else %}
    <input
        class="form-input"
        type="{{ type }}"
        id="field-{{ name }}"
        name="{{ name }}"
        value="{{ value }}"
        placeholder="{{ placeholder }}"
        {% if required %}required aria-required="true"{% endif %}
        {% if allowed_chars and type != "email" %}data-allowed-chars="{{ allowed_chars | join('') }}"{% endif %}
        {% if _validate %}data-validate="{{ _validate }}"{% endif %}
    >
    {% endif %}
    {% if hint %}
    <p class="form-hint">{{ hint }}</p>
    {% endif %}
    <span class="form-error-text" id="error-{{ name }}" aria-live="polite"></span>
</div>
<script>ApepLoader.register("forms.css");</script>
<script>ApepLoader.register("form-validation.js", "defer");</script>
{% endif %}
{% endmacro %}


{#
  Renders a group of checkboxes. Each row is fully clickable, not just the label.
  Optionally writes a comma-joined string of all selected values into a hidden input,
  useful when the consuming backend expects a single field instead of repeated keys.

  @param name        {string} - base name attribute used for all checkbox inputs
  @param options     {list}   - list of {label, value, checked} dicts.
                                value falls back to label when omitted.
                                checked defaults to false when omitted.
  @param hidden_name {string} - if provided, renders a hidden input with this name
                                that is kept in sync with the selected values via checkbox.js.
                                Optional.
#}
{% macro checkbox(name, options, hidden_name=None) %}
{% if not name %}
    {{ alert("checkbox: name is required", "Pass a non-empty string as the first argument.") }}
{% elif not options %}
    {{ alert("checkbox: options is required", "Pass a list of {label, value} dicts.") }}
{% else %}
<div class="form-group checkbox-group" data-checkbox-group="{{ name }}">
    {% for option in options %}
    {% set opt_value = option.value if option.value is defined else option.label %}
    {% set is_checked = option.checked is defined and option.checked %}
    <div class="form-checkbox-row checkbox-row-clickable {% if is_checked %}checkbox-row-checked{% endif %}" data-value="{{ opt_value }}">
        <input
            type="checkbox"
            id="checkbox-{{ name }}-{{ loop.index }}"
            name="{{ name }}"
            value="{{ opt_value }}"
            {% if is_checked %}checked{% endif %}
        >
        <label for="checkbox-{{ name }}-{{ loop.index }}" class="checkbox-label">
            {{ option.label }}
        </label>
    </div>
    {% endfor %}
    {% if hidden_name %}
    <input type="hidden" name="{{ hidden_name }}" id="hidden-{{ name }}" value="">
    {% endif %}
</div>
<script>ApepLoader.register("forms.css");</script>
<script>ApepLoader.register("checkbox.js", "blocking");</script>
{% endif %}
{% endmacro %}


{#
  Renders a group of radio buttons. Each row is fully clickable, not just the label.
  Each option also gets a hidden input that is enabled only when its radio is selected,
  so the true value is always submitted even if the browser strips radio names on submit.
  The selected param takes priority over option.checked when both are present.

  @param name     {string} - input name attribute shared by all radio inputs in the group
  @param options  {list}   - list of {label, value, checked} dicts.
                             value falls back to label when omitted.
                             checked defaults to false when omitted.
  @param selected {string} - pre-selected value. Takes priority over option.checked. Optional.
#}
{% macro radio(name, options, selected=None) %}
{% if not name %}
    {{ alert("radio: name is required", "Pass a non-empty string as the first argument.") }}
{% elif not options %}
    {{ alert("radio: options is required", "Pass a list of {label, value} dicts.") }}
{% else %}
<div class="form-group radio-group" data-radio-group="{{ name }}">
    {% for option in options %}
    {% set opt_value = option.value if option.value is defined else option.label %}
    {% if selected %}
        {% set is_checked = (selected == opt_value) %}
    {% else %}
        {% set is_checked = (option.checked is defined and option.checked) %}
    {% endif %}
    <div class="form-radio-row radio-row-clickable {% if is_checked %}radio-row-checked{% endif %}" data-value="{{ opt_value }}">
        <input
            type="radio"
            id="radio-{{ name }}-{{ loop.index }}"
            name="{{ name }}"
            value="{{ opt_value }}"
            {% if is_checked %}checked{% endif %}
        >
        <label for="radio-{{ name }}-{{ loop.index }}" class="radio-label">
            {{ option.label }}
        </label>
        <input type="hidden"
               name="{{ name }}_value"
               id="hidden-radio-{{ name }}-{{ loop.index }}"
               value="{{ opt_value }}"
               {% if not is_checked %}disabled{% endif %}>
    </div>
    {% endfor %}
</div>
<script>ApepLoader.register("forms.css");</script>
<script>ApepLoader.register("radio.js", "blocking");</script>
{% endif %}
{% endmacro %}


{#
  Renders a labeled native <select> dropdown. Display labels are shown in the
  select element; option values are used as the submitted form value directly.
  A placeholder "Please select" option is always prepended with an empty value.

  @param name     {string} - select name attribute, also used to build the id and error element id
  @param label    {string} - visible label text
  @param options  {list}   - list of {label, value} dicts.
                             value falls back to label when omitted.
  @param selected {string} - pre-selected value matched against option values. Optional.
  @param required {bool}   - adds required and aria-required attributes, marks label with
                             form-label-required class, default false
#}
{% macro dropdown(name, label, options, selected=None, required=False) %}
{% if not name %}
    {{ alert("dropdown: name is required", "Pass a non-empty string as the first argument.") }}
{% elif not label %}
    {{ alert("dropdown: label is required", "Pass a non-empty string as the second argument.") }}
{% elif not options %}
    {{ alert("dropdown: options is required", "Pass a list of {label, value} dicts.") }}
{% else %}
<div class="form-group">
    <label class="form-label {% if required %}form-label-required{% endif %}" for="dropdown-{{ name }}">
        {{ label }}
    </label>
    <select
        class="form-select"
        id="dropdown-{{ name }}"
        name="{{ name }}"
        {% if required %}required aria-required="true" data-required="true"{% endif %}
    >
        <option value="">Please select</option>
        {% for option in options %}
        {% set opt_value = option.value if option.value is defined else option.label %}
        <option
            value="{{ opt_value }}"
            {% if selected and selected == opt_value %}selected{% endif %}
        >{{ option.label }}</option>
        {% endfor %}
    </select>
    <span class="form-error-text" id="error-{{ name }}" aria-live="polite"></span>
</div>
<script>ApepLoader.register("forms.css");</script>
<script>ApepLoader.register("form-validation.js", "defer");</script>
{% endif %}
{% endmacro %}


{#
  Renders a styled date picker with a text input, calendar icon button, and an
  overlay panel containing year/month navigation and a day grid.
  The overlay supports quick-select grids for year (5x5) and month (3x4).
  Validation and formatting are handled by date_picker.js.

  @param name        {string} - input name attribute for form submit
  @param id          {string} - explicit id for the input element. Falls back to name when omitted.
  @param format      {string} - date format token string, e.g. "yyyy.mm.dd". Default "yyyy.mm.dd".
                                Shown as placeholder when placeholder is not set.
  @param display     {string} - display mode passed to date_picker.js. Default "readable".
  @param value       {string} - prefilled value matching the chosen format. Default "".
  @param required    {bool}   - adds required attribute to the input. Default false.
  @param min_date    {string} - earliest selectable date in the chosen format. Default "".
  @param max_date    {string} - latest selectable date in the chosen format. Default "".
  @param placeholder {string} - placeholder text. Falls back to the format string when omitted.
#}
{% macro date_picker(
    name,
    id=none,
    format="yyyy.mm.dd",
    display="readable",
    value="",
    required=false,
    min_date="",
    max_date="",
    placeholder=""
) %}
{% set _id = id if id else name %}
{% set _placeholder = placeholder if placeholder else format %}
<div class="apep-datepicker" data-format="{{ format }}" data-display="{{ display }}" data-min="{{ min_date }}" data-max="{{ max_date }}" id="dp-wrap-{{ _id }}" style="line-height: var(--line-height-snug);">

    <div class="apep-datepicker-input-row">
        <input
            type="text"
            class="apep-datepicker-input form-input"
            id="{{ _id }}"
            name="{{ name }}"
            value="{{ value }}"
            placeholder="{{ _placeholder }}"
            autocomplete="off"
            {% if required %}required{% endif %}
            aria-haspopup="true"
            aria-expanded="false"
            aria-controls="dp-overlay-{{ _id }}"
        />
        <button type="button" class="apep-datepicker-icon-btn" tabindex="-1" aria-label="Open calendar">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect x="1" y="2" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/>
                <path d="M1 6H15" stroke="currentColor" stroke-width="1.5"/>
                <path d="M5 1V4M11 1V4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
            </svg>
        </button>
    </div>

    <div class="apep-datepicker-hint" id="dp-hint-{{ _id }}" aria-live="polite"></div>
    <div class="apep-datepicker-error" id="dp-error-{{ _id }}" aria-live="assertive"></div>

    <div class="apep-datepicker-overlay" id="dp-overlay-{{ _id }}" role="dialog" aria-modal="true" aria-label="Date picker" hidden>

        <!-- Year row -->
        <div class="apep-dp-year-row">
            <button type="button" class="apep-dp-nav-btn apep-dp-prev-year" tabindex="-1" aria-label="Previous year">&#8249;</button>
            <button type="button" class="apep-dp-year-btn" aria-label="Select year">
                <span class="apep-dp-year-label"></span>
            </button>
            <button type="button" class="apep-dp-nav-btn apep-dp-next-year" tabindex="-1" aria-label="Next year">&#8250;</button>
        </div>

        <!-- Year quick-select (5x5 grid) -->
        <div class="apep-dp-year-qs" hidden tabindex="0" aria-label="Year selection"></div>

        <!-- Month row -->
        <div class="apep-dp-month-row">
            <button type="button" class="apep-dp-nav-btn apep-dp-prev-month" tabindex="-1" aria-label="Previous month">&#8249;</button>
            <button type="button" class="apep-dp-month-btn" aria-label="Select month">
                <span class="apep-dp-month-label"></span>
            </button>
            <button type="button" class="apep-dp-nav-btn apep-dp-next-month" tabindex="-1" aria-label="Next month">&#8250;</button>
        </div>

        <!-- Month quick-select (3x4 grid) -->
        <div class="apep-dp-month-qs" hidden tabindex="0" aria-label="Month selection">
            {% for m in ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"] %}
            <button type="button" class="apep-dp-qs-month-btn" data-month="{{ loop.index }}">{{ m }}</button>
            {% endfor %}
        </div>

        <!-- Weekday headers -->
        <div class="apep-dp-weekdays">
            {% for d in ["Mo","Tu","We","Th","Fr","Sa","Su"] %}
            <span>{{ d }}</span>
            {% endfor %}
        </div>

        <!-- Day grid -->
        <div class="apep-dp-grid" role="grid" tabindex="0" aria-label="Calendar days"></div>

    </div>
</div>

<script>
    ApepLoader.register("date_picker.css");
    ApepLoader.register("date_picker.js", "defer");
</script>
{% endmacro %}


{#
  Renders a toggle switch as an accessible checkbox with a styled track and thumb.
  Visually replaces a standard checkbox for on/off states.

  @param name     {string} - input name attribute, also used to build the id
  @param label    {string} - visible label text
  @param checked  {bool}   - initial checked state, default false
  @param disabled {bool}   - disables the toggle, default false
  @param hint     {string} - muted helper text rendered below the toggle. Optional.
#}
{% macro toggle(name, label, checked=False, disabled=False, hint=None) %}
{% if not name %}
    {{ alert("toggle: name is required", "Pass a non-empty string as the first argument.") }}
{% elif not label %}
    {{ alert("toggle: label is required", "Pass a non-empty string as the second argument.") }}
{% else %}
<div class="form-group">
    <label class="toggle-label {% if disabled %}toggle-label-disabled{% endif %}" for="toggle-{{ name }}">
        <input
            type="checkbox"
            class="toggle-input"
            id="toggle-{{ name }}"
            name="{{ name }}"
            {% if checked %}checked{% endif %}
            {% if disabled %}disabled aria-disabled="true"{% endif %}
            role="switch"
            aria-checked="{{ 'true' if checked else 'false' }}"
        >
        <span class="toggle-track">
            <span class="toggle-thumb"></span>
        </span>
        <span class="toggle-text">{{ label }}</span>
    </label>
    {% if hint %}
    <span class="form-hint">{{ hint }}</span>
    {% endif %}
</div>
<script>ApepLoader.register("forms.css");</script>
{% endif %}
{% endmacro %}


{#
  Renders a range slider with a synchronized number input.
  The number input allows precise entry; the slider allows quick sweeping.
  Both stay in sync via range-slider.js.
  required is intentionally omitted - a range input always has a value (minimum min).

  @param name  {string} - input name attribute for both the range and number input
  @param label {string} - visible label text
  @param min   {number} - minimum value, default 0
  @param max   {number} - maximum value, default 100
  @param value {number} - initial value, default equal to min
  @param step  {number} - step increment, default 1
  @param unit  {string} - optional unit label shown inside the number box, e.g. "px" or "%"
  @param hint  {string} - muted helper text rendered below the slider. Optional.
#}
{% macro range_slider(name, label, min=0, max=100, value=None, step=1, unit=None, hint=None) %}
{% if not name %}
    {{ alert("range_slider: name is required", "Pass a non-empty string as the first argument.") }}
{% elif not label %}
    {{ alert("range_slider: label is required", "Pass a non-empty string as the second argument.") }}
{% else %}
{% set _value = value if value is not none else min %}
<div class="form-group">
    <label class="form-label" for="range-{{ name }}">
        {{ label }}
    </label>
    <div class="range-slider-wrapper" data-range-name="{{ name }}">
        <input
            type="range"
            class="range-slider-track"
            id="range-{{ name }}"
            name="{{ name }}"
            min="{{ min }}"
            max="{{ max }}"
            value="{{ _value }}"
            step="{{ step }}"
            data-range-slider
        >
        <div class="range-slider-input-group">
            <input
                type="number"
                class="range-slider-number"
                id="range-number-{{ name }}"
                min="{{ min }}"
                max="{{ max }}"
                value="{{ _value }}"
                step="{{ step }}"
                data-range-number
                aria-label="{{ label }} value"
            >
            {% if unit %}
            <span class="range-slider-unit">{{ unit }}</span>
            {% endif %}
        </div>
    </div>
    {% if hint %}
    <span class="form-hint">{{ hint }}</span>
    {% endif %}
</div>
<script>ApepLoader.register("forms.css");</script>
<script>ApepLoader.register("range-slider.js", "defer");</script>
{% endif %}
{% endmacro %}


{#
  Renders a styled file upload field with drag-and-drop zone.
  Supports two upload modes controlled by the mode param:

  "direct" (default)
    Files are POSTed immediately after selection to url as multipart/form-data
    via file-upload.js. Expects JSON response: {ok: true} or {ok: false, message: "..."}.

  "cache"
    Files are held in memory until the surrounding <form> is submitted.
    On submit, file-upload.js injects the cached files into the hidden input
    so they travel with the normal form POST. url is not required in this mode.
    Must be placed inside a <form> element.

  File type validation uses extension + MIME type (browser-provided).
  Final authoritative type check must always happen server-side.

  @param name     {string} - input name attribute for the file input
  @param label    {string} - visible label text
  @param url      {string} - upload endpoint URL. Required for mode="direct". Optional for mode="cache".
  @param mode     {string} - "direct" | "cache", default "direct"
  @param accept   {string} - accepted file types, e.g. ".pdf,.docx" or "image/*". Optional.
  @param multiple {bool}   - allow selecting multiple files, default false
  @param max_size {number} - max file size in bytes. Validated client-side before upload. Optional.
  @param required {bool}   - marks label as required, default false
  @param hint     {string} - muted helper text rendered below the zone. Optional.
#}
{% macro file_upload(name, label, url=None, mode="direct", accept=None, multiple=False, max_size=None, required=False, hint=None) %}
{% if not name %}
    {{ alert("file_upload: name is required", "Pass a non-empty string as the first argument.") }}
{% elif not label %}
    {{ alert("file_upload: label is required", "Pass a non-empty string as the second argument.") }}
{% elif mode not in ["direct", "cache"] %}
    {{ alert("file_upload: invalid mode \"" ~ mode ~ "\"", "Allowed values: \"direct\", \"cache\".") }}
{% elif mode == "direct" and not url %}
    {{ alert("file_upload: url is required for mode=\"direct\"", "Pass the upload endpoint URL or switch to mode=\"cache\".") }}
{% else %}
<div class="form-group">
    <label class="form-label {% if required %}form-label-required{% endif %}">
        {{ label }}
    </label>
    <div
        class="file-upload-zone"
        data-upload-name="{{ name }}"
        data-upload-mode="{{ mode }}"
        {% if url %}data-upload-url="{{ url }}"{% endif %}
        {% if accept %}data-upload-accept="{{ accept }}"{% endif %}
        {% if multiple %}data-upload-multiple="true"{% endif %}
        {% if max_size %}data-upload-max-size="{{ max_size }}"{% endif %}
    >
        <input
            type="file"
            class="file-upload-input"
            id="file-{{ name }}"
            name="{{ name }}"
            {% if accept %}accept="{{ accept }}"{% endif %}
            {% if multiple %}multiple{% endif %}
            {% if required %}required aria-required="true"{% endif %}
            tabindex="-1"
            aria-hidden="true"
        >
        <span class="file-upload-icon" aria-hidden="true"></span>
        <span class="file-upload-text">
            <span class="file-upload-primary">Drop file here</span>
            <span class="file-upload-secondary">or <span class="file-upload-link">browse</span></span>
        </span>
        {% if accept %}
        <span class="file-upload-accept">{{ accept }}</span>
        {% endif %}
        <div class="file-upload-preview" aria-live="polite"></div>
        <div class="file-upload-status" aria-live="polite"></div>
    </div>
    {% if hint %}
    <span class="form-hint">{{ hint }}</span>
    {% endif %}
</div>
<script>ApepLoader.register("forms.css");</script>
<script>ApepLoader.register("file-upload.js", "defer");</script>
{% endif %}
{% endmacro %}