{% extends "layouts/base.html" %}

{% block title %} Login {% endblock %} 

<!-- Specific Page CSS goes HERE  -->
{% block stylesheets %}{% endblock stylesheets %}

{% block content %}

    <div class="panel-header panel-header-sm">
    </div>
    <div class="content">
        <div class="row">
            <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="title">Login</h5>
                    <span>
                        {% if msg %}
                            {{ msg | safe }}
                        {% else %}
                            Add your credentials
                        {% endif %}
                    </span>                    
                </div>

                <br />
                <div class="card-body">

                    <form role="form" method="post" action="">

                        {% csrf_token %}

                        <div class="row">

                            <div class="col-md-2 pr-1">
                                <div class="form-group">
                                    <label>Username</label>
                                </div>
                            </div>

                            <div class="col-md-6 pr-1">
                                <div class="form-group">
                                    {{ form.username }}
                                </div>
                            </div>

                        </div>

                        <div class="row">

                            <div class="col-md-2 pr-1">
                                <div class="form-group">
                                    <label>Password</label>
                                </div>
                            </div>

                            <div class="col-md-6 pr-1">
                                <div class="form-group">
                                    {{ form.password }}
                                </div>
                            </div>

                        </div>

                        <br />
                        
                        <div class="row">

                            <div class="col-md-2 pr-1"></div>
                            <div class="col-md-5 pr-1">
                                <button type="submit" name="login" class="btn btn-fill btn-primary">Log in</button>
                                &nbsp;&nbsp; or &nbsp; <a href="{% url 'register' %}" >Register</a>
                            </div>

                        </div>

                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock content %}

<!-- Specific Page JS goes HERE  -->
{% block javascripts %}{% endblock javascripts %}