{% load i18n %}{% spaceless %}
<div class="input-group cj-date-stepper{% if widget.size_suffix %} input-group{{ widget.size_suffix }}{% endif %}"
     data-date-format="{{ widget.date_format_js }}"
     x-data="{
       fmt: '{{ widget.date_format_js|escapejs }}',
       incDay() { window.cjDateStep(this.$refs.input, this.fmt, 1); },
       decDay() { window.cjDateStep(this.$refs.input, this.fmt, -1); },
       incWeek() { window.cjDateStep(this.$refs.input, this.fmt, 7); },
       decWeek() { window.cjDateStep(this.$refs.input, this.fmt, -7); },
       setToday() { window.cjDateSetToday(this.$refs.input, this.fmt); }
     }">
  {% if widget.week_stepper %}
    {% translate "Previous week" as t_prev_week %}
    <button type="button" class="btn btn-icon cj-date-decrement-week" tabindex="-1"
            title="{{ t_prev_week }} (Shift+↓)" aria-label="{{ t_prev_week }}"
            @click.prevent="decWeek()">
      <i class="ti ti-chevrons-left fs-2"></i>
    </button>
  {% endif %}
  {% if widget.day_stepper %}
    {% translate "Previous day" as t_prev_day %}
    <button type="button" class="btn btn-icon cj-date-decrement-day" tabindex="-1"
            title="{{ t_prev_day }} (↓)" aria-label="{{ t_prev_day }}"
            @click.prevent="decDay()">
      <i class="ti ti-chevron-left fs-2"></i>
    </button>
  {% endif %}
  <input x-ref="input" type="text" name="{{ widget.name }}"
         {% if widget.value != None and widget.value != "" %}value="{{ widget.value }}"{% endif %}
         {% if widget.day_stepper %}@keydown.up.prevent="incDay()" @keydown.down.prevent="decDay()"{% endif %}
         {% if widget.week_stepper %}@keydown.shift.up.prevent="incWeek()" @keydown.shift.down.prevent="decWeek()"{% endif %}
         {% include "django/forms/widgets/attrs.html" %}>
  {% if widget.day_stepper %}
    {% translate "Next day" as t_next_day %}
    <button type="button" class="btn btn-icon cj-date-increment-day" tabindex="-1"
            title="{{ t_next_day }} (↑)" aria-label="{{ t_next_day }}"
            @click.prevent="incDay()">
      <i class="ti ti-chevron-right fs-2"></i>
    </button>
  {% endif %}
  {% if widget.week_stepper %}
    {% translate "Next week" as t_next_week %}
    <button type="button" class="btn btn-icon cj-date-increment-week" tabindex="-1"
            title="{{ t_next_week }} (Shift+↑)" aria-label="{{ t_next_week }}"
            @click.prevent="incWeek()">
      <i class="ti ti-chevrons-right fs-2"></i>
    </button>
  {% endif %}
  {% if widget.today %}
    {% translate "Set to today" as t_today_title %}
    <button type="button" class="btn cj-date-today"
            title="{{ t_today_title }}" aria-label="{{ t_today_title }}"
            @click.prevent="setToday()">
      {% translate "Today" %}
    </button>
  {% endif %}
</div>
{% endspaceless %}