{% extends "base.html" %}
{% load static %}

{% block title %}
  Calendar - YamTrack
{% endblock title %}

{% block content %}
  <div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">Calendar</h1>
    <p class="text-gray-400">Track upcoming releases from your list.</p>
  </div>

  <div class="bg-[#2a2f35] rounded-lg p-6 mb-6">
    <div class="flex flex-col sm:flex-row justify-between items-center mb-6 gap-4">
      <div class="flex items-center gap-4">
        <div class="flex items-center bg-[#39404b] rounded-md p-1">
          <a class="p-2 hover:bg-[#454d5a] rounded-md transition-colors"
             href="{% url 'calendar' %}?month={{ prev_month }}&year={{ prev_year }}&view={{ view_type }}">
            {% include "app/icons/chevron-left.svg" with classes="w-5 h-5" %}
          </a>
          <h2 class="px-4 text-lg font-semibold min-w-40 text-center">{{ month_name }} {{ year }}</h2>
          <a class="p-2 hover:bg-[#454d5a] rounded-md transition-colors"
             href="{% url 'calendar' %}?month={{ next_month }}&year={{ next_year }}&view={{ view_type }}">
            {% include "app/icons/chevron-right.svg" with classes="w-5 h-5" %}
          </a>
        </div>
      </div>

      <div class="flex items-center gap-2">
        <a class="px-4 py-2 text-sm bg-[#39404b] hover:bg-[#454d5a] rounded-md transition-colors"
           href="{% url 'calendar' %}?month={{ today.month }}&year={{ today.year }}&view={{ view_type }}">Today</a>

        <form method="post" action="{% url 'reload_calendar' %}">
          {% csrf_token %}
          <button class="px-4 py-2 text-sm bg-[#39404b] hover:bg-[#454d5a] rounded-md transition-colors flex items-center gap-2 cursor-pointer">
            {% include "app/icons/circle-spinning-clockwise.svg" with classes="w-4 h-4" %}
            <span>Fetch New Releases</span>
          </button>
        </form>

        <div class="bg-[#39404b] rounded-md p-1 space-x-0.5 flex">
          <a class="p-2 rounded-md transition-colors cursor-pointer {% if view_type == 'grid' %}bg-indigo-600 text-white{% else %}hover:bg-[#454d5a]{% endif %}"
             href="{% url 'calendar' %}?month={{ month }}&year={{ year }}&view=grid">
            {% include "app/icons/grid.svg" with classes="w-4 h-4" %}
          </a>
          <a class="p-2 rounded-md transition-colors cursor-pointer {% if view_type == 'list' %}bg-indigo-600 text-white{% else %}hover:bg-[#454d5a]{% endif %}"
             href="{% url 'calendar' %}?month={{ month }}&year={{ year }}&view=list">
            {% include "app/icons/list.svg" with classes="w-4 h-4" %}
          </a>
        </div>

        <a class="p-3 text-sm bg-[#39404b] hover:bg-[#454d5a] rounded-md transition-colors"
           href="{% url 'download_calendar' token=user.token %}">
          {% include "app/icons/download.svg" with classes="w-4 h-4" %}
        </a>
      </div>
    </div>

    {% if view_type == 'grid' %}
      {% include "events/components/calendar_grid.html" %}
    {% else %}
      {% include "events/components/calendar_list.html" %}
    {% endif %}
  </div>

  <div class="bg-[#2a2f35] p-5 rounded-lg mb-6">
    <div class="flex items-center mb-3">
      {% include "app/icons/link.svg" with classes="w-5 h-5 text-indigo-400 mr-2" %}
      <h3 class="text-base font-medium">Export link</h3>
    </div>
    <p class="text-gray-400 mb-4 text-sm">
      This link can be used to integrate your calendar into any of your calendar applications.
    </p>
    <div class="bg-[#262a2f] p-3 rounded-md mb-4">
      <input readonly=""
             class="w-full py-2 px-3 bg-[#262a2f] rounded-md text-gray-300 text-sm border-0 focus:ring-0 outline-none font-mono"
             type="text"
             value="{{ request.scheme }}://{{ request.get_host }}{% url 'download_calendar' token=user.token %}">
    </div>
  </div>
{% endblock content %}