{% trans_default_domain 'admin' %}
{% set event_link_cva = cva({
  base: 'group absolute inset-1 flex flex-col overflow-y-auto rounded-lg p-2 text-xs/5',
  variants: {
    status: {
      published: 'bg-primary-50 dark:bg-primary-900/30 hover:bg-primary-100 dark:hover:bg-primary-900/50',
      finalized: 'bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50',
      reviewed: 'bg-blue-50 dark:bg-blue-900/30 hover:bg-blue-100 dark:hover:bg-blue-900/50',
      draft: 'bg-orange-50 dark:bg-orange-900/30 hover:bg-orange-100 dark:hover:bg-orange-900/50',
      cancelled: 'bg-red-50 dark:bg-red-900/30 hover:bg-red-100 dark:hover:bg-red-900/50',
      unpublished: 'bg-gray-50 dark:bg-gray-900/30 hover:bg-gray-100 dark:hover:bg-gray-800',
    }
  },
  defaultVariants: {
    status: 'unpublished'
  }
}) %}
{% set event_title_cva = cva({
  base: 'order-1 font-semibold',
  variants: {
    status: {
      published: 'text-primary-700 dark:text-primary-300',
      finalized: 'text-blue-700 dark:text-blue-300',
      reviewed: 'text-blue-700 dark:text-blue-300',
      draft: 'text-orange-700 dark:text-orange-300',
      cancelled: 'text-red-700 dark:text-red-300',
      unpublished: 'text-gray-700 dark:text-gray-300',
    }
  },
  defaultVariants: {
    status: 'unpublished'
  }
}) %}
{% set event_meta_cva = cva({
  variants: {
    status: {
      published: 'text-primary-500 dark:text-primary-400 group-hover:text-primary-700 dark:group-hover:text-primary-200',
      finalized: 'text-blue-500 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-200',
      reviewed: 'text-blue-500 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-200',
      draft: 'text-orange-500 dark:text-orange-400 group-hover:text-orange-700 dark:group-hover:text-orange-200',
      cancelled: 'text-red-500 dark:text-red-400 group-hover:text-red-700 dark:group-hover:text-red-200',
      unpublished: 'text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-200',
    }
  },
  defaultVariants: {
    status: 'unpublished'
  }
}) %}
{% set day_index_cva = cva({
  variants: {
    index: {
      1: 'sm:col-start-1',
      2: 'sm:col-start-2',
      3: 'sm:col-start-3',
      4: 'sm:col-start-4',
      5: 'sm:col-start-5',
      6: 'sm:col-start-6',
      7: 'sm:col-start-7',
    }
  }
}) %}

<div {{ attributes }} class="lg:flex lg:h-full lg:flex-col bg-white dark:bg-gray-950 shadow-sm ring-1 ring-black/5 rounded-lg overflow-hidden">
  <header class="flex items-center justify-between border-b border-gray-200 dark:border-gray-800 px-6 py-4 lg:flex-none">
    <div>
      <h1 class="text-base font-semibold text-gray-900 dark:text-white">
        {% if view == 'day' %}
          <time datetime="{{ this.referenceDate|date('Y-m-d') }}" class="sm:hidden">{{ this.referenceDate|format_datetime(pattern="MMM d, Y") }}</time>
          <time datetime="{{ this.referenceDate|date('Y-m-d') }}" class="hidden sm:inline">{{ this.referenceDate|format_datetime(pattern="MMMM d, Y") }}</time>
        {% else %}
          <time datetime="{{ this.referenceDate|date('Y-m') }}">{{ this.referenceDate|format_datetime(pattern=(view == 'week' ? "d. MMMM Y" : "MMMM Y")) }}</time>
        {% endif %}
      </h1>
      {% if view == 'day' %}
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">{{ this.referenceDate|format_datetime(pattern="EEEE") }}</p>
      {% endif %}
    </div>
    <div class="flex items-center">
      <div class="relative flex items-center rounded-md bg-white dark:bg-gray-800 shadow-sm outline -outline-offset-1 outline-gray-300 dark:outline-gray-700 md:items-stretch">
        <button type="button" 
                data-action="live#action" data-live-action-param="navigate" data-live-direction-param="prev"
                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 dark:hover:bg-gray-700">
          <span class="sr-only">Previous {{ view }}</span>
          <twig:ux:icon name="ph:caret-left" data-slot="icon" aria-hidden="true" class="size-5" />
        </button>
        <button type="button"
                data-action="live#action" data-live-action-param="navigate" data-live-direction-param="today"
                class="hidden px-3.5 text-sm font-semibold text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 focus:relative md:block flex items-center">{{ 'calendar.today'|trans }}</button>
        <span class="relative -mx-px h-5 w-px bg-gray-300 dark:bg-gray-700 md:hidden"></span>
        <button type="button"
                data-action="live#action" data-live-action-param="navigate" data-live-direction-param="next"
                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 dark:hover:bg-gray-700">
          <span class="sr-only">Next {{ view }}</span>
          <twig:ux:icon name="ph:caret-right" data-slot="icon" aria-hidden="true" class="size-5" />
        </button>
      </div>
      <div class="hidden md:ml-4 md:flex md:items-center">
        <twig:Admin:Dropdown id="view-switcher-desktop" class="relative" dropdownClass="w-36 overflow-hidden">
          <twig:block name="toggle">
            <button type="button" class="flex items-center gap-x-1.5 rounded-md bg-white dark:bg-gray-800 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-white shadow-sm inset-ring inset-ring-gray-300 dark:inset-ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
              {{ ('calendar.view.' ~ view)|trans }}
              <twig:ux:icon name="ph:caret-down" data-slot="icon" aria-hidden="true" class="-mr-1 size-5 text-gray-400" />
            </button>
          </twig:block>
          <twig:block name="dropdown">
            <div class="py-1">
              <button type="button" data-action="live#action" data-live-action-param="changeView" data-live-view-param="day" class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">{{ 'calendar.view.day'|trans }}</button>
              <button type="button" data-action="live#action" data-live-action-param="changeView" data-live-view-param="week" class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">{{ 'calendar.view.week'|trans }}</button>
              <button type="button" data-action="live#action" data-live-action-param="changeView" data-live-view-param="month" class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">{{ 'calendar.view.month'|trans }}</button>
            </div>
          </twig:block>
        </twig:Admin:Dropdown>
        <div class="ml-6 h-6 w-px bg-gray-300 dark:bg-gray-700"></div>
        {% if this.createUrl is not null %}
          <twig:Admin:Button href="{{ this.createUrl }}" variant="primary" class="ml-6">{{ 'offers.new'|trans }}</twig:Admin:Button>
        {% endif %}
      </div>
      <twig:Admin:Dropdown id="view-switcher-mobile" class="relative ml-6 md:hidden" dropdownClass="w-36 overflow-hidden">
        <twig:block name="toggle">
          <button class="-mx-2 flex items-center rounded-full border border-transparent p-2 text-gray-400 hover:text-gray-500">
            <span class="sr-only">Open menu</span>
            <twig:ux:icon name="ph:dots-three" data-slot="icon" aria-hidden="true" class="size-5" />
          </button>
        </twig:block>
        <twig:block name="dropdown">
          {% if this.createUrl is not null %}
            <div class="py-1">
              <a href="{{ this.createUrl }}" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">
                {{ 'offers.new'|trans }}
              </a>
            </div>
          {% endif %}
          <div class="py-1">
            <button type="button" data-action="live#action" data-live-action-param="navigate" data-live-direction-param="today" class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">
              {{ 'calendar.today'|trans }}
            </button>
          </div>
          <div class="py-1">
            <button type="button" data-action="live#action" data-live-action-param="changeView" data-live-view-param="day" class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">{{ 'calendar.view.day'|trans }}</button>
            <button type="button" data-action="live#action" data-live-action-param="changeView" data-live-view-param="week" class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">{{ 'calendar.view.week'|trans }}</button>
            <button type="button" data-action="live#action" data-live-action-param="changeView" data-live-view-param="month" class="w-full text-left block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 focus:bg-gray-100 dark:focus:bg-gray-700 focus:text-gray-900 dark:focus:text-white focus:outline-hidden">{{ 'calendar.view.month'|trans }}</button>
          </div>
        </twig:block>
      </twig:Admin:Dropdown>
    </div>
  </header>

  <div class="isolate flex flex-auto overflow-hidden bg-white dark:bg-gray-950">
    <div class="flex flex-auto flex-col overflow-auto {{ view in ['day', 'week'] ? 'max-h-[600px]' : '' }}"
         {% if view in ['day', 'week'] %}
           {{ stimulus_controller('ferienpass/admin-calendar-scroll', { offset: 448 }) }}
         {% endif %}>
      {% if view == 'day' %}
        <div class="sticky top-0 z-10 grid flex-none grid-cols-7 bg-white dark:bg-gray-900 text-xs text-gray-500 shadow-sm ring-1 ring-black/5 dark:ring-white/5 md:hidden">
          {% set startOfWeek = this.referenceDate.modify('Monday this week') %}
          {% for i in 0..6 %}
            {% set d = startOfWeek.modify('+' ~ i ~ ' days') %}
            {% set isSelected = d|date('Y-m-d') == this.referenceDate|date('Y-m-d') %}
            {% set isToday = d|date('Y-m-d') == "now"|date('Y-m-d') %}
            <button type="button" 
                    data-action="live#action" data-live-action-param="setDate" data-live-date-param="{{ d|date('Y-m-d') }}"
                    class="flex flex-col items-center pt-3 pb-1.5">
              <span>{{ d|date('D')|slice(0, 1) }}</span>
              <span class="mt-3 flex size-8 items-center justify-center rounded-full text-base font-semibold {{ isSelected ? (isToday ? 'bg-primary-600 text-white' : 'bg-gray-900 dark:bg-white text-white dark:text-gray-900') : (isToday ? 'text-primary-600' : 'text-gray-900 dark:text-gray-100') }}">
                {{ d|date('j') }}
              </span>
            </button>
          {% endfor %}
        </div>
      {% endif %}

      <div class="flex w-full flex-auto">
        {% if view in ['day', 'week'] %}
          <div class="{{ view == 'week' ? 'flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full' : 'flex w-full flex-auto' }}" {{ view == 'week' ? 'style="width: 165%"' : '' }}>
            {% if view == 'week' %}
              <div class="sticky top-0 z-30 flex-none bg-white dark:bg-gray-900 shadow-sm ring-1 ring-black/5 sm:pr-8">
                <div class="grid grid-cols-7 text-sm/6 text-gray-500 sm:hidden">
                  {% for day in this.days %}
                    <button type="button" 
                            data-action="live#action" data-live-action-param="setDate" data-live-date-param="{{ day.date|date('Y-m-d') }}"
                            class="flex flex-col items-center pt-2 pb-3">
                      {{ day.date|date('E')|slice(0, 1) }}
                      <span class="mt-1 flex size-8 items-center justify-center {{ day.isToday ? 'rounded-full bg-primary-600 font-semibold text-white' : 'font-semibold text-gray-900 dark:text-white' }}">
                        {{ day.date|date('j') }}
                      </span>
                    </button>
                  {% endfor %}
                </div>

                <div class="-mr-px hidden grid-cols-7 divide-x divide-gray-100 dark:divide-gray-800 border-r border-gray-100 dark:divide-gray-800 text-sm/6 text-gray-500 sm:grid">
                  <div class="col-end-1 w-14"></div>
                  {% for day in this.days %}
                    <button type="button" 
                            data-action="live#action" data-live-action-param="setDate" data-live-date-param="{{ day.date|date('Y-m-d') }}"
                            class="flex items-center justify-center py-3 hover:bg-gray-50 dark:hover:bg-gray-800">
                      <span class="{{ day.isToday ? 'flex items-baseline' : '' }}">
                        {{ day.date|date('D') }}
                        <span class="{{ day.isToday ? 'ml-1.5 flex size-8 items-center justify-center rounded-full bg-primary-600 font-semibold text-white' : 'ml-1.5 font-semibold text-gray-900 dark:text-white' }}">
                          {{ day.date|date('j') }}
                        </span>
                      </span>
                    </button>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
            <div class="flex flex-auto">
              <div class="w-14 flex-none bg-white dark:bg-gray-900 ring-1 ring-gray-100 dark:ring-gray-800"></div>
              <div class="grid flex-auto grid-cols-1 grid-rows-1">
                <!-- Horizontal lines -->
                <div style="grid-template-rows: repeat(48, minmax(2rem, 1fr))" class="col-start-1 col-end-2 row-start-1 grid divide-y divide-gray-100 dark:divide-gray-800">
                  <div class="row-end-1 h-4"></div>
                  {% for i in 0..23 %}
                    <div>
                      <div class="sticky left-0 z-20 -mt-2.5 -ml-14 w-14 pr-2 text-right text-xs/5 text-gray-400 dark:text-gray-500">
                        {{ (i == 0 or i == 12) ? (i == 0 ? '12AM' : '12PM') : (i > 12 ? (i - 12) ~ 'PM' : i ~ 'AM') }}
                      </div>
                    </div>
                    <div></div>
                  {% endfor %}
                </div>

                {% if view == 'week' %}
                  <!-- Vertical lines (Week) -->
                  <div class="col-start-1 col-end-2 row-start-1 hidden grid-rows-1 divide-x divide-gray-100 dark:divide-gray-800 sm:grid sm:grid-cols-7">
                    {% for i in 1..7 %}<div class="col-start-{{ i }} row-span-full"></div>{% endfor %}
                    <div class="col-start-8 row-span-full w-8"></div>
                  </div>
                {% endif %}

                <!-- Events -->
                <ol style="grid-template-rows: 1rem repeat(288, minmax(0, 1fr)) auto" class="col-start-1 col-end-2 row-start-1 grid {{ view == 'week' ? 'grid-cols-1 sm:grid-cols-7 sm:pr-8' : 'grid-cols-1' }}">
                  {% for day in this.days %}
                    {% for event in day.events %}
                      <li style="grid-row: {{ event.startRow }} / span {{ event.span }}" class="relative mt-px flex {{ (view == 'week' and event.dayIndex is defined) ? day_index_cva.apply({index: event.dayIndex}) : '' }}">
                        <a href="{{ event.url }}" class="{{ event_link_cva.apply({status: event.status}) }}" data-turbo-frame="slideover">
                          <p class="{{ event_title_cva.apply({status: event.status}) }}">{{ event.name }}</p>
                          {% if view == 'day' and event.meetingPoint %}
                            <p class="order-1 {{ event_meta_cva.apply({status: event.status}) }}">
                              {{ event.meetingPoint }}
                            </p>
                          {% endif %}
                          <p class="{{ event_meta_cva.apply({status: event.status}) }}">
                            <time datetime="{{ event.begin|date('c') }}">{{ event.begin|date('H:i') }}</time>
                          </p>
                        </a>
                      </li>
                    {% endfor %}
                  {% endfor %}
                </ol>
              </div>
            </div>
          </div>
        {% elseif view == 'month' %}
          <div class="flex flex-col flex-auto">
            <div class="grid grid-cols-7 gap-px border-b border-gray-300 dark:border-gray-700 bg-gray-200 dark:bg-gray-800 text-center text-xs/6 font-semibold text-gray-700 dark:text-gray-300 lg:flex-none">
              {% for dayName in ['M', 'T', 'W', 'T', 'F', 'S', 'S'] %}
                <div class="flex justify-center bg-white dark:bg-gray-900 py-2">
                  <span>{{ dayName }}</span><span class="sr-only sm:not-sr-only">{{ cycle(['on','ue','ed','hu','ri','at','un'], loop.index0) }}</span>
                </div>
              {% endfor %}
            </div>
            <div class="flex bg-gray-200 dark:bg-gray-700 text-xs/6 text-gray-700 dark:text-gray-300 lg:flex-auto">
              <div class="hidden w-full lg:grid lg:grid-cols-7 lg:grid-rows-6 lg:gap-px">
                {% for day in this.days %}
                  <div {{ day.isCurrentMonth ? 'data-is-current-month' : '' }} {{ day.isToday ? 'data-is-today' : '' }} 
                       class="relative bg-gray-50 dark:bg-gray-800 px-3 py-2 text-gray-500 data-is-current-month:bg-white dark:data-is-current-month:bg-gray-900">
                    <time datetime="{{ day.date|date('Y-m-d') }}" 
                          class="relative group-not-data-is-current-month:opacity-75 in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-primary-600 in-data-is-today:font-semibold in-data-is-today:text-white">
                      {{ day.date|date('j') }}
                    </time>
                    {% if day.events is not empty %}
                      <ol class="mt-2">
                        {% for event in day.events|slice(0, 4) %}
                          <li>
                            <a href="{{ event.url }}" class="group flex" data-turbo-frame="slideover">
                              <p class="flex-auto truncate font-medium text-gray-900 dark:text-gray-100 group-hover:text-primary-600">
                                {{ event.name }}
                              </p>
                              <time datetime="{{ event.begin|date('c') }}" class="ml-3 hidden flex-none text-gray-500 group-hover:text-primary-600 xl:block">
                                {{ event.begin|date('H:i') }}
                              </time>
                            </a>
                          </li>
                        {% endfor %}
                        {% if day.events|length > 4 %}
                          <li class="text-xs">
                            <button type="button" 
                                    data-action="live#action" data-live-action-param="setDate" data-live-date-param="{{ day.date|date('Y-m-d') }}"
                                    class="text-gray-500 hover:text-primary-600">
                              + {{ day.events|length - 4 }} weitere
                            </button>
                          </li>
                        {% endif %}
                      </ol>
                    {% endif %}
                  </div>
                {% endfor %}
              </div>
              <div class="isolate grid w-full grid-cols-7 grid-rows-6 gap-px lg:hidden">
                {% for day in this.days %}
                  <button type="button" 
                          data-action="live#action" data-live-action-param="setDate" data-live-date-param="{{ day.date|date('Y-m-d') }}"
                          {{ day.isCurrentMonth ? 'data-is-current-month' : '' }} {{ day.isToday ? 'data-is-today' : '' }}
                          class="relative flex h-14 flex-col px-3 py-2 not-data-is-current-month:bg-gray-50 dark:not-data-is-current-month:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800 focus:z-10 data-is-current-month:bg-white dark:data-is-current-month:bg-gray-900 not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 dark:not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-100 data-is-current-month:hover:bg-gray-100 dark:data-is-current-month:hover:bg-gray-800 data-is-today:font-semibold not-data-is-selected:data-is-today:text-primary-600">
                    <time datetime="{{ day.date|date('Y-m-d') }}" class="ml-auto group-not-data-is-current-month:opacity-75 in-data-is-today:flex in-data-is-today:size-6 in-data-is-today:items-center in-data-is-today:justify-center in-data-is-today:rounded-full in-data-is-today:bg-primary-600 in-data-is-today:text-white">
                      {{ day.date|date('j') }}
                    </time>
                    <span class="sr-only">{{ day.events|length }} events</span>
                    {% if day.events is not empty %}
                      <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
                        {% for event in day.events %}
                          <span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
                        {% endfor %}
                      </span>
                    {% endif %}
                  </button>
                {% endfor %}
              </div>
            </div>
          </div>
        {% endif %}
      </div>
    </div>

    {% if view == 'day' %}
      <div class="hidden w-1/2 max-w-md flex-none border-l border-gray-100 dark:border-gray-800 px-8 py-10 md:block">
        <div class="flex items-center text-center text-gray-900 dark:text-white">
          <button type="button" 
                  data-action="live#action" data-live-action-param="navigate" data-live-direction-param="prev" data-live-interval-param="1 month"
                  class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
            <span class="sr-only">Previous month</span>
            <twig:ux:icon name="ph:caret-left" data-slot="icon" aria-hidden="true" class="size-5" />
          </button>
          <div class="flex-auto text-sm font-semibold">{{ this.referenceDate|format_datetime(pattern="MMMM Y") }}</div>
          <button type="button"
                  data-action="live#action" data-live-action-param="navigate" data-live-direction-param="next" data-live-interval-param="1 month"
                  class="-m-1.5 flex flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500">
            <span class="sr-only">Next month</span>
            <twig:ux:icon name="ph:caret-right" data-slot="icon" aria-hidden="true" class="size-5" />
          </button>
        </div>
        <div class="mt-6 grid grid-cols-7 text-center text-xs/6 text-gray-500 dark:text-gray-400">
          <div>M</div><div>T</div><div>W</div><div>T</div><div>F</div><div>S</div><div>S</div>
        </div>
        <div class="isolate mt-2 grid grid-cols-7 gap-px rounded-lg bg-gray-200 dark:bg-gray-800 text-sm shadow-sm ring-1 ring-gray-200 dark:ring-gray-700">
          {% for day in this.sidebarDays %}
            <button type="button" 
                    data-action="live#action" data-live-action-param="setDate" data-live-date-param="{{ day.date|date('Y-m-d') }}"
                    {{ day.isCurrentMonth ? 'data-is-current-month' : '' }} {{ day.isToday ? 'data-is-today' : '' }} {{ day.isSelected ? 'data-is-selected' : '' }}
                    class="py-1.5 not-data-is-current-month:bg-gray-50 dark:not-data-is-current-month:bg-gray-800 not-data-is-selected:not-data-is-current-month:not-data-is-today:text-gray-400 first:rounded-tl-lg last:rounded-br-lg hover:bg-gray-100 dark:hover:bg-gray-800 focus:z-10 data-is-current-month:bg-white dark:data-is-current-month:bg-gray-900 not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-900 dark:not-data-is-selected:data-is-current-month:not-data-is-today:text-gray-100 data-is-current-month:hover:bg-gray-100 dark:data-is-current-month:hover:bg-gray-800 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold data-is-today:not-data-is-selected:text-primary-600 nth-36:rounded-bl-lg nth-7:rounded-tr-lg">
              <time datetime="{{ day.date|date('Y-m-d') }}" class="mx-auto flex size-7 items-center justify-center rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 dark:in-data-is-selected:not-in-data-is-today:bg-gray-100 dark:in-data-is-selected:not-in-data-is-today:text-gray-900 in-data-is-selected:in-data-is-today:bg-primary-600">
                {{ day.date|date('j') }}
              </time>
            </button>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>

  {% if view == 'month' %}
    <div class="relative px-4 py-10 sm:px-6 lg:hidden">
      <ol class="divide-y divide-gray-100 dark:divide-gray-800 overflow-hidden rounded-lg bg-white dark:bg-gray-900 text-sm shadow-sm outline-1 outline-black/5 dark:outline-white/5">
        {% for day in this.days|filter(d => d.events is not empty) %}
          {% for event in day.events %}
            <li class="group flex p-4 pr-6 focus-within:bg-gray-50 dark:focus-within:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800">
              <div class="flex-auto">
                <p class="font-semibold text-gray-900 dark:text-white">
                  <a href="{{ event.url }}" data-turbo-frame="slideover" class="hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-gray-100 rounded-md px-1 py-0.5 -mx-1 -my-0.5 transition-colors">{{ event.name }}</a>
                </p>
                <time datetime="{{ event.begin|date('c') }}" class="mt-2 flex items-center text-gray-700 dark:text-gray-400">
                  <twig:ux:icon name="ph:clock" data-slot="icon" aria-hidden="true" class="mr-2 size-5 text-gray-400" />
                  {{ day.date|date('d.m.') }} {{ event.begin|date('H:i') }}
                </time>
              </div>
              <a href="{{ event.url }}" class="ml-6 flex-none self-center rounded-md bg-white dark:bg-gray-800 px-3 py-2 font-semibold text-gray-900 dark:text-white opacity-0 shadow-sm ring-1 ring-gray-300 dark:ring-gray-700 ring-inset group-hover:opacity-100 hover:ring-gray-400 dark:hover:ring-gray-600 focus:opacity-100" data-turbo-frame="slideover">Details</a>
            </li>
          {% endfor %}
        {% else %}
          <li class="p-4 text-center text-gray-500">Keine Termine in diesem Monat</li>
        {% endfor %}
      </ol>
    </div>
  {% endif %}
</div>
