
{% import "Toucan/macros/menu.html" as menu with context %}
{% import "Toucan/macros/master.html" as  master with context %}
{% import "Toucan/macros/bootstrap.html" as bs with context %}

<!DOCTYPE html>
<html>

<head>
    <flatly></flatly>
    {{ master.site_header("%s - Admin", add_social_graph=false, add_google_analytics=false) }}
    {{ bs.theme('yeti') }}
    {{ master.css_assets("toucan-admin.css") }}
    {{ master.css_assets("admin-all-css") }}
</head>

<body>

    {{ menu.navbar(brand=__.TEMPLATE_CONTEXT["brand_name"], url="/", groups=["admin"]) }}

    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                {{ master.flashed_messages() }}
            </div>
        </div>
    </div>


    <div class="container-fluid" id="{% block admin_page_id %}{% endblock %}">

        {% if not __.TEMPLATE_CONTEXT["wide_view"] %}
            <div class="row">
                <div class="col-md-12">
                    <h3>
                      <div class="visible-xs pull-left btn-offcanvas" data-toggle="offcanvas"><i class="fa fa-bars"></i></div>
                      <div class="pull-left">{{ menu.current_title() }} :: {{ menu.current_sub_title() }}</div>
                      <div class="clearfix"></div>
                    </h3>
                    <hr>
                </div>
            </div>
        {% endif %}

        <div class="row row-offcanvas row-offcanvas-left">
            {% if __.TEMPLATE_CONTEXT["wide_view"] %}
                <div class="col-md-12 col-sm-12 col-xs-12 main">
                    {% include __template__ %}
                </div>

            {% else %}
                <div class="col-md-2 col-sm-3 sidebar  sidebar-offcanvas">
                    {{ menu.panel(use_active=True) }}
                </div>

                <div class="col-md-10 col-sm-9 col-xs-12 main">
                    {% include __template__ %}
                </div>
            {% endif %}


        </div>
    </div>


    {{ master.js_assets("admin-all-js") }}

    <script>
        $(function(){
            $('[data-toggle="offcanvas"]').click(function() {
                $('.row-offcanvas').toggleClass('active')
            });
        })
    </script>

<style>

.btn-offcanvas {
  width: 20px;
  cursor: pointer;
  margin-right: 10px;
}

</style>
</body>
</html>





