{% load app_tags %}
{% load events_tags %}

<div class="grid grid-cols-7 gap-1 mb-2">
  {% for header in weekday_headers %}
    <div class="text-center text-sm font-medium text-gray-400 py-2">{{ header }}</div>
  {% endfor %}
</div>

<div class="grid grid-cols-7 gap-1">
  {% for week in calendar %}
    {% for day in week %}
      {% if day == 0 %}
        <div class="min-h-32.5 p-1 rounded-md relative bg-[#343a40] opacity-40"></div>
      {% else %}
        <div class="min-h-32.5 p-1 rounded-md relative bg-[#39404b] cursor-pointer hover:bg-[#454d5a] {% if day == today.day and month == today.month and year == today.year %}ring-2 ring-indigo-500{% endif %}">
          <div class="text-right text-sm p-1 font-medium {% if day == today.day and month == today.month and year == today.year %}bg-indigo-500 text-white rounded-full w-7 h-7 flex items-center justify-center ml-auto{% endif %}">
            {{ day }}
          </div>
          <div class="mt-1 space-y-1 max-h-20 overflow-y-auto">
            {% for release in release_dict|get_item:day %}
              <a href="{{ release.item|media_url }}" class="block">
                <div class="flex items-center gap-1 px-1 py-0.5 text-xs rounded hover:bg-[#343a40] transition-colors">
                  {% with color=release.item.media_type|media_color %}
                    {% icon release.item.media_type is_active=False extra_classes=color|add:" w-4 h-4 shrink-0" %}
                  {% endwith %}
                  <span class="truncate"
                        title="{{ release }} {{ release.datetime|time_format:user }}">{{ release }} {{ release.datetime|time_format:user }}</span>
                </div>
              </a>
            {% endfor %}
          </div>
        </div>
      {% endif %}
    {% endfor %}
  {% endfor %}
</div>