{% extends 'base.html' %}
{% block content %}

<section class="vh-100" style="background-color: #C6DEFF;">
    <div class="container py-5 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col col-xl-8">
                <div class="card" style="border-radius: 1rem;">
                    <div class="row g-0">
                        <div class="col-md-6 col-lg-5 d-none d-md-block">

                            <img alt="forGotPassword"
                                 class="img-fluid" src="https://img.freepik.com/free-vector/tiny-people-carrying-key-
                                 open-padlock_74855-16292.jpg?w=1380&t=st=1668711129~exp=1668711729~hmac=1df16613
                                 abceeaf0f3d42cbffe5308c7023b84a6c24ebc8465cb3cafdab8ca3d"
                                 style="border-radius: 1rem 0 0 1rem;"/>
                        </div>
                        <div class="col-md-6 col-lg-7 d-flex align-items-center">
                            <div class="card-body p-4 p-lg-5 text-black">


                                <div class="d-flex align-items-center mb-3 pb-1">
                                    <i class="fas fa-cubes fa-2x me-3" style="color: #ff6219;"></i>
                                    <span class="h3 fw-bold mb-0">Communication LTD</span>
                                </div>

                                <h5 class="card-title mb-2">Create new password</h5>
                                <h6 class="card-title mb-2">Please insert the email you want to reset your password</h6>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="email">Email</span>
                                    </div>
                                    <input aria-describedby="basic-addon3" class="form-control" id="usernameINPT"
                                           type="text">
                                </div>
                                <div class="d-grid gap-0">
                                    <a class="btn btn-primary  mb-3" href="{% url 'interface:dashboard' %}"> Send to
                                        email</a>
                                    <a class="btn btn-secondary  mb-3" href="{% url 'interface:login' %}"> Back to
                                        login</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{% endblock %}