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

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

{% block settings_content %}
  <div class="bg-[#2a2f35] rounded-lg p-6">
    <div class="flex items-center mb-4">
      <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-6 h-6 text-indigo-400 mr-3">
        <rect width="18" height="18" x="3" y="3" rx="2" />
        <path d="M9 14v1" />
        <path d="M9 19v2" />
        <path d="M9 3v2" />
        <path d="M9 9v1" />
      </svg>
      <h2 class="text-xl font-semibold">Sidebar Media Types</h2>
    </div>
    <p class="text-gray-400 mb-5 text-sm">Toggle which media types appear in your sidebar navigation.</p>
    <form method="post">
      {% csrf_token %}
      <div class="mb-5">
        <div class="flex items-center justify-between p-3 bg-[#39404b] rounded-md">
          <div class="flex items-center text-gray-400">
            <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">
              <circle cx="11" cy="11" r="8"></circle>
              <path d="m21 21-4.3-4.3"></path>
            </svg>
            <span class="text-gray-200 text-sm ml-2">Hide disabled media types from search selection</span>
          </div>
          <label class="relative inline-flex items-center cursor-pointer">
            <input class="sr-only peer"
                   type="checkbox"
                   name="hide_disabled"
                   {% if user.hide_from_search %}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-[1px] after:left-[2px] 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>

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

      <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-[1px] after:left-[2px] 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 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">
          <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 mr-2">
            <path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"></path>
            <path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"></path>
            <path d="M7 3v4a1 1 0 0 0 1 1h7"></path>
          </svg>
          Save Preferences
        </button>
      </div>
    </form>
  </div>
{% endblock settings_content %}
