{% load i18n %}

{% if mode == "daily" %}
  <button type="button"
          hx-get="{% url 'htmx_calendar:daily' calendar_slug=calendar.slug year=prev_year month=prev_month day=prev_day %}"
          hx-target="#{{ calendar.slug }}-daily-grid"
          hx-swap="outerHTML"
          class="flex h-9 w-12 items-center justify-center rounded-l-md pr-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50">
    <span class="sr-only">{% trans "Previous day" %}</span>
    <svg viewBox="0 0 20 20"
         fill="currentColor"
         data-slot="icon"
         aria-hidden="true"
         class="size-5">
      <path d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" fill-rule="evenodd" />
    </svg>
  </button>
{% elif mode == "weekly" %}
  <button type="button"
          hx-get="{% url 'htmx_calendar:weekly' calendar_slug=calendar.slug year=prev_year week=prev_week %}"
          hx-target="#{{ calendar.slug }}-weekly-grid"
          hx-swap="outerHTML"
          class="flex h-9 w-12 items-center justify-center rounded-l-md pr-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50">
    <span class="sr-only">{% trans "Previous week" %}</span>
    <svg viewBox="0 0 20 20"
         fill="currentColor"
         aria-hidden="true"
         class="size-5">
      <path d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" fill-rule="evenodd" />
    </svg>
  </button>
{% elif mode == "monthly" %}
  <button type="button"
          hx-get="{% url 'htmx_calendar:monthly' calendar_slug=calendar.slug year=prev_year month=prev_month %}"
          hx-target="#{{ calendar.slug }}-monthly-grid"
          hx-swap="outerHTML"
          class="flex h-9 w-12 items-center justify-center rounded-l-md pr-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50">
    <span class="sr-only">{% trans "Previous month" %}</span>
    <svg viewBox="0 0 20 20"
         fill="currentColor"
         data-slot="icon"
         aria-hidden="true"
         class="size-5">
      <path d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" fill-rule="evenodd" />
    </svg>
  </button>
{% elif mode == "yearly" %}
  <button type="button"
          hx-get="{% url 'htmx_calendar:yearly' calendar_slug=calendar.slug year=prev_year %}"
          hx-target="#{{ calendar.slug }}-yearly-grid"
          hx-swap="outerHTML"
          class="flex h-9 w-12 items-center justify-center rounded-l-md pr-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pr-0 md:hover:bg-gray-50">
    <span class="sr-only">{% trans "Previous year" %}</span>
    <svg viewBox="0 0 20 20"
         fill="currentColor"
         data-slot="icon"
         aria-hidden="true"
         class="size-5">
      <path d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" fill-rule="evenodd" />
    </svg>
  </button>
{% endif %}