{% set calendar = module('V2_CalendarYear', moduleId, { bid: null, cid: null, start: null }) %}

<div>
  <div class="flex items-center mb-10">
    {{ include('/admin/module/setting.twig', { moduleInfo: calendar.moduleInfo }) }}
    <h1 class="text-gray-900 font-bold text-2xl">{{ calendar.date.year }}</h1>

    <ul class="flex items-center gap-x-2 ml-4 text-indigo-600">
      <li>
        <a href="{{ calendar.date.prevUrl }}calendar.html" class="flex items-center justify-center w-5 h-5" title="前年へ">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor"
            class="size-4"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
          </svg>
        </a>
      </li>
      <li>
        <a href="{{ calendar.date.nextUrl }}calendar.html" class="flex items-center justify-center w-5 h-5" title="翌年へ">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="currentColor"
            class="size-4"
          >
            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
          </svg>
        </a>
      </li>
    </ul>
  </div>
  <div class="text-gray-900">
    {% for month in calendar.year %}
      {% if loop.index0 % 3 == 0 %}
      <div class="grid gap-8 grid-cols-[repeat(auto-fill,minmax(308px,1fr))]">
      {% endif %}
        <div>
          <h2 class="pb-3 border-b border-gray-200 text-lg font-bold">{{ month.label }}月</h2>
          <div class="grid grid-cols-7 mt-4 text-sm" aria-hidden="true">
            {% for week in calendar.weekLabels %}
              <div class="week-{w} [&:is(.week-0,.week-6)]:text-red-600 text-center">
                {{ week.label }}
              </div>
            {% endfor %}
          </div>
          <div class="mt-3">
            {% for week in month.weeks %}
              <div class="grid grid-cols-7">
                {% for day in week %}
                  {% if day.isPadding %}
                    <div
                      class="week-{{ day.week }} [&:is(.week-0,.week-6)]:text-red-600 px-0.5 mb-1 py-1.5"
                      aria-hidden="true"
                    ></div>
                  {% else %}
                    {% if day.entries %}
                      <div
                        class="week-{{
                        day.week
                        }} [&:is(.week-0,.week-6)]:text-red-600 flex items-center justify-center px-0.5 py-1.5 text-center"
                      >
                        <a
                          href="{{ day.url }}"
                          class="flex items-center justify-center w-7 h-7 rounded-full cursor-pointer bg-gray-100 hover:bg-gray-200"
                          aria-label="{{ day.day }}日の記事一覧を表示する"
                        >
                          <span>{{ day.day }}</span>
                        </a>
                      </div>
                    {% else %}
                      <div
                        class="week-{{
                        day.week
                        }} [&:is(.week-0,.week-6)]:text-red-600 flex items-center justify-center px-0.5 py-1.5 text-center"
                      >
                        <span class="flex items-center justify-center w-7 h-7">{{ day.day }}</span>
                      </div>
                    {% endif %}
                  {% endif %}
                {% endfor %}
              </div>
            {% endfor %}
          </div>
        </div>
      {% if loop.index0 % 3 == 2 or loop.last %}
      </div>
      {% endif %}
    {% endfor %}
  </div>
</div>
