{% extends 'layouts/base-fullscreen.html' %}
{% load i18n static admin_argon %}

{% block content %}

  {% include 'includes/navigation-fullscreen.html' %}

    <main class="main-content  mt-0">
      <div class="page-header align-items-start min-vh-50 pt-5 pb-11 m-3 border-radius-lg" style="background-image: url('https://raw.githubusercontent.com/creativetimofficial/public-assets/master/argon-dashboard-pro/assets/img/signup-cover.jpg'); background-position: top;">
        <span class="mask bg-gradient-dark opacity-6"></span>
        <div class="container">
          <div class="row justify-content-center">
            <div class="col-lg-5 text-center mx-auto">
              <h1 class="text-white mb-2 mt-5">Welcome!</h1>
              <p class="text-lead text-white">Use these awesome forms to login or create new account in your project for free.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row mt-lg-n10 mt-md-n11 mt-n10 justify-content-center">
          <div class="col-xl-4 col-lg-5 col-md-7 mx-auto">
            <div class="card z-index-0">
              <div class="card-header text-center pt-4">
                <h5>Change Password</h5>
              </div>
              
              <div class="card-body">
                <form method="post" action="#" role="form">
                  {% csrf_token %}
                  {% for field in form %}
                    <div class="mb-3">
                      {{field}}
                    </div>
                    <small>{{ field.errors }}</small>
                  {% endfor %}
                  <div class="text-center">
                    <button type="submit" class="btn bg-gradient-dark w-100 my-4 mb-2">Change</button>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    {% include 'includes/footer-fullscreen.html' %}

{% endblock content %}