{% extends "base.html" %}
{% block content %}
<!--main-->
<div class="container" id="main">
    {% include 'messages.html' %}

    <div class="row">
        <style>
            #xox>*{
                float:left;
            }
            #xox>img{
                height: 42px;
                padding-right: 14px;
            }
        </style>
        <div class="col-lg-8">
            <h3>Secure login </h3>
        </div>
        <div class="col-lg-8" id="xox">
            <img src="/static/nasa.png"/>
            <img src="/static/cyber.png"/>
            <img src="/static/ie9.png"/>
            <img src="/static/java.png"/>
            <hr>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-lg-4">
            <form class="form-horizontal" action="" method=post>
                <div class="form-group">
                    <label class="sr-only" for="inlineFormInput">Name</label>
                    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineFormInput"
                           placeholder="Username" name="username">
                </div>

                <div class="form-group">
                    <label class="sr-only" for="password">Password</label>
                    <div class="input-group mb-2 mr-sm-2 mb-sm-0">
                        <input class="form-control" type="password" id="password" placeholder="Password"
                            name="password">
                    </div>
                </div>

                <div class="form-group">
                    <button type="submit" class="btn btn-primary btn-sm">Login</button>
                </div>
                <div class="form-group">
                  <small>Forgot your password? Out of luck! Create a new account lol</small>
                </div>
            </form>
        </div>
        <div class="col-lg-5">
            <a href="/register">Register here</a>
        </div>
    </div>
</div>
<br>
<!--/main-->
{% endblock %}