{% load ui_classes ui_props %}

<c-vars name=""
        value=""
        start_name=""
        end_name=""
        mode="single"
        placeholder=""
        min=""
        max=""
        today=""
        open_to=""
        force_open_to="False"
        months="0"
        first_day_of_week="0"
        locale=""
        show_outside_days="False"
        show_week_numbers="False"
        fixed_weeks="True"
        selectable_header="False"
        with_today="False"
        clearable="False"
        disabled="False"
        readonly="False"
        required="False"
        invalid="False"
        side="bottom"
        align="start"
        offset="0"
        gap="4"
        mobile="modal"
        variant="enhanced"
        color="neutral"
        close="select"
        presets
        presets_position="left"
        preset=""
        preset_name=""
        trigger_class=""
        input_class=""
        popover_class=""
        calendar_class=""
        presets_class=""
        preset_class=""
        form=""
        label=""
        class="" />
{% if variant == "native" %}
    {% ui_class "ui.date-picker" "nativeWrapper" class=class as native_wrapper_class %}
    {% ui_class "ui.date-picker" "native" class=input_class as native_class %}
    <div data-ui-date-picker-native-wrapper class="{{ native_wrapper_class }}">
        <input type="date"
               data-ui-date-picker-native
               name="{{ name }}"
               value="{{ value }}"
               min="{{ min }}"
               max="{{ max }}"
               class="{{ native_class }}"
               {% if disabled|ui_bool %}disabled{% endif %}
               {% if readonly|ui_bool %}readonly{% endif %}
               {% if required|ui_bool %}required{% endif %}
               {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
               {% if form %}form="{{ form }}"{% endif %}
               {{ attrs }}>
    </div>
{% else %}
    {% ui_class "ui.date-picker" "root" class=class as root_class %}
    {% ui_class "ui.date-picker" "trigger" class=trigger_class as trigger_class_resolved %}
    {% ui_class "ui.date-picker" "input" class=input_class as input_class_resolved %}
    {% ui_class "ui.date-picker" "icon" as icon_class %}
    {% ui_class "ui.date-picker" "action" as action_class %}
    {% ui_class "ui.date-picker" "popover" class=popover_class as popover_class_resolved %}
    {% if slot and "data-ui-date-picker-presets" in slot %}
        {% ui_class "ui.date-picker" "panel" presetsPosition=presets_position hasPresets=True as panel_class %}
    {% else %}
        {% ui_class "ui.date-picker" "panel" presetsPosition=presets_position hasPresets=False as panel_class %}
    {% endif %}
    {% ui_class "ui.date-picker" "calendarWrap" as calendar_wrap_class %}
    {% ui_class "ui.date-picker" "calendar" class=calendar_class as calendar_class_resolved %}
    {% ui_class "ui.date-picker" "footer" as footer_class %}
    <div x-data="UiDatePicker"
         x-bind="root"
         data-ui-date-picker
         data-state="closed"
         data-name="{{ name }}"
         data-value="{{ value }}"
         data-start-name="{{ start_name }}"
         data-end-name="{{ end_name }}"
         data-mode="{{ mode }}"
         data-placeholder="{{ placeholder }}"
         data-min="{{ min }}"
         data-max="{{ max }}"
         data-today="{{ today }}"
         data-open-to="{{ open_to }}"
         {% if force_open_to|ui_bool %}data-force-open-to="true"{% endif %}
         data-months="{{ months }}"
         data-first-day-of-week="{{ first_day_of_week }}"
         data-locale="{{ locale }}"
         {% if show_outside_days|ui_bool %}data-show-outside-days="true"{% endif %}
         {% if show_week_numbers|ui_bool %}data-show-week-numbers="true"{% endif %}
         {% if fixed_weeks|ui_bool %}data-fixed-weeks="true"{% endif %}
         {% if selectable_header|ui_bool %}data-selectable-header="true"{% endif %}
         {% if with_today|ui_bool %}data-with-today="true"{% endif %}
         {% if clearable|ui_bool %}data-clearable="true"{% endif %}
         {% if disabled|ui_bool %}data-disabled="true"{% endif %}
         {% if readonly|ui_bool %}data-readonly="true"{% endif %}
         {% if required|ui_bool %}data-required="true"{% endif %}
         {% if invalid|ui_bool %}data-invalid="true"{% endif %}
         data-side="{{ side }}"
         data-align="{{ align }}"
         data-offset="{{ offset }}"
         data-gap="{{ gap }}"
         data-mobile="{{ mobile }}"
         data-variant="{{ variant }}"
         data-color="{{ color }}"
         data-close="{{ close }}"
         data-presets="{{ presets }}"
         data-presets-position="{{ presets_position }}"
         data-preset="{{ preset }}"
         data-preset-name="{{ preset_name }}"
         data-trigger-class="{{ trigger_class }}"
         data-input-class="{{ input_class }}"
         data-popover-class="{{ popover_class }}"
         data-calendar-class="{{ calendar_class }}"
         data-presets-class="{{ presets_class }}"
         data-preset-class="{{ preset_class }}"
         data-form="{{ form }}"
         data-class="{{ class }}"
         class="{{ root_class }}"
         {{ attrs }}>
        {% if trigger %}
            <input type="text"
                   data-ui-date-picker-input
                   class="sr-only"
                   value="{{ value }}"
                   tabindex="-1"
                   {% if mode == "single" %}name="{{ name }}"{% endif %}
                   {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
                   {% if disabled|ui_bool %}disabled{% endif %}
                   {% if readonly|ui_bool %}readonly{% endif %}
                   {% if required|ui_bool and mode == "single" %}required{% endif %}
                   {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
                   {% if label %}aria-label="{{ label }}"{% endif %}
                   autocomplete="off">
            {{ trigger }}
        {% else %}
            <div data-ui-date-picker-trigger
                 data-ui-control
                 data-state="closed"
                 data-variant="{{ variant }}"
                 {% if disabled|ui_bool %}data-disabled="true"{% endif %}
                 {% if invalid|ui_bool %}data-invalid="true"{% endif %}
                 class="{{ trigger_class_resolved }}">
                <c-component is="icons.calendar"
                             data-ui-date-picker-trigger-icon
                             class="{{ icon_class }}"
                             aria-hidden="true" />
                <input type="text"
                       data-ui-date-picker-input
                       class="{{ input_class_resolved }}"
                       value="{{ value }}"
                       {% if mode == "single" %}name="{{ name }}"{% endif %}
                       {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
                       {% if disabled|ui_bool %}disabled{% endif %}
                       {% if readonly|ui_bool %}readonly{% endif %}
                       {% if required|ui_bool and mode == "single" %}required{% endif %}
                       {% if invalid|ui_bool %}aria-invalid="true"{% endif %}
                       {% if label %}aria-label="{{ label }}"{% endif %}
                       autocomplete="off">
                {% if clearable|ui_bool %}
                    <button type="button"
                            data-ui-date-picker-clear
                            class="{{ action_class }}"
                            aria-label="Clear date">
                        <c-component is="icons.close" class="size-icon-xs fill-current" aria-hidden="true" />
                    </button>
                {% endif %}
                <button type="button"
                        data-ui-date-picker-toggle
                        aria-haspopup="dialog"
                        aria-expanded="false"
                        class="{{ action_class }}"
                        aria-label="Toggle calendar">
                    <c-component is="icons.chevron__down" class="{{ icon_class }}" aria-hidden="true" />
                </button>
            </div>
        {% endif %}
        <div data-ui-date-picker-hidden-inputs>
            {% if mode == "range" and name and not start_name and not end_name and value %}
                <input type="hidden"
                       name="{{ name }}"
                       value="{{ value }}"
                       data-ui-date-picker-hidden-input
                       {% if form %}form="{{ form }}"{% endif %}>
            {% endif %}
        </div>
        <div data-ui-date-picker-preset-inputs>
            {% if preset_name and preset %}
                <input type="hidden"
                       name="{{ preset_name }}"
                       value="{{ preset }}"
                       data-ui-date-picker-preset-input
                       {% if form %}form="{{ form }}"{% endif %}>
            {% endif %}
        </div>
        <div data-ui-date-picker-popover
             data-state="closed"
             role="dialog"
             aria-modal="false"
             tabindex="-1"
             popover="manual"
             hidden
             class="{{ popover_class_resolved }}">
            <div data-ui-date-picker-panel
                 data-presets-position="{{ presets_position }}"
                 class="{{ panel_class }}">
                {% if slot and "data-ui-date-picker-presets" in slot %}{{ slot }}{% endif %}
                <div data-ui-date-picker-calendar-wrap class="{{ calendar_wrap_class }}">
                    {% if with_today|ui_bool %}
                        <button type="button"
                                data-ui-date-picker-today
                                data-ui-date-picker-calendar-today
                                aria-label="Go to today">
                            <span data-ui-date-picker-today-icon aria-hidden="true">
                                <span data-ui-date-picker-today-day></span>
                            </span>
                        </button>
                    {% endif %}
                    {% if mode == "range" %}
                        <calendar-range data-ui-date-picker-calendar value="{{ value }}" format-weekday="short" class="{{ calendar_class_resolved }}">
                        <span slot="previous" data-ui-date-picker-calendar-icon aria-label="Previous month">
                            <c-component is="icons.chevron__right"
                                         class="size-icon fill-current rotate-180"
                                         aria-hidden="true" />
                        </span>
                        <span slot="next" data-ui-date-picker-calendar-icon aria-label="Next month">
                            <c-component is="icons.chevron__right" class="size-icon fill-current" aria-hidden="true" />
                        </span>
                        {% if selectable_header|ui_bool %}
                            <calendar-select-month slot="heading" format-month="short"></calendar-select-month>
                            <calendar-select-year slot="heading" max-years="222"></calendar-select-year>
                        {% endif %}
                        <calendar-month></calendar-month>
                        <calendar-month offset="1"></calendar-month>
                        </calendar-range>
                    {% else %}
                        <calendar-date data-ui-date-picker-calendar value="{{ value }}" format-weekday="short" class="{{ calendar_class_resolved }}">
                        <span slot="previous" data-ui-date-picker-calendar-icon aria-label="Previous month">
                            <c-component is="icons.chevron__right"
                                         class="size-icon fill-current rotate-180"
                                         aria-hidden="true" />
                        </span>
                        <span slot="next" data-ui-date-picker-calendar-icon aria-label="Next month">
                            <c-component is="icons.chevron__right" class="size-icon fill-current" aria-hidden="true" />
                        </span>
                        {% if selectable_header|ui_bool %}
                            <calendar-select-month slot="heading" format-month="short"></calendar-select-month>
                            <calendar-select-year slot="heading" max-years="222"></calendar-select-year>
                        {% elif mode == "single" %}
                            <span slot="heading" data-ui-date-picker-calendar-heading></span>
                        {% endif %}
                        <calendar-month></calendar-month>
                        </calendar-date>
                    {% endif %}
                </div>
            </div>
            {% if clearable|ui_bool or mode == "range" and close == "confirm" %}
                <div data-ui-date-picker-footer class="{{ footer_class }}">
                    {% if clearable|ui_bool %}
                        <c-ui.button type="button" variant="ghost" size="sm" data-ui-date-picker-clear>
                            Clear
                        </c-ui.button>
                    {% endif %}
                    {% if mode == "range" and close == "confirm" %}
                        <c-ui.button type="button" variant="ghost" size="sm" data-ui-date-picker-cancel>
                            Cancel
                        </c-ui.button>
                        <c-ui.button type="button" variant="default" size="sm" data-ui-date-picker-apply>
                            Confirm
                        </c-ui.button>
                    {% endif %}
                </div>
            {% endif %}
            <div data-ui-date-picker-live class="sr-only" aria-live="polite"></div>
        </div>
    </div>
{% endif %}