{% extends '_layouts/empty' %}

{% block head %}
<script>
function togglePassword() {
    let $x = $("#password");
    let $eye = $("#eye");
    if ($x.attr('type') === "password") {
        $x.attr('type', 'text');
        $eye.removeClass('ti-eye').addClass('ti-eye-off');
    } else {
        $x.attr('type', 'password');
        $eye.removeClass('ti-eye-off').addClass('ti-eye');
    }
    return false;
}
</script>
{% endblock %}

{% block content %}
<div class="container-tight py-4">
    <div class="card card-md">
        <div class="card-body">
            <form action="{{ href('/cambiopassword') }}" method="post" autocomplete="off" novalidate>
                <input type="hidden" name="{{request.getAttribute('_csrf').parameterName}}" value="{{request.getAttribute('_csrf').token}}">

                <div class="mb-2">
                    <div class="input-group input-group-flat">
                        <input type="password" id="password" class="form-control" name="password" placeholder="{{ message("login.password") }}" autocomplete="off">
                        <span class="input-group-text">
                            <a href="#" style="text-decoration: none;" class="link-secondary" title="{{ message("login.showpassword") }}" data-bs-toggle="tooltip" onclick="return togglePassword();">
                                <i id="eye" class="ti ti-eye"></i>
                            </a>
                        </span>
                    </div>
                </div>

                <div class="form-footer">
                    <button type="submit" class="btn btn-primary w-100">{{ message("save") }}</button>
                </div>
            </form>
        </div>
</div>
{% endblock %}