{% extends 'cosmicdb/base.html' %}

{% load static cosmic_tags %}

{% block body %}

<body class="hold-transition skin-blue-light sidebar-mini">

    <div class="wrapper">

        <!-- Main Header -->
        <header class="main-header">

            <!-- Logo -->
            <a href="{% url 'dashboard' %}" class="logo">
                <!-- mini logo for sidebar mini 50x50 pixels -->
                <span class="logo-mini"><img src="{% static 'cosmicdb/img/icon.png' %}" class="logo-img" /></span>
                <!-- logo for regular state and mobile devices -->
                <span class="logo-lg">
                    <img src="{% static 'cosmicdb/img/icon.png' %}" class="logo-img" />
                    <b>{% get_site_title %}</b>
                </span>
            </a>

            <!-- Header Navbar -->
            <nav class="navbar navbar-static-top">
                <!-- Sidebar toggle button-->
                <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <!-- Navbar Right Menu -->
                <div class="navbar-custom-menu">

                    <ul class="nav navbar-nav">

                        <!-- Messages: style can be found in dropdown.less-->
                        <li class="dropdown messages-menu">
                            <!-- Menu toggle button -->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-envelope-o"></i>
                                {% if user.unread_message_no > 0 %}<span class="label label-info">{{user.unread_message_no}}</span>{% endif %}
                            </a>
                            <ul class="dropdown-menu">
                                {% if user.unread_message_no > 0 %}
                                    <li class="header">You have {{user.unread_message_no}}  unread message{% if user.unread_message_no == 1 %}{% else %}s{% endif %}</li>
                                    <li>
                                        <!-- inner menu: contains the messages -->
                                        <ul class="menu">
                                            {% for unread_message in user.unread_messages %}
                                                <li><!-- start message -->
                                                    <a href="{% url 'messages' unread_message.id %}">
                                                        <div class="pull-left">
                                                            <!-- User Image -->
                                                            {{unread_message.image_tag}}
                                                        </div>
                                                        <!-- Message title and timestamp -->
                                                        <h4>
                                                            {{unread_message.subject}}
                                                        </h4>
                                                        <!-- The message -->
                                                        <p>{{unread_message.short_message|safe}}</p>
                                                    </a>
                                                </li>
                                                <!-- end message -->
                                            {% endfor %}
                                        </ul>
                                        <!-- /.menu -->
                                    </li>
                                {% else %}
                                    <li class="header">You have {{user.read_message_no}}  message{% if user.read_message_no == 1 %}{% else %}s{% endif %}</li>
                                    <li>
                                        <!-- inner menu: contains the messages -->
                                        <ul class="menu">
                                            {% for read_message in user.read_messages %}
                                                <li><!-- start message -->
                                                    <a href="{% url 'messages' read_message.id %}">
                                                        <div class="pull-left">
                                                            <!-- User Image -->
                                                            {{read_message.image_tag}}
                                                        </div>
                                                        <!-- Message title and timestamp -->
                                                        <h4>
                                                            {{read_message.subject}}
                                                        </h4>
                                                        <!-- The message -->
                                                        <p>{{read_message.short_message|safe}}</p>
                                                    </a>
                                                </li>
                                                <!-- end message -->
                                            {% endfor %}
                                        </ul>
                                        <!-- /.menu -->
                                    </li>
                                {% endif %}
                                <li class="footer"><a href="{% url 'messages' %}">See All Messages</a></li>
                            </ul>
                        </li>
                        <!-- /.messages-menu -->

                        <li class="dropdown notifications-menu">
                            <!-- Menu toggle button -->
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-bell-o"></i>
                                {% if user.unread_notification_no > 0 %}<span class="label label-warning">{{user.unread_notification_no}}</span>{% endif %}
                            </a>
                            <ul class="dropdown-menu">
                                {% if user.unread_notification_no > 0 %}
                                    <li class="header">You have {{user.unread_notification_no}}  unread notification{% if user.unread_notification_no == 1 %}{% else %}s{% endif %}</li>
                                    <li>
                                    <!-- Inner Menu: contains the notifications -->
                                    <ul class="menu">
                                        {% for unread_notification in user.unread_notifications %}
                                            <li><!-- start notification -->
                                                <a href="{% url 'notifications' unread_notification.id %}">
                                                    <i class="{{unread_notification.icon_class}}"></i> {{unread_notification.short_notification|safe}}...
                                                </a>
                                            </li>
                                        {% endfor %}
                                        <!-- end notification -->
                                    </ul>
                                    </li>
                                {% else %}
                                    <li class="header">You have {{user.read_notification_no}}  notification{% if user.read_notification_no == 1 %}{% else %}s{% endif %}</li>
                                    <li>
                                    <!-- Inner Menu: contains the notifications -->
                                    <ul class="menu">
                                        {% for read_notification in user.read_notifications %}
                                            <li><!-- start notification -->
                                                <a href="{% url 'notifications' read_notification.id %}">
                                                    <i class="{{read_notification.icon_class}}"></i> {{read_notification.short_notification|safe}}...
                                                </a>
                                            </li>
                                        {% endfor %}
                                        <!-- end notification -->
                                    </ul>
                                    </li>
                                {% endif %}
                                <li class="footer"><a href="{% url 'notifications' %}">View all</a></li>
                            </ul>
                        </li>

                        <li class="dropdown notifications-menu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-user-o"></i>
                            </a>
                            <ul class="dropdown-menu">
                                <li class="header"><small>Your account email can be changed under Profile Details.</small></li>
                                <li>
                                    <ul class="menu">
                                        <li>
                                            <a href="{% url 'password_change' %}">
                                                <i class="fa fa-lock"></i> Change password
                                            </a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        {% if user.is_superuser %}<li data-toggle="tooltip" data-placement="bottom" title="Admin"><a href="{% url 'admin:index' %}"><i class="fa fa-wrench"></i></a></li>{% endif %}

                        <li data-toggle="tooltip" data-placement="bottom" title="Logout"><a href="{% url 'logout' %}?next={% url 'home' %}"><i class="fa fa-sign-out"></i></a></li>

                    </ul>

                </div>
            </nav>
        </header>


        <!-- Left side column. contains the logo and sidebar -->
        <aside class="main-sidebar">

            <!-- sidebar: style can be found in sidebar.less -->
            <section class="sidebar">

                <!-- Sidebar Menu -->
                <ul class="sidebar-menu">
                    {% block sidebar %}
                        {% include 'cosmicdb/sidebar.html' %}
                    {% endblock %}
                </ul>
                <!-- /.sidebar-menu -->
            </section>
            <!-- /.sidebar -->
        </aside>





        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <h1>
                    {% block title %}Base{% endblock %}
                    <small>{% block title_small %}Base{% endblock %}</small>
                </h1>
                {% block breadcrumb %}
                    <ol class="breadcrumb">
                        <li><a href="#"><i class="fa fa-dashboard"></i> Base</a></li>
                        <li class="active">Base</li>
                    </ol>
                {% endblock %}
            </section>

            <!-- Main content -->
            <section class="content">

                {% block content %}{% endblock %}

            </section>
            <!-- /.content -->
        </div>
        <!-- /.content-wrapper -->


        <!-- Main Footer -->
        {% block footer %}
        <footer class="main-footer hidden-xs">
            <!-- To the right -->
            <div class="pull-right hidden-xs">
                <strong><a href="{% url 'home' %}">{% get_site_title %}</a></strong>
            </div>
            <!-- Default to the left -->
            <div>&nbsp;</div>
        </footer>
        {% endblock %}

    </div>

</body>

{% endblock %}