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

  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)

  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 }}">

    <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 %}