{% load i18n cal_tags %}

{% calendar_can calendar "add_event" as can_add %}
<header class="flex flex-none items-center justify-between border-b border-gray-200 px-6 py-4">
  <c-calendar-label mode=view_mode />
  <div class="flex items-center">
    <div class="relative flex items-center rounded-md bg-white shadow-xs outline -outline-offset-1 outline-gray-300 md:items-stretch">
      <c-prev mode=view_mode />
      <c-today mode=view_mode />
      <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden"></span>
      <c-next mode=view_mode />
    </div>
    <div class="hidden md:ml-4 md:flex md:items-center">
      <c-mode-toggle mode=view_mode />
      {% if can_add %}
        <div class="ml-6 h-6 w-px bg-gray-300"></div>
        <button type="button"
                hx-get="{% url 'htmx_calendar:add_event' calendar_slug=calendar.slug %}"
                hx-target="#dialog"
                hx-swap="innerHTML"
                onclick="window.dispatchEvent(new CustomEvent('open-modal'))"
                class="ml-6 rounded-md bg-accent px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-accent/80">
          {% trans "Add event" %}
        </button>
      {% endif %}
    </div>
    <div class="ml-6 md:hidden relative" data-cal-dropdown-container>
      <button type="button"
              class="relative flex items-center rounded-full text-gray-400 outline-offset-8 hover:text-gray-500"
              data-cal-dropdown
              aria-expanded="false"
              aria-haspopup="menu">
        <span class="absolute -inset-2"></span>
        <span class="sr-only">{% trans "Open menu" %}</span>
        <svg viewBox="0 0 20 20"
             fill="currentColor"
             aria-hidden="true"
             class="size-5">
          <path d="M3 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM8.5 10a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM15.5 8.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z" />
        </svg>
      </button>
      <div data-cal-dropdown-menu
           class="absolute right-0 z-50 mt-3 w-44 origin-top-right divide-y divide-gray-100 overflow-hidden rounded-md bg-white shadow-lg outline-1 outline-black/5"
           role="menu"
           aria-orientation="vertical">
        {% if can_add %}
          <div class="py-1">
            <button role="menuitem"
                    type="button"
                    hx-get="{% url 'htmx_calendar:add_event' calendar_slug=calendar.slug %}"
                    hx-target="#dialog"
                    hx-swap="innerHTML"
                    class="block w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden"
                    onclick="window.dispatchEvent(new CustomEvent('open-modal'))">
              {% trans "Create event" %}
            </button>
          </div>
        {% endif %}
        <div class="py-1">
          <button role="menuitem"
                  hx-get="{% url 'htmx_calendar:daily' calendar_slug=calendar.slug %}"
                  hx-target="#{{ calendar.slug }}-{{ view_mode }}-grid"
                  hx-swap="outerHTML"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">{% trans "Day view" %}</button>
          <button role="menuitem"
                  hx-get="{% url 'htmx_calendar:weekly' calendar_slug=calendar.slug %}"
                  hx-target="#{{ calendar.slug }}-{{ view_mode }}-grid"
                  hx-swap="outerHTML"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">{% trans "Week view" %}</button>
          <button role="menuitem"
                  hx-get="{% url 'htmx_calendar:monthly' calendar_slug=calendar.slug %}"
                  hx-target="#{{ calendar.slug }}-{{ view_mode }}-grid"
                  hx-swap="outerHTML"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">{% trans "Month view" %}</button>
          <button role="menuitem"
                  hx-get="{% url 'htmx_calendar:yearly' calendar_slug=calendar.slug %}"
                  hx-target="#{{ calendar.slug }}-{{ view_mode }}-grid"
                  hx-swap="outerHTML"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:bg-gray-100 focus:text-gray-900 focus:outline-hidden">{% trans "Year view" %}</button>
        </div>
      </div>
    </div>
  </div>
</header>