{% extends "users/base.html" %}
{% load user_tags %}
{% load app_tags %}

{% block title %}
  Preferences - Yamtrack
{% endblock title %}

{% block settings_content %}
  <div class="bg-[#2a2f35] rounded-lg p-6">
    <div class="flex items-center mb-4">
      {% include "app/icons/vertical-sliders.svg" with classes="w-6 h-6 text-indigo-400 mr-3" %}
      <h2 class="text-xl font-semibold">Preferences</h2>
    </div>
    <p class="text-gray-400 mb-5 text-sm">Customize the look and behavior of the application.</p>
    <form method="post">
      {% csrf_token %}

      {# Media Card Overlay #}
      <div class="mb-5">
        <div class="flex items-center justify-between p-3 bg-[#39404b] rounded-md">
          <div class="flex-1">
            <div class="flex items-center text-gray-200 mb-1">
              {% include "app/icons/image.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Hide Hover Overlay on Touch Devices</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">
              Hide the media card hover overlay with action buttons on touch devices for a cleaner mobile experience.
              On desktop, the overlay will still appear when you hover your mouse over media cards.
            </p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer ml-4">
            <input class="sr-only peer"
                   type="checkbox"
                   name="clickable_media_cards"
                   {% if user.clickable_media_cards %}checked{% endif %}>
            <div class="w-9 h-5 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-px after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4.5 after:w-4.5 after:transition-all peer-checked:bg-indigo-600">
            </div>
          </label>
        </div>
      </div>

      {# Quick Watch Date #}
      <div class="mb-5">
        <div class="flex items-center justify-between p-3 bg-[#39404b] rounded-md">
          <div class="flex-1">
            <div class="flex items-center text-gray-200 mb-1">
              {% include "app/icons/clock.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Bulk Completion Date</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">
              When marking a TV show or season as completed, its episodes will be marked as completed with this date.
            </p>
          </div>
          <select name="quick_watch_date"
                  class="ml-4 p-2 bg-[#39404b] rounded-md text-white text-sm border border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400">
            {% for choice in quick_watch_date_choices %}
              <option value="{{ choice.0 }}"
                      {% if user.quick_watch_date == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      {# Progress bar #}
      <div class="mb-5">
        <div class="flex items-center justify-between p-3 bg-[#39404b] rounded-md">
          <div class="flex-1">
            <div class="flex items-center text-gray-200 mb-1">
              {% include "app/icons/minus.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Show progress bar on media items</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">
              Display a progress bar on media items. Items which don't have max progress will be using a dotted line.
            </p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer ml-4">
            <input class="sr-only peer"
                   type="checkbox"
                   name="progress_bar"
                   {% if user.progress_bar %}checked{% endif %}>
            <div class="w-9 h-5 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-px after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4.5 after:w-4.5 after:transition-all peer-checked:bg-indigo-600">
            </div>
          </label>
        </div>
      </div>

      {# Date Format #}
      <div class="mb-5">
        <div class="flex items-center justify-between p-3 bg-[#39404b] rounded-md">
          <div class="flex-1">
            <div class="flex items-center text-gray-200 mb-1">
              {% include "app/icons/calendar.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Date Format</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">Choose how dates are displayed throughout the application.</p>
          </div>
          <select name="date_format"
                  class="ml-4 p-2 bg-[#39404b] rounded-md text-white text-sm border border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400">
            {% for choice in date_format_choices %}
              <option value="{{ choice.0 }}"
                      {% if user.date_format == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      {# Time Format #}
      <div class="mb-5">
        <div class="flex items-center justify-between p-3 bg-[#39404b] rounded-md">
          <div class="flex-1">
            <div class="flex items-center text-gray-200 mb-1">
              {% include "app/icons/clock.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Time Format</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">Choose between 12-hour or 24-hour clock display.</p>
          </div>
          <select name="time_format"
                  class="ml-4 p-2 bg-[#39404b] rounded-md text-white text-sm border border-gray-600 focus:outline-none focus:ring-2 focus:ring-indigo-400">
            {% for choice in time_format_choices %}
              <option value="{{ choice.0 }}"
                      {% if user.time_format == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="border-t border-gray-600 my-5"></div>

      {# Media Types Settings #}
      <div class="mb-5">
        <div class="flex items-center mb-4">
          {% include "app/icons/four-square.svg" with classes="w-5 h-5 text-indigo-400 mr-2" %}
          <h3 class="text-lg font-semibold">Media Types</h3>
        </div>
        <p class="text-gray-400 mb-4 text-sm">
          Control which media types are visible throughout the app (sidebar, search, calendar, notifications).
        </p>

        <div class="grid gap-3 md:grid-cols-3">
          {% for media_type in media_types %}
            <div class="flex items-center justify-between p-3 bg-[#39404b] rounded-md">
              <div class="flex items-center text-gray-400">
                {% icon media_type is_active=False %}
                <span class="text-gray-200 text-sm ml-2">{{ media_type|media_type_readable_plural }}</span>
              </div>
              <label class="relative inline-flex items-center cursor-pointer">
                {% with enabled_field=media_type|add:"_enabled" %}
                  <input class="sr-only peer"
                         type="checkbox"
                         name="media_types_checkboxes"
                         value="{{ media_type }}"
                         {% if user|get_attr:enabled_field %}checked{% endif %}>
                {% endwith %}
                <div class="w-9 h-5 bg-gray-600 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-px after:left-0.5 after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4.5 after:w-4.5 after:transition-all peer-checked:bg-indigo-600">
                </div>
              </label>
            </div>
          {% endfor %}
        </div>
      </div>

      <div class="mt-5 pt-4 border-gray-600">
        <button type="submit"
                class="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors text-sm cursor-pointer">
          {% include "app/icons/save.svg" with classes="w-4 h-4 mr-2" %}
          Save Preferences
        </button>
      </div>
    </form>
  </div>
{% endblock settings_content %}
