{{define "title"}}Change Password{{end}}

{{define "content"}}
<div class="mx-auto max-w-sm">
    <h2 class="text-2xl font-bold text-gray-900 text-center">Change password</h2>

    {{with .Data}}
        {{if .Error}}
        <div class="mt-4 rounded-md bg-red-50 p-4">
            <p class="text-sm text-red-800">{{.Error}}</p>
        </div>
        {{end}}

        {{if not .HasPassword}}
        <div class="mt-4 rounded-md bg-yellow-50 p-4">
            <p class="text-sm text-yellow-800">Your account uses social login and does not have a password set.</p>
        </div>
        {{else}}
        <form method="POST" action="/account/password" class="mt-8 space-y-6">
            <input type="hidden" name="gorilla.csrf.Token" value="{{$.CSRFToken}}">

            <div>
                <label for="current_password" class="block text-sm font-medium text-gray-700">Current Password</label>
                <input type="password" name="current_password" id="current_password" required
                       class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
            </div>

            <div>
                <label for="new_password" class="block text-sm font-medium text-gray-700">New Password</label>
                <input type="password" name="new_password" id="new_password" required minlength="8"
                       class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
            </div>

            <div>
                <label for="confirm_password" class="block text-sm font-medium text-gray-700">Confirm New Password</label>
                <input type="password" name="confirm_password" id="confirm_password" required
                       class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
            </div>

            <button type="submit" class="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-blue-500">Change password</button>
        </form>
        {{end}}
    {{end}}

    <p class="mt-4 text-center text-sm text-gray-600">
        <a href="/tickets" class="font-medium text-blue-600 hover:text-blue-500">Back to tickets</a>
    </p>
</div>
{{end}}