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

  <style type="text/css">
    body {
      background-color: #14213d; /* 006389,073b4c */
      margin-top: 60px;
    }
    .logo {
      margin: 0;
      font-size: 2em;
      font-weight: 200;
      font-family: "Audiowide", cursive;
      color: #92c35e;
      text-align: center;
      text-shadow: 1px 1px 0 #333333;
      line-height: 70px;
    }

    .login-or {
       position: relative;
       color: #aaa;
       margin-top: 10px;
       margin-bottom: 10px;
       padding-top: 10px;
       padding-bottom: 10px;
     }
     .span-or {
       display: block;
       position: absolute;
       left: 50%;
       top: -2px;
       margin-left: -25px;
       background-color: #fff;
       width: 50px;
       text-align: center;
     }
     .hr-or {
       height: 1px;
       margin-top: 0px !important;
       margin-bottom: 0px !important;
     }
  </style>
{% endblock %}

{% block main %}
  <div class="container">    
    <div class="row">
      <div class="{% block col_class %}col-md-4 col-sm-8 col-12 offset-md-4{% endblock col_class %}">
        <p class="logo">Diamond Messenger</p>
        <div class="card">
          <h4 class="card-header">{% block cardheader %}Log in{% endblock cardheader %}</h4>
          <div class="card-body">
            {% if form.non_field_errors %}
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
              {% for error in form.non_field_errors %}
                <p{% if forloop.last %} class="mb-0"{% endif %}>{{ error }}</p>
              {% endfor %}
              <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            {% endif %}  
            {% block form %}{% endblock form %}
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}