{% extends "account/base_entrance.html" %}
{% load i18n %}
{% block head_title %}
    {% trans "Change Password" %}
{% endblock head_title %}

{% block content %}

<div class="h-screen bg-gray-50 flex flex-col justify-center items-center">

    <div class="bg-white border border-gray-300 w-80 md:w-96 py-8 px-4 flex items-center flex-col mb-3">
   <h1 class="text-xl font-semibold mb-4">
        {% if token_fail %}
            {% trans "Bad Token" %}
        {% else %}
            {% trans "Change Password" %}
        {% endif %}
    </h1>

    {% if token_fail %}
        {% url 'account_reset_password' as passwd_reset_url %}
        <p class="text-sm text-red-600">
            {% blocktrans %}
                The password reset link was invalid, possibly because it has already been used.
                Please request a <a href="{{ passwd_reset_url }}" class="underline text-blue-600">new password reset</a>.
            {% endblocktrans %}
        </p>
    {% else %}
        <form method="post" action="{{ action_url }}" class="mt-4 w-64 md:w-80 flex flex-col">
            {% csrf_token %}
            {{ redirect_field }}

                            <!-- Password 1 -->
                <div class="w-full mt-2">
                    <div class="flex items-center border rounded bg-gray-100 border-gray-300 focus-within:border-gray-400">
                        <input
                            class="text-xs w-full bg-transparent px-2 py-2 focus:outline-none"
                            name="password1"
                            id="password1"
                            placeholder="Password"
                            type="password"
                            required
                            autocomplete="new-password"
                            minlength="8" />

                        <!-- Swap visibility toggle -->
                        <label class="swap swap-rotate px-2 cursor-pointer flex-shrink-0">
                            <input type="checkbox" data-target="password1" onchange="togglePassword(this)" />

                            <!-- Show Icon (eye open) -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-5 swap-on">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                            </svg>

                            <!-- Hide Icon (eye closed) -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-5 swap-off">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
                            </svg>
                        </label>
                    </div>

                    <!-- Error message -->
                    {% for error in form.password1.errors %}
                        <p class="text-xs mt-1 text-red-500 md:text-sm">{{ error }}</p>
                    {% endfor %}
                </div>

                <!-- Password 2 -->
               <div class="w-full mt-2">
                    <div class="flex items-center border rounded bg-gray-100 border-gray-300 focus-within:border-gray-400">
                        <input
                            class="text-xs w-full bg-transparent px-2 py-2 focus:outline-none"
                            name="password2"
                            id="password2"
                            placeholder="Password"
                            type="password"
                            required
                            autocomplete="new-password"
                            minlength="8" />

                        <!-- Swap visibility toggle -->
                        <label class="swap swap-rotate px-2 cursor-pointer flex-shrink-0">
                            <input type="checkbox" data-target="password2" onchange="togglePassword(this)" />

                            <!-- Show Icon (eye open) -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-5 swap-on">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
                            </svg>

                            <!-- Hide Icon (eye closed) -->
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                                stroke="currentColor" class="size-5 swap-off">
                                <path stroke-linecap="round" stroke-linejoin="round"
                                    d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
                            </svg>
                        </label>
                    </div>

                    <!-- Error message -->
                    {% for error in form.password2.errors %}
                        <p class="text-xs mt-1 text-red-500 md:text-sm">{{ error }}</p>
                    {% endfor %}
                </div>

            <div class="flex justify-end gap-4 mt-8">
                <button type="submit" name="action" class="px-4 py-2 btn btn-primary rounded">
                    {% trans "Change Password" %}
                </button>
                <button type="submit" form="logout-from-stage" class="text-sm btn btn-error">
                    {% trans "Cancel" %}
                </button>
            </div>
        </form>
    {% endif %}

    {% if not cancel_url %}
        <form id="logout-from-stage" method="post" action="{% url 'account_logout' %}">
            <input type="hidden" name="next" value="{% url 'account_login' %}">
            {% csrf_token %}
        </form>
    {% endif %}

    </div>
    
</div>
    {% endblock content %}