{% 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 }}">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-5 h-5">
              <path d="m15 18-6-6 6-6"></path>
            </svg>
          </a>
          <h2 class="px-4 text-lg font-semibold min-w-[160px] 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 }}">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-5 h-5">
              <path d="m9 18 6-6-6-6"></path>
            </svg>
          </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">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-4 h-4">
              <path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path>
              <path d="M21 3v5h-5"></path>
              <path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path>
              <path d="M8 16H3v5"></path>
            </svg>
            <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">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-4 h-4">
              <rect width="18" height="18" x="3" y="3" rx="2"></rect>
              <path d="M3 9h18"></path>
              <path d="M3 15h18"></path>
              <path d="M9 3v18"></path>
              <path d="M15 3v18"></path>
            </svg>
          </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">
            <svg xmlns="http://www.w3.org/2000/svg"
                 width="24"
                 height="24"
                 viewBox="0 0 24 24"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 class="w-4 h-4">
              <line x1="8" x2="21" y1="6" y2="6"></line><line x1="8" x2="21" y1="12" y2="12"></line><line x1="8" x2="21" y1="18" y2="18"></line><line x1="3" x2="3.01" y1="6" y2="6"></line><line x1="3" x2="3.01" y1="12" y2="12"></line><line x1="3" x2="3.01" y1="18" y2="18"></line>
            </svg>
          </a>
        </div>

        <a class="p-3 text-sm bg-[#39404b] hover:bg-[#454d5a] rounded-md transition-colors"
           href="{% url 'download_calendar' token=user.token %}">
          <svg xmlns="http://www.w3.org/2000/svg"
               width="24"
               height="24"
               viewBox="0 0 24 24"
               fill="none"
               stroke="currentColor"
               stroke-width="2"
               stroke-linecap="round"
               stroke-linejoin="round"
               class="w-4 h-4">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
            <polyline points="7 10 12 15 17 10"></polyline>
            <line x1="12" y1="15" x2="12" y2="3"></line>
          </svg>
        </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">
      <svg xmlns="http://www.w3.org/2000/svg"
           width="24"
           height="24"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
           stroke-linejoin="round"
           class="w-5 h-5 text-indigo-400 mr-2">
        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
      </svg>
      <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 %}
