{% 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>

      {# Obfuscate Unseen Episodes #}
      <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/eye.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Obfuscate Unseen Episodes</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">When enabled, unseen episode images and descriptions will be blurred.</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer ml-4">
            <input class="sr-only peer"
                   type="checkbox"
                   name="obfuscate_unseen_episodes"
                   {% if user.obfuscate_unseen_episodes %}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>

      {# Hide Completed Recommendations #}
      <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/circle-check.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Hide completed media in recommendations</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">
              Hide media you've already completed from the recommendations section on detail pages.
            </p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer ml-4">
            <input class="sr-only peer"
                   type="checkbox"
                   name="hide_completed_recommendations"
                   {% if user.hide_completed_recommendations %}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>

      {# Hide Zero Ratings #}
      <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/star.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Hide zero ratings</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">Hide the rating badge from media cards when the rating is zero.</p>
          </div>
          <label class="relative inline-flex items-center cursor-pointer ml-4">
            <input class="sr-only peer"
                   type="checkbox"
                   name="hide_zero_rating"
                   {% if user.hide_zero_rating %}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>

      {# Week Start Day #}
      <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/week.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Week Start Day</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">Choose which day the week starts on for calendars and statistics.</p>
          </div>
          <select name="week_start_day"
                  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 week_start_day_choices %}
              <option value="{{ choice.0 }}"
                      {% if user.week_start_day == choice.0 %}selected{% endif %}>{{ choice.1 }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      {# Watch Provider Region #}
      <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/globe.svg" with classes="w-5 h-5 mr-2" %}
              <span class="text-sm font-medium">Watch provider region</span>
            </div>
            <p class="text-xs text-gray-400 ml-7">
              Choose the region to show watch providers for. Setting this to disabled will hide the box from the media page.
            </p>
          </div>
          <select name="watch_provider_region"
                  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 watch_provider_choices %}
              <option value="{{ choice.0 }}"
                      {% if user.watch_provider_region == 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 %}