<div th:fragment="_reset-password">

    <div>
        <h5 class="text-primary" th:text="#{login.change-password.title}">Cambiar contraseña</h5>
    </div>

    <form th:if="${form == '_reset-password'} and ${valid}" th:action="@{/auth/password/reset}" method="post"
        autocomplete="off">

        <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}" />
        <input type="hidden" name="uid" th:value="${uid}" />
        <input type="hidden" name="token" th:value="${token}" />

        <div class="mb-3">
            <label class="form-label" for="password-input" th:text="#{login.change-password.new-password}">Nueva
                contraseña</label>
            <input type="password" class="form-control" id="password-input" name="password" required minlength="8"
                autocomplete="new-password" th:placeholder="#{login.password-placeholder}">
        </div>

        <div class="mb-3">
            <label class="form-label" for="password-confirm-input"
                th:text="#{login.change-password.confirm-password}">Confirmar contraseña</label>
            <input type="password" class="form-control" id="password-confirm-input" name="password2" required
                minlength="8" autocomplete="new-password" th:placeholder="#{login.password-placeholder}">
        </div>

        <div class="mt-4">
            <button class="btn btn-secondary w-100" type="submit" th:text="#{login.change-password.button}">Cambiar
                contraseña</button>
        </div>
    </form>

    <!-- Si el token no es válido, sugerir pedir otro -->
    <div th:if="${form == '_reset-password'} and ${valid != null and !valid}" class="mt-3">
        <a class="btn btn-outline-primary w-100" th:href="@{/auth/password/forgot}"
            th:text="#{login.password-reset.request-new}">
            Solicitar nuevo enlace
        </a>
    </div>
</div>