<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="A motion-design studio based in Paris">
        <meta name="keywords" content="studio, animation, motion design, Geppetto">
        <meta name="author" content="Studio-Geppetto">
        <title>{% block title %}{% endblock %}Studio Geppetto</title>
        <link rel="stylesheet" media="screen" type="text/css" href="{{ asset('bootstrap/css/bootstrap.min.css') }}" />
        <link rel="stylesheet" media="screen" type="text/css" href="{{ asset('bootstrap/css/bootstrap-theme.min.css') }}" />
        <link rel="stylesheet" media="screen" type="text/css" href="{{ asset('jquery/jquery-ui-1.12.1.css') }}" />
        <link rel="stylesheet" media="screen" type="text/css" href="{{ asset('bundles/app/css/app.css') }}?1.1" />
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
        <script type="text/javascript" src="{{ asset('jquery/jquery-1.12.4.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('jquery/jquery-ui-1.12.1.min.js') }}"></script>
        <script type="text/javascript" src="{{ asset('bootstrap/js/bootstrap.min.js') }}"></script>
    </head>
    <body>
        <section id="sidebar" class="hidden-xs">
            <a id="logo" href="{{ path('app_projects') }}">
                <div class="navbar-brand">
                    {% block logo %}<img alt="Logo" src="{{ asset('bundles/app/images/logo-geppetto.png') }}" height="40px" />{% endblock %}
                    <img id="brand" alt="Logo" src="{{ asset('bundles/app/images/logo-name.png') }}" height="40px" class="hidden-xs" />
                </div>
            </a>
            {% block sidebar %}{% endblock %}
        </section>
        <section id="content">
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="row">
                        <!-- browser/tablet header bar -->
                        <div class="col-lg-20 col-md-20 col-sm-20 hidden-xs">
                            <ul class="nav navbar-nav navbar-right">
                                {% if app.user %}
                                    <li>
                                        <a href="{{ path('admin_home') }}" style="padding-top: 0; padding-bottom: 0;">
                                            administration
                                        </a>
                                    </li>
                                    <li>
                                        <a href="{{ path('fos_user_security_logout') }}" style="padding-top: 0; padding-bottom: 0;">
                                            déconnexion
                                        </a>
                                    </li>
                                {% endif %}
                                <li class="hidden-xs">
                                    {{ render(controller('AppBundle:Home:translation')) }}
                                </li>
                                <li class="right">
                                    <a id="menu-link" class="stylised selected menu-link">
                                        {{ 'NAV_MENU'|trans({}, "messages", app.session.get('_locale')) }}
                                    </a>
                                </li>
                            </ul>
                        </div>

                        <!-- mobile header bar -->
                        <div class="col-xs-20 visible-xs">
                            <button type="button" class="navbar-toggle" style="position: absolute; left: 0; top: 0;" data-toggle="collapse" data-target="#navigation">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </button>
                            <img alt="Logo" src="{{ asset('bundles/app/images/logo-geppetto.png') }}"
                                 height="40px"
                                 width="40px"
                                 class="img-responsive center-block"
                            />
                            <a id="menu-link" class="stylised selected menu-link" style="position: absolute; top: 0; right: 0;">
                                {{ 'NAV_MENU'|trans({}, "messages", app.session.get('_locale')) }}
                            </a>
                        </div>
                        <div class="collapse navbar-collapse" id="navigation">
                            <div class="row">
                                <div class="hidden-lg hidden-md hidden-sm col-xs-20">
                                    <ul class="navbar-nav navbar-default" style="margin-bottom: 20px;">
                                        {{ render(controller('AppBundle:Category:categories')) }}
                                        <li style="margin-top: 10px;">{{ render(controller('AppBundle:Home:translation')) }}</li>
                                        {% if app.user %}
                                            <li>
                                                <a href="{{ path('admin_home') }}">
                                                    administration
                                                </a>
                                            </li>
                                            <li>
                                                <a href="{{ path('fos_user_security_logout') }}">
                                                    déconnexion
                                                </a>
                                            </li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </nav>
            <div class="container-fluid">
                {% block body %}{% endblock %}
            </div>
        </section>

        <section id="menu-overlay">
            <div id="overlay-container"></div>
            <div class="overlay-close">×</div>
            <div id="menu-overlay-items">
                {% include 'menu.html.twig' %}
            </div>
        </section>
        <script type="text/javascript">
            $(document).ready(function() {

                $('.menu-link').bind('click', function(e) {
                    e.preventDefault();
                    $('#menu-overlay').show();
                });

                $('.overlay-close').bind('click', function(e) {
                    e.preventDefault();
                    $('#menu-overlay').hide();
                });

            });
        </script>
        {% block javascripts %}{% endblock %}
    </body>
</html>
