{% load static cosmic_tags sitetree %}

{% block base %}

<!DOCTYPE html>
<html>
    <head>
        <!-- Standard Meta -->
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

        <!-- Site Properties -->
        <title>{% block fulltitle %}{% block title %}{% sitetree_page_title from "cosmicdb" %}{% endblock %} | {% get_site_title %}{% endblock %}</title>

        {% block prehead %}
            <link rel="shortcut icon" href="{% static 'cosmicdb/favicon.ico' %}" />
        {% endblock %}

        <link rel="stylesheet" type="text/css" href="{% static 'cosmicdb/semantic/dist/semantic.min.css' %}">

        <style type="text/css">
            {% block style %}

            .secondary.pointing.menu .toc.item {
                display: none;
            }

            .field.error span[id^="error"] {
                color: #9f3a38;
            }

            .hidden.menu {
                display: none;
            }

            .footer.segment {
                padding: 5em 0em;
            }

            .masthead .ui.menu .ui.button {
                margin-left: 0.5em;
            }

            .masthead.segment {
                padding: 1em 0em;
            }

            .masthead .logo.item img {
                margin-right: 1em;
            }

            .masthead h2 {
                font-size: 1.7em;
                font-weight: normal;
            }

            .masthead h1.ui.header {
                margin-bottom: 0em;
                font-size: 4em;
                font-weight: normal;
            }

            @media only screen and (max-width: 700px) {
                .ui.fixed.menu {
                    display: none !important;
                }
                .secondary.pointing.menu .item,
                .secondary.pointing.menu .menu {
                    display: none;
                }
                .secondary.pointing.menu .toc.item {
                    display: block;
                }
                .masthead h1.ui.header {
                    font-size: 2em;
                    margin-top: 1.5em;
                }
                .masthead h2 {
                    margin-top: 0.5em;
                    font-size: 1.5em;
                }
            }

            .pusher {
                display: flex;
                min-height: 100vh;
                flex-direction: column;
            }

            .pusher > .content-container {
                flex: 1;
            }

            .ui.sidebar .icon {
                float: left !important;
            }

            .ui.sidebar .label {
                float: left !important;
            }

            .content-container {
                padding: 30px;
            }

            .table-row {
                cursor: pointer;
            }

            .ui.message .icon {
                margin-left: 5px;
            }

            .ui.table-container {
                margin-top: 10px;
            }

            .ui.breadcrumb {
                margin-bottom: 15px;
            }


            {% endblock %}
            {% block extrastyle %}
            {% endblock %}
        </style>

        <script src="{% static 'cosmicdb/js/jquery-3.3.1.min.js' %}"></script>
        <script src="{% static 'cosmicdb/semantic/dist/semantic.min.js' %}"></script>
        <script>
            {% block javascript %}
                $(document).ready(function() {

                    // fix menu when passed
                    $('.masthead').visibility({
                        once: false,
                        onBottomPassed: function() {
                            $('.fixed.menu').transition('fade in');
                        },
                        onBottomPassedReverse: function() {
                            $('.fixed.menu').transition('fade out');
                        }
                    });

                    // create sidebar and attach to menu open
                    $('.ui.sidebar').sidebar('attach events', '.toc.item');

                    $('.dropdown').dropdown();

                });
            {% endblock %}
            {% block extrajavascript %}
            {% endblock %}
        </script>

        {% block extrahead %}
        {% endblock %}

    </head>

    {% block body %}
    <body>

        {% block page %}

            <!-- Following Menu -->
            <div class="ui top fixed hidden menu">
                <div class="ui container">
                    <div class="header item">
                        {% get_site_title %}
                    </div>    
                    {% sitetree_menu from "cosmicdb" include "trunk" template "cosmicdb/follow_menu.html" %}
                </div>
            </div>

            <!-- Sidebar Menu -->
            {% sitetree_menu from "cosmicdb" include "trunk" template "cosmicdb/vertical_menu.html" %}

            <!-- Page Contents -->
            {% block page_content %}
            <div class="pusher">

                {% block page_header %}
                <div class="ui inverted vertical masthead center aligned segment">

                    <!-- Page Menu -->
                    <div class="ui secondary inverted pointing menu">
                        <a class="toc item"><i class="sidebar icon"></i></a>
                        <div class="header item">
                            {% get_site_title %}
                        </div>
                        {% sitetree_menu from "cosmicdb" include "trunk" template "cosmicdb/page_menu.html" %}
                    </div>

                </div>
                {% endblock %}

                <div class="content-container">

                    {% if messages %}
                        {% for message in messages %}
                            {% if message.level == DEFAULT_MESSAGE_LEVELS.ERRORS %}{% endif %}
                            {% if message.level == DEFAULT_MESSAGE_LEVELS.SUCCESS %}
                                <div class="ui positive message">
                                    {{ message }} <i class="check icon"></i>
                                </div>
                            {% endif %}
                        {% endfor %}
                    {% endif %}

                    {% block header %}
                    {% endblock %}    
                    {% block content %}
                    {% endblock %}
                </div>

                {% block footer %}
                {% endblock %}

            </div>
            {% endblock %}

        {% endblock %}

    </body>
    {% endblock %}

</html>
{% endblock %}