<!DOCTYPE html>
{% load static %}
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->

    <link href="{% static 'money/css/bootstrap-fluid-adj.css' %}" rel="stylesheet">
    <link href="{% static 'money/css/bootstrap.min.css' %}" rel="stylesheet" media="screen">
    <link href="{% static 'money/css/bootstrap-responsive.css' %}" rel="stylesheet">
    <link href="{% static 'money/js/jquery-ui-1.11.1.custom/jquery-ui.min.css' %}" rel="stylesheet">
    <link href="{% static 'money/js/jquery-ui-1.11.1.custom/jquery-ui.timepicker-addon.css' %}" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="{% static 'money/sb-admin-2/font-awesome-4.1.0/css/font-awesome.min.css' %}" rel="stylesheet">
    <!-- Custom CSS -->
    <link href="{% static 'money/sb-admin-2/css/sb-admin-2.css' %}" rel="stylesheet">
    <!-- MetisMenu CSS -->
    <link href="{% static 'money/sb-admin-2/css/plugins/metisMenu/metisMenu.min.css' %}" rel="stylesheet">

    <link href="{% static 'money/sb-admin-2/css/plugins/morris.css' %}" rel="stylesheet">



    <!-- Latest bootstrap cdn-- dont use it breaks look and feel >
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
    -->
    <title>{% block title %}{% endblock %}</title>

    <style>
        .table-scrollable {
            overflow: auto;
        }

        .table {
            overflow: auto;
        }

        .ui-datepicker-trigger {
            position: relative;
            top: 5px;
            height: 20px;
        }

        .ui-datepicker-header {
            border-color: blueviolet
        }

        .ui-datepicker-prev {
            color: #ffff00
        }

        .ui-datepicker-today {
            border-color: blueviolet;
            color: green
        }

            /* {} is the value according to your need */

        .sidebar {
            float: left;
            height: 100%;
            margin-right: 50px;
            outline: #00FF00
        }

        .main {
            padding-top: 25px;
            padding-right: 50px;
            padding-bottom: 25px;
            padding-left: 50px;
            #outline: #00FF00 dashed;
            margin-top: 20px;

        }

        @media (max-width: 767px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }

        @media (min-width: 1200px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }

            /* Portrait tablet to landscape and desktop */
        @media (min-width: 768px) and (max-width: 979px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }

            /* Landscape phone to portrait tablet */
        @media (max-width: 767px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }

            /* Landscape phones and down */
        @media (max-width: 480px) {
            .main {
                padding-top: 25px;
                padding-right: 50px;
                padding-bottom: 25px;
                padding-left: 50px;
            }
        }
    </style>


</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <div class="nav-collapse collapse">
                <ul class="nav pull-right">
                    {% if user.is_authenticated %}
                        <li class="navbar-text">Welcome, {{ user.username }}!</li>
                        <li><a href="/accounts/logout/">Logout</a></li>
                    {% else %}
                        <li><a href="/accounts/register/">Register</a></li>
                        <li><a href="/accounts/login/">Login</a></li>
                    {% endif %}
                </ul>
            <ul class="nav  navbar-inverse">
                    {% if user.is_authenticated %}
                        <li><a href="{% url 'money:index' %}">Home</a></li>
                        <li><a></a></li>
                        <li><a href="{% url 'money:about' %}">About</a></li>

                                </ul>
                            {% endif %}




            </div>


            <!--/.nav-collapse -->
        </div>
    </div>
</div>

<!-- Div containing Side bar as well as body pane /-->
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span2">
            <div class=" sidebar ">
            {% if user.is_authenticated %}
                <h1> Welcome {{ user.username }}</h1>


                <hr>
                <p>
                {% if user.is_authenticated %}
                User {{ user.username }} is Authenticated
                {% else %}
                    User {{ user.username }} not authenticated
                {% endif %}
                </p>
                <hr>
                <p><strong>Last Login : <br></strong>  {{ user.last_login }}</p>
            {% endif %}

            <p> Welcome to Money - Expenditure . <br>A Tool to Manage Expenditures <br><br> By <a href="http://www.versionpb.com">VersionPB</a>
                    <br><br>See more tools <a href="http://www.versionpb.com">here</a><br></p>
                        <ul>
                            <li><a href=http://www.versionpb.com/?page_id=63>Bodmas Calculator</a></li>
                            <li><a href=http://www.versionpb.com/?page_id=135>Password Protected Diary</a></li>
                            <li><a href=http://www.versionpb.com/?page_id=168>Password Manager</a></li>
                            <li><a href=http://www.versionpb.com/?page_id=183>Optician Customer Manager</a></li>
                            <li><a href="http://www.comparefilesfoldersandtext.com">Text Comparing Utility</a></li>
                            <li><a href="http://www.comparefilesfoldersandtext.com/files/">File Comparing Utility</a></li>
                            <li><a href="http://www.comparefilesfoldersandtext.com/folders/">Folders Comparing Utility</a></li>

                        </ul>
            </div>
            <!--/.well -->
        </div>
        <!--/span-->

        <div class="span10 ">
            <div class="well clearfix main pull-left">
                {% block body_block %}
                {% endblock %}
            </div>
        </div>

        <!--/span-->
    </div>
    <!--/row-->
    <hr>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<hr>


<footer>
    <div class="container">
        <div class="row-fluid">
            <div class="span4 offset6">
                <p>&copy; Version PB - Expenditure </p>
            </div>

    <span class="span1 offset5">
    {% if visits %}
        <span class="badge">Total visits {{ visits }}</span>
    {% endif %}
                    </span>
    <span class="span2">
                        {% if last_visit %}
                            <span class="badge">Last Visit {{ last_visit }}</span>
                        {% endif %}
    </span>
        </div>

</footer>

<!-- next 2 lines for java Script for bootstrapping fluid of twitter -->
<script src="{% static 'money/js/jquery-2.1.1.min.js' %}"></script>
<script src="{% static 'money/js/bootstrap.min.js' %}"></script>
<script src="{% static 'money/js/bootstrap.js' %}"></script>
<script src="{% static 'money/js/d3/d3.min.js' %}"></script>

<!--
<script type="text/javascript">

<    d3.selectAll("p").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
    d3.selectAll("ul").style("color", function() {
  return "hsl(" + Math.random() * 360 + ",100%,50%)";
});
    </script>
    -->



</body>
</html>