{% extends "users/base.html" %}

{% load socialaccount %}
{% load static %}

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

{% block settings_content %}
  <div class="space-y-6">
    <div class="bg-[#2a2f35] rounded-lg p-6">
      <div class="flex items-center mb-5">
        <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">
          <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
          <circle cx="12" cy="7" r="4"></circle>
        </svg>
        <h2 class="text-xl font-semibold">Profile Information</h2>
      </div>

      {% if user_form.non_field_errors %}
        <div class="mb-4 p-3 bg-red-900/50 border border-red-700 rounded-md text-red-200">
          {% for error in user_form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
        </div>
      {% endif %}

      <form method="post" class="space-y-4">
        {% csrf_token %}
        <div>
          <label for="{{ user_form.username.id_for_label }}"
                 class="block text-sm font-medium mb-2 text-gray-300">Username</label>
          <input id="{{ user_form.username.id_for_label }}"
                 name="{{ user_form.username.html_name }}"
                 class="w-full py-2 px-3 bg-[#39404b] rounded-md text-white text-sm border {% if user_form.username.errors %}border-red-500{% else %}border-gray-600{% endif %} focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                 type="text"
                 value="{{ user_form.username.value|default:user.username }}">
          {% if user_form.username.errors %}
            <p class="mt-1 text-sm text-red-400">{{ user_form.username.errors.0 }}</p>
          {% endif %}
        </div>
        <div class="pt-2">
          <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 Changes
          </button>
        </div>
      </form>
    </div>

    <div class="bg-[#2a2f35] rounded-lg p-6">
      <div class="flex items-center mb-5">
        <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="11" x="3" y="11" rx="2" ry="2"></rect>
          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
        </svg>
        <h2 class="text-xl font-semibold">Change Password</h2>
      </div>

      {% if password_form.non_field_errors %}
        <div class="mb-4 p-3 bg-red-900/50 border border-red-700 rounded-md text-red-200">
          {% for error in password_form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
        </div>
      {% endif %}

      <form method="post"
            class="space-y-4"
            x-data="{ showCurrentPassword: false, showNewPassword: false, showConfirmPassword: false }">
        {% csrf_token %}
        <div class="relative">
          <label for="{{ password_form.old_password.id_for_label }}"
                 class="block text-sm font-medium mb-2 text-gray-300">Current Password</label>
          <div class="relative">
            <input id="{{ password_form.old_password.id_for_label }}"
                   name="{{ password_form.old_password.html_name }}"
                   class="w-full py-2 px-3 pr-10 bg-[#39404b] rounded-md text-white text-sm border {% if password_form.old_password.errors %}border-red-500{% else %}border-gray-600{% endif %} focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                   :type="showCurrentPassword ? 'text' : 'password'"
                   value="">
            <button type="button"
                    @click="showCurrentPassword = !showCurrentPassword"
                    class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-white cursor-pointer">
              <!-- Show when password is hidden -->
              <svg x-show="!showCurrentPassword"
                   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="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
              <!-- Show when password is visible -->
              <svg x-show="showCurrentPassword"
                   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="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
                <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
                <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
                <line x1="2" x2="22" y1="2" y2="22"></line>
              </svg>
            </button>
          </div>
          {% if password_form.old_password.errors %}
            <p class="mt-1 text-sm text-red-400">{{ password_form.old_password.errors.0 }}</p>
          {% endif %}
        </div>

        <div class="relative">
          <label for="{{ password_form.new_password1.id_for_label }}"
                 class="block text-sm font-medium mb-2 text-gray-300">New Password</label>
          <div class="relative">
            <input id="{{ password_form.new_password1.id_for_label }}"
                   name="{{ password_form.new_password1.html_name }}"
                   class="w-full py-2 px-3 pr-10 bg-[#39404b] rounded-md text-white text-sm border {% if password_form.new_password1.errors %}border-red-500{% else %}border-gray-600{% endif %} focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                   :type="showNewPassword ? 'text' : 'password'"
                   value="">
            <button type="button"
                    @click="showNewPassword = !showNewPassword"
                    class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-white cursor-pointer">
              <!-- Show when password is hidden -->
              <svg x-show="!showNewPassword"
                   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="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
              <!-- Show when password is visible -->
              <svg x-show="showNewPassword"
                   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="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
                <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
                <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
                <line x1="2" x2="22" y1="2" y2="22"></line>
              </svg>
            </button>
          </div>
          {% if password_form.new_password1.errors %}
            <p class="mt-1 text-sm text-red-400">{{ password_form.new_password1.errors.0 }}</p>
          {% endif %}
        </div>

        <div class="relative">
          <label for="{{ password_form.new_password2.id_for_label }}"
                 class="block text-sm font-medium mb-2 text-gray-300">Confirm New Password</label>
          <div class="relative">
            <input id="{{ password_form.new_password2.id_for_label }}"
                   name="{{ password_form.new_password2.html_name }}"
                   class="w-full py-2 px-3 pr-10 bg-[#39404b] rounded-md text-white text-sm border {% if password_form.new_password2.errors %}border-red-500{% else %}border-gray-600{% endif %} focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
                   :type="showConfirmPassword ? 'text' : 'password'"
                   value="">
            <button type="button"
                    @click="showConfirmPassword = !showConfirmPassword"
                    class="absolute inset-y-0 right-0 px-3 flex items-center text-gray-400 hover:text-white cursor-pointer">
              <!-- Show when password is hidden -->
              <svg x-show="!showConfirmPassword"
                   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="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path>
                <circle cx="12" cy="12" r="3"></circle>
              </svg>
              <!-- Show when password is visible -->
              <svg x-show="showConfirmPassword"
                   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="M9.88 9.88a3 3 0 1 0 4.24 4.24"></path>
                <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"></path>
                <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"></path>
                <line x1="2" x2="22" y1="2" y2="22"></line>
              </svg>
            </button>
          </div>
          {% if password_form.new_password2.errors %}
            <p class="mt-1 text-sm text-red-400">{{ password_form.new_password2.errors.0 }}</p>
          {% endif %}
        </div>

        <div class="pt-2">
          <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>
            Update Password
          </button>
        </div>
      </form>
    </div>
    
    {% get_providers as socialaccount_providers %}
    {% if socialaccount_providers %}
      <div class="bg-[#2a2f35] rounded-lg p-6">
        <div class="flex items-center mb-5">
          <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">
            <path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z">
            </path>
          </svg>
          <h2 class="text-xl font-semibold">Third-Party Connections</h2>
        </div>
        <p class="text-gray-400 mb-5 text-sm">Manage your connected third-party accounts for easier sign-in.</p>
        <a href="{% url 'socialaccount_connections' %}"
           class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors text-sm">
          <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="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>
          Manage Account Connections
        </a>
      </div>
    {% endif %}

  </div>

{% endblock settings_content %}
