{% load i18n %}

{% if mode == "daily" %}
  <button type="button"
          hx-get="{% url 'htmx_calendar:daily' calendar_slug=calendar.slug year=next_year month=next_month day=next_day %}"
          hx-target="#{{ calendar.slug }}-daily-grid"
          hx-swap="outerHTML"
          class="flex h-9 w-12 items-center justify-center rounded-r-md pl-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50">
    <span class="sr-only">{% trans "Next day" %}</span>
    <svg viewBox="0 0 20 20"
         fill="currentColor"
         data-slot="icon"
         aria-hidden="true"
         class="size-5">
      <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" 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=next_year week=next_week %}"
          hx-target="#{{ calendar.slug }}-weekly-grid"
          hx-swap="outerHTML"
          class="flex h-9 w-12 items-center justify-center rounded-r-md pl-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50">
    <span class="sr-only">{% trans "Next week" %}</span>
    <svg viewBox="0 0 20 20"
         fill="currentColor"
         data-slot="icon"
         aria-hidden="true"
         class="size-5">
      <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" 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=next_year month=next_month %}"
          hx-target="#{{ calendar.slug }}-monthly-grid"
          hx-swap="outerHTML"
          class="flex h-9 w-12 items-center justify-center rounded-r-md pl-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50">
    <span class="sr-only">{% trans "Next month" %}</span>
    <svg viewBox="0 0 20 20"
         fill="currentColor"
         data-slot="icon"
         aria-hidden="true"
         class="size-5">
      <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" 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=next_year %}"
          hx-target="#{{ calendar.slug }}-yearly-grid"
          hx-swap="outerHTML"
          class="flex h-9 w-12 items-center justify-center rounded-r-md pl-1 text-gray-400 hover:text-gray-500 focus:relative md:w-9 md:pl-0 md:hover:bg-gray-50">
    <span class="sr-only">{% trans "Next year" %}</span>
    <svg viewBox="0 0 20 20"
         fill="currentColor"
         data-slot="icon"
         aria-hidden="true"
         class="size-5">
      <path d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" fill-rule="evenodd" />
    </svg>
  </button>
{% endif %}