{% extends "layout.html" %}
{% block content %}
    <section class="container-fluid bg-light">   
        <h5 class="signup-text">Create a new account to start managing your passwords</h5>
        <form class="form-signup my-3 py-3 border rounded-3 bg-white" method="POST" novalidate> 
            {{ form.hidden_tag() }}
            <fieldset class="form-group border-bottom mb-3">
                <div class="form-group mb-3">
                    {{ form.email.label(class="form-label") }}
                    {% if form.email.errors %}
                        {{ form.email(class="form-control is-invalid") }}
                        <div class="d-block invalid-feedback">
                            {% for error in form.email.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.email(class="form-control") }}
                    {% endif %}
                </div>
                <div class="form-group mb-3">
                    {{ form.name.label(class="form-label") }}
                    {% if form.name.errors %}
                        {{ form.name(class="form-control is-invalid") }}
                        <div class="d-block invalid-feedback">
                            {% for error in form.name.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.name(class="form-control") }}
                    {% endif %}
                </div>
                <div class="form-group mb-3">
                    {{ form.password.label(class="form-label") }}
                    {% if form.password.errors %}
                        <div class="d-flex align-items-center">
                            {{ form.password(class="form-control is-invalid", type="password", id="password") }}
                            <i class="bi bi-eye text-primary" onclick="toggleVisibility('#password', '#toggleVisibility', 0)" id="toggleVisibility" title="Toggle Visibility"></i>
                        </div>
                        <div class="d-block invalid-feedback">
                            {% for error in form.password.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="d-flex align-items-center">
                            {{ form.password(class="form-control", type="password", id="password") }}
                            <i class="bi bi-eye text-primary" onclick="toggleVisibility('#password', '#toggleVisibility', 0)" id="toggleVisibility" title="Toggle Visibility"></i>
                        </div>
                    {% endif %}
                </div>
                <div class="form-group mb-3">
                    {{ form.password_confirm.label(class="form-label") }}
                    {% if form.password_confirm.errors %}
                        <div class="d-flex align-items-center">
                            {{ form.password_confirm(class="form-control is-invalid", type="password", id="password") }}
                            <i class="bi bi-eye text-primary" onclick="toggleVisibility('#password', '#toggleVisibility', 1)" id="toggleVisibility" title="Toggle Visibility"></i>
                        </div>
                        <div class="d-block invalid-feedback">
                            {% for error in form.password_confirm.errors %}
                                <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="d-flex align-items-center">
                            {{ form.password_confirm(class="form-control", type="password", id="password") }}
                            <i class="bi bi-eye text-primary" onclick="toggleVisibility('#password', '#toggleVisibility', 1)" id="toggleVisibility" title="Toggle Visibility"></i>
                        </div>
                    {% endif %}
                </div>
            </fieldset>
            <div class="form-group d-flex justify-content-between align-items-center mt-3">
                <button class="w-50 btn btn-primary me-2" type="submit">Submit</button>
                <a class="w-50 btn btn-outline-secondary" href="{{ url_for('users.signin') }}">Cancel</a>
            </div>
        </form>
    </section>
{% endblock content %}