{% extends "layout.html" %}
{% block content %}
    <section class="container-fluid bg-light">   
        <h5 class="signin-text">Sign in or create a new account to access your secure tresor</h5>
        <form class="form-signin 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.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.remember(class="form-check-input", type="checkbox") }}
                    {{ form.remember.label(class="form-check-label") }}
                </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">
                    <i class="bi bi-box-arrow-in-right me-1"></i>
                    Sign In
                </button>
                <a class="w-50 btn btn-outline-secondary" href="{{ url_for('users.signup') }}">
                    <i class="bi bi-person-plus me-1"></i>
                    Sign Up
                </a>
            </div>
        </form>
    </section>
{% endblock content %}