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


{% block body %}

<div class="container body">
    <div class="main_container">

        <div class="col-md-3 left_col">
            <div class="left_col scroll-view">
                {% include "layout/sidebar.html" %}
            </div>
        </div>


        <!-- top navigation -->
        <div class="top_nav">
            <div class="nav_menu">
                {% include "layout/topnav.html" %}
            </div>
        </div>
        <!-- /top navigation -->

        <!-- page content -->
        <div class="right_col" role="main">

            <div class="row">
                <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6 col-xs-12">

                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>

                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <section class="login_content">
                                <form>
                                    <h1>Login Form</h1>

                                    <div>
                                        <input type="text" class="form-control" placeholder="Username" required=""/>
                                    </div>
                                    <div>
                                        <input type="password" class="form-control" placeholder="Password" required=""/>
                                    </div>
                                    <div>
                                        <a class="btn btn-default submit" href="index.html">Log in</a>
                                        <a class="reset_pass" href="#">Lost your password?</a>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="separator">

                                        <p class="change_link">New to site?
                                            <a href="#toregister" class="to_register"> Create Account </a>
                                        </p>

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

                                        <div>
                                            <h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!
                                            </h1>

                                            <p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template.
                                                Privacy and Terms</p>
                                        </div>
                                    </div>
                                </form>
                                <!-- form -->
                            </section>
                        </div>
                        <div id="register" class="animate form">
                            <section class="login_content">
                                <form>
                                    <h1>Create Account</h1>

                                    <div>
                                        <input type="text" class="form-control" placeholder="Username" required=""/>
                                    </div>
                                    <div>
                                        <input type="email" class="form-control" placeholder="Email" required=""/>
                                    </div>
                                    <div>
                                        <input type="password" class="form-control" placeholder="Password" required=""/>
                                    </div>
                                    <div>
                                        <a class="btn btn-default submit" href="index.html">Submit</a>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="separator">

                                        <p class="change_link">Already a member ?
                                            <a href="#tologin" class="to_register"> Log in </a>
                                        </p>

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

                                        <div>
                                            <h1><i class="fa fa-paw" style="font-size: 26px;"></i> Gentelella Alela!
                                            </h1>

                                            <p>©2015 All Rights Reserved. Gentelella Alela! is a Bootstrap 3 template.
                                                Privacy and Terms</p>
                                        </div>
                                    </div>
                                </form>
                                <!-- form -->
                            </section>
                            <!-- content -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /page content -->
    </div>
</div>
{% endblock %}