{% extends "base.html" %}

{% block content %}
  <div class="lg:flex lg:h-full lg:flex-col">
    <header class="flex items-center justify-between border-b border-gray-200 px-6 py-4 lg:flex-none">
      <h1 class="text-base font-semibold text-gray-900">
        <time datetime="2022-01">January 2022</time>
      </h1>
      <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">
          <button type="button"
                  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">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>
          <button type="button"
                  class="hidden px-3.5 text-sm font-semibold text-gray-900 hover:bg-gray-50 focus:relative md:block">
            Today
          </button>
          <span class="relative -mx-px h-5 w-px bg-gray-300 md:hidden"></span>
          <button type="button"
                  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">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>
        </div>
        <div class="hidden md:ml-4 md:flex md:items-center">
          <div class="ml-6 h-6 w-px bg-gray-300"></div>
          <button type="button"
                  class="ml-6 rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-indigo-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
            Add event
          </button>
        </div>
      </div>
    </header>
    <div class="shadow-sm ring-1 ring-black/5 lg:flex lg:flex-auto lg:flex-col">
      <div class="grid grid-cols-7 gap-px border-b border-gray-300 bg-gray-200 text-center text-xs/6 font-semibold text-gray-700 lg:flex-none">
        <div class="flex justify-center bg-white py-2">
          <span>M</span>
          <span class="sr-only sm:not-sr-only">on</span>
        </div>
        <div class="flex justify-center bg-white py-2">
          <span>T</span>
          <span class="sr-only sm:not-sr-only">ue</span>
        </div>
        <div class="flex justify-center bg-white py-2">
          <span>W</span>
          <span class="sr-only sm:not-sr-only">ed</span>
        </div>
        <div class="flex justify-center bg-white py-2">
          <span>T</span>
          <span class="sr-only sm:not-sr-only">hu</span>
        </div>
        <div class="flex justify-center bg-white py-2">
          <span>F</span>
          <span class="sr-only sm:not-sr-only">ri</span>
        </div>
        <div class="flex justify-center bg-white py-2">
          <span>S</span>
          <span class="sr-only sm:not-sr-only">at</span>
        </div>
        <div class="flex justify-center bg-white py-2">
          <span>S</span>
          <span class="sr-only sm:not-sr-only">un</span>
        </div>
      </div>
      <div class="flex bg-gray-200 text-xs/6 text-gray-700 lg:flex-auto">
        <div class="hidden w-full lg:grid lg:grid-cols-7 lg:grid-rows-6 lg:gap-px">
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2021-12-27"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">27</time>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2021-12-28"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">28</time>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2021-12-29"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">29</time>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2021-12-30"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">30</time>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2021-12-31"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">31</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-01"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">1</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-02"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">2</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-03"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">3</time>
            <ol class="mt-2">
              <li>
                <a href="#" class="group flex">
                  <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">Design review</p>
                  <time datetime="2022-01-03T10:00"
                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">10AM</time>
                </a>
              </li>
              <li>
                <a href="#" class="group flex">
                  <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">Sales meeting</p>
                  <time datetime="2022-01-03T14:00"
                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">2PM</time>
                </a>
              </li>
            </ol>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-04"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">4</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-05"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">5</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-06"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">6</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-07"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">7</time>
            <ol class="mt-2">
              <li>
                <a href="#" class="group flex">
                  <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">Date night</p>
                  <time datetime="2022-01-08T18:00"
                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">6PM</time>
                </a>
              </li>
            </ol>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-08"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">8</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-09"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">9</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-10"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">10</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-11"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">11</time>
          </div>
          <div data-is-today
               data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-12"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">12</time>
            <ol class="mt-2">
              <li>
                <a href="#" class="group flex">
                  <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">Ss birthday party</p>
                  <time datetime="2022-01-25T14:00"
                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">2PM</time>
                </a>
              </li>
            </ol>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-13"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">13</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-14"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">14</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-15"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">15</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-16"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">16</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-17"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">17</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-18"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">18</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-19"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">19</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-20"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">20</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-21"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">21</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-22"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">22</time>
            <ol class="mt-2">
              <li>
                <a href="#" class="group flex">
                  <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">Maple syrup museum</p>
                  <time datetime="2022-01-22T15:00"
                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">3PM</time>
                </a>
              </li>
              <li>
                <a href="#" class="group flex">
                  <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">Hockey game</p>
                  <time datetime="2022-01-22T19:00"
                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">7PM</time>
                </a>
              </li>
            </ol>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-23"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">23</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-24"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">24</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-25"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">25</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-26"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">26</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-27"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">27</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-28"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">28</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-29"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">29</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-30"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">30</time>
          </div>
          <div data-is-in-current-month
               class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-01-31"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">31</time>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-02-01"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">1</time>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-02-02"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">2</time>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-02-03"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">3</time>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-02-04"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">4</time>
            <ol class="mt-2">
              <li>
                <a href="#" class="group flex">
                  <p class="flex-auto truncate font-medium text-gray-900 group-hover:text-indigo-600">Cinema with friends</p>
                  <time datetime="2022-02-04T21:00"
                        class="ml-3 hidden flex-none text-gray-500 group-hover:text-indigo-600 xl:block">9PM</time>
                </a>
              </li>
            </ol>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-02-05"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">5</time>
          </div>
          <div class="group relative bg-gray-50 px-3 py-2 text-gray-500 data-is-in-current-month:bg-white">
            <time datetime="2022-02-06"
                  class="relative group-not-data-is-in-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-indigo-600 in-data-is-today:font-semibold in-data-is-today:text-white">6</time>
          </div>
        </div>
        <div class="isolate grid w-full grid-cols-7 grid-rows-6 gap-px lg:hidden">
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2021-12-27"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">27</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2021-12-28"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">28</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2021-12-29"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">29</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2021-12-30"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">30</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2021-12-31"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">31</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-01"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">1</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-02"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">2</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-03"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">3</time>
            <span class="sr-only">{day.events.length} events</span>
            <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
              <span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
              <span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
            </span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-04"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">4</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-05"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">5</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-06"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">6</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-07"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">7</time>
            <span class="sr-only">{day.events.length} events</span>
            <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
              <span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
            </span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-08"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">8</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-09"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">9</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-10"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">10</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-11"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">11</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-today
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-12"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">12</time>
            <span class="sr-only">{day.events.length} events</span>
            <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
              <span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
            </span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-13"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">13</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-14"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">14</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-15"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">15</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-16"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">16</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-17"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">17</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-18"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">18</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-19"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">19</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-20"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">20</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-21"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">21</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-selected
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-22"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">22</time>
            <span class="sr-only">{day.events.length} events</span>
            <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
              <span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
              <span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
            </span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-23"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">23</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-24"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">24</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-25"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">25</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-26"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">26</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-27"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">27</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-28"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">28</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-29"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">29</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-30"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">30</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  data-is-in-current-month
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-01-31"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">31</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-02-01"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">1</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-02-02"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">2</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-02-03"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">3</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-02-04"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">4</time>
            <span class="sr-only">{day.events.length} events</span>
            <span class="-mx-0.5 mt-auto flex flex-wrap-reverse">
              <span class="mx-0.5 mb-1 size-1.5 rounded-full bg-gray-400"></span>
            </span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-02-05"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">5</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
          <button type="button"
                  class="group relative flex h-14 flex-col px-3 py-2 not-data-is-in-current-month:bg-gray-50 not-data-is-selected:not-data-is-in-current-month:not-data-is-today:text-gray-500 hover:bg-gray-100 focus:z-10 data-is-in-current-month:bg-white not-data-is-selected:data-is-in-current-month:not-data-is-today:text-gray-900 data-is-in-current-month:hover:bg-gray-100 data-is-selected:font-semibold data-is-selected:text-white data-is-today:font-semibold not-data-is-selected:data-is-today:text-indigo-600">
            <time datetime="2022-02-06"
                  class="ml-auto group-not-data-is-in-current-month:opacity-75 in-data-is-selected:flex in-data-is-selected:size-6 in-data-is-selected:items-center in-data-is-selected:justify-center in-data-is-selected:rounded-full in-data-is-selected:not-in-data-is-today:bg-gray-900 in-data-is-selected:in-data-is-today:bg-indigo-600">6</time>
            <span class="sr-only">{day.events.length} events</span>
          </button>
        </div>
      </div>
    </div>
    <div class="relative px-4 py-10 sm:px-6 lg:hidden">
      <ol class="divide-y divide-gray-100 overflow-hidden rounded-lg bg-white text-sm shadow-sm outline-1 outline-black/5">
        <li class="group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
          <div class="flex-auto">
            <p class="font-semibold text-gray-900">Maple syrup museum</p>
            <time datetime="2022-01-15T09:00"
                  class="mt-2 flex items-center text-gray-700">
              <svg viewBox="0 0 20 20"
                   fill="currentColor"
                   data-slot="icon"
                   aria-hidden="true"
                   class="mr-2 size-5 text-gray-400">
                <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z" clip-rule="evenodd" fill-rule="evenodd" />
              </svg>
              3PM
            </time>
          </div>
          <a href="#"
             class="ml-6 flex-none self-center rounded-md bg-white px-3 py-2 font-semibold text-gray-900 opacity-0 shadow-xs ring-1 ring-gray-300 ring-inset group-hover:opacity-100 hover:ring-gray-400 focus:opacity-100">Edit<span class="sr-only">, Maple syrup museum</span></a>
        </li>
        <li class="group flex p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50">
          <div class="flex-auto">
            <p class="font-semibold text-gray-900">Hockey game</p>
            <time datetime="2022-01-22T19:00"
                  class="mt-2 flex items-center text-gray-700">
              <svg viewBox="0 0 20 20"
                   fill="currentColor"
                   data-slot="icon"
                   aria-hidden="true"
                   class="mr-2 size-5 text-gray-400">
                <path d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm.75-13a.75.75 0 0 0-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 0 0 0-1.5h-3.25V5Z" clip-rule="evenodd" fill-rule="evenodd" />
              </svg>
              7PM
            </time>
          </div>
          <a href="#"
             class="ml-6 flex-none self-center rounded-md bg-white px-3 py-2 font-semibold text-gray-900 opacity-0 shadow-xs ring-1 ring-gray-300 ring-inset group-hover:opacity-100 hover:ring-gray-400 focus:opacity-100">Edit<span class="sr-only">, Hockey game</span></a>
        </li>
      </ol>
    </div>
  </div>
{% endblock content %}