<div th:fragment="_signup">

    <div>
        <h5 class="text-primary" th:text="#{login.welcome}">¡Bienvenido!</h5>
        <p class="text-muted" th:text="#{login.sign-up.title}">Crear cuenta</p>
    </div>

    <!-- En el caso del formulario de signup, asegúrate de bindear el DTO -->
    <form th:if="${form == '_signup'}" th:action="@{/signup}" method="post" th:object="${signupForm}">

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

        <div class="mb-3">
            <label for="username" class="form-label" th:text="#{login.email}">Correo electrónico</label>
            <input type="email" class="form-control" id="username" th:field="*{username}"
                th:placeholder="#{login.email-placeholder}">
            <div class="text-danger" th:if="${#fields.hasErrors('username')}" th:errors="*{username}"></div>
        </div>

        <div class="mb-3">
            <label class="form-label" for="name" th:text="#{login.sign-up.name}">Nombre completo</label>
            <input type="text" class="form-control" id="name" th:field="*{name}" th:placeholder="#{login.sign-up.name}">
            <div class="text-danger" th:if="${#fields.hasErrors('name')}" th:errors="*{name}"></div>
        </div>

        <div class="mb-3">
            <label class="form-label" for="password-input" th:text="#{login.password}">Contraseña</label>
            <input type="password" class="form-control" id="password-input" th:field="*{password}"
                th:placeholder="#{login.password-placeholder}">
            <div class="text-danger" th:if="${#fields.hasErrors('password')}" th:errors="*{password}"></div>
        </div>

        <div class="mb-3">
            <label class="form-label" for="password-confirm-input" th:text="#{login.confirm-password}">Confirmar
                contraseña</label>
            <input type="password" class="form-control" id="password-confirm-input" th:field="*{passwordConfirm}"
                th:placeholder="#{login.password-placeholder}">
            <div class="text-danger" th:if="${#fields.hasErrors('passwordConfirm')}" th:errors="*{passwordConfirm}">
            </div>
        </div>

        <div class="mt-4">
            <button class="btn btn-secondary w-100" type="submit" th:text="#{login.sign-up-button}">Crear
                cuenta</button>
        </div>
    </form>
</div>