<!DOCTYPE html>
<html lang="en">

<head>
    {% include 'includes/head.html' %}
</head>

<body class="">
<div class="wrapper">
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-absolute navbar-transparent mw-100">
        <div class="container-fluid overflow-hidden">
            <div class="navbar-wrapper">
                <div class="navbar-toggle d-inline">
                    <button type="button" class="navbar-toggler">
                        <span class="navbar-toggler-bar bar1"></span>
                        <span class="navbar-toggler-bar bar2"></span>
                        <span class="navbar-toggler-bar bar3"></span>
                    </button>
                </div>
                <a class="navbar-brand" href="/">CT Admin Dash</a>
            </div>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-bar navbar-kebab"></span>
                <span class="navbar-toggler-bar navbar-kebab"></span>
                <span class="navbar-toggler-bar navbar-kebab"></span>
            </button>
            <div class="collapse navbar-collapse" id="navigation">
                <ul class="navbar-nav ml-auto">
                    <li class="input-group d-flex align-items-center mb-0">
                        <label class="switch theme-switch">
                            <input type="checkbox" class="bsc" checked="">
                            <span class="slider"></span>
                        </label>
                    </li>
                    <li class="nav-item">
                        <a href="#" class="nav-link">Register</a>
                    </li>

                    <li class="separator d-lg-none"></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- End Navbar -->
    <div class="container-fluid">
        <div class="content">
            <div class="container">
                <div class="row pt-5">
                    <div class="col-md-6 mt-5 offset-md-3 pt-5 mt-5">
                      <div class="card">
                        <div class="row align-items-center text-center">
                          <div class="col-md-12">
                            <div class="card-body">
                              <img src="{% static 'assets/images/logo-dark.png' %}" alt="" class="img-fluid mb-4">
                              <p class="login-box-msg">You are only one step a way from your new password, recover your password now.</p>
                              <form method="post">
                                {% csrf_token %}
                                {% for field in form %}
                                <div class="form-group">
                                  <label>
                                    {{field.label}} :
                                </label>
                                {{field}}
                                </div>
                                {% endfor %}
                                <div class="row">
                                  <div class="col-12">
                                    <button type="submit" class="btn btn-primary btn-block">Change password</button>
                                  </div>
                                  <!-- /.col -->
                                </div>
                              </form>
                              <p class="mt-3 mb-1">
                                <a href="{% url 'auth_signin' %}">Login</a>
                              </p>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                </div>
            </div>

        </div>
        <footer class="footer px-5 py-4 fixed-bottom">
            <div class="copyright mx-auto float-none text-center">
                ©
                <script>
                    document.write(new Date().getFullYear())
                </script>
                made with <i class="tim-icons icon-heart-2"></i>
            </div>
        </footer>
    </div>
</div>

{% include 'includes/fixed-plugin.html' %}
{% include 'includes/scripts.html' %}
</body>

</html>
