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

{% block title %} Register {% 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">Register</h5>
                    <span>
                        Add your credentials
                    </span>                    
                </div>

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

                        <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">
                                    <input type="text" class="form-control" placeholder="Username">
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2 pr-1">
                                <div class="form-group">
                                    <label>Email</label>
                                </div>
                            </div>
                            <div class="col-md-6 pr-1">
                                <div class="form-group">
                                    <input type="email" class="form-control" placeholder="Email">
                                </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">
                                    <input type="password" class="form-control" placeholder="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" class="btn btn-fill btn-primary">Register</button>
                                &nbsp;&nbsp; or &nbsp; <a href="/login.html" >Login</a>
                            </div>

                        </div>

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

{% endblock content %}

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