{% load tags %}
{% load i18n %}
{% load staticfiles %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}{% get_config 'event_name' %}{% endblock %}</title>
    <!-- styles -->
    <link href="{% static 'css/bootstrap.min.css' %}" type="text/css" rel="stylesheet" />
    <link href="{% static 'css/bootstrap-responsive.min.css' %}" type="text/css" rel="stylesheet" />
    <link href="{% static 'css/jquery-ui/jquery-ui.custom.min.css'%}" type="text/css" rel="stylesheet" />
    <link href="{% static 'css/base.css' %}" type="text/css" rel="stylesheet" />
    <link href="{% static 'css/chatbox.css' %}" type="text/css" rel="stylesheet" />
    <link href="{% static 'img/favicon.png' %}" type="image/png" rel="shortcut icon" />
    <link href="{% static 'css/jquery.bsmselect.css' %}" type="text/css" rel="stylesheet" />
    {% for stylefile in extra_stylefiles %}
        <link href="{% static stylefile %}" type="text/css" rel="stylesheet" />
    {% endfor %}
    {% block header %}{% endblock %}
</head>
<body>
    <!-- Navbar -->
    <div class="container-fluid nopadding">
        <div class="row-fluid">
            <div class="span12">
                <div id="header">
                    <a href="/" class="logo" title="{% trans 'Home' %}"><img src="{% static 'img/logo.png' %}" alt="{% trans 'Logo' %}" /></a>
                    <span class="title optional">{% get_config 'event_name' %}</span>
                    {% block loginbutton %}
                    <div class="pull-right">
                        <!-- Search field -->
                        <form id="searchbutton" class="navbar-search" action="{% url 'core_search' %}" method="get">
                            <div class="input-append">
                                <input type="text" id="id_q" name="q" class="input-medium" placeholder="{% trans 'Search' %}">
                                <button type="submit" class="btn"><i class="icon-search"></i></button>
                            </div>
                        </form> &nbsp;

                        <!-- Chatbox button -->
                        {% if chat_messages != None %}
                            <button class="btn" id="chatboxbutton" data-toggle="button">
                                    <i class="icon-comments"></i>
                                    <span class="optional-small">{% trans 'Chat' %}</span>
                                    <span id="newchatmessage"></span>
                            </button>
                        {% endif %}

                        <!-- login/logout button -->
                        <div class="btn-group">
                            {% if user.is_authenticated %}
                            <a href="#" data-toggle="dropdown" class="btn dropdown-toggle">
                                  <i class="icon-user"></i>
                                  <span class="optional-small">{{ user.username }}</span>
                                  <span class="caret"></span>
                            </a>
                            <ul class="dropdown-menu pull-right">
                                <li><a href="{% url 'user_settings' %}"><i class="icon-cog"></i> {% trans "Edit profile" %}</a></li>
                                <li><a href="{% url 'password_change' %}"><i class="icon-lock"></i> {% trans "Change password" %}</a></li>
                                <li class="divider"></li>
                                <li><a href="{% url 'user_logout' %}"><i class="icon-off"></i> {% trans "Logout" %}</a></li>
                            </ul>
                            {% else %}
                                <a href="{% url 'user_login' %}" class="btn"><i class="icon-login"></i> {% trans "Login" %}</a>
                            {% endif %}
                        </div>
                    </div>
                    {% endblock %}
                </div> <!--/#header-->
            </div> <!--/.span12-->
        </div>
    </div> <!--/.container-fluid-->

    {% block body %}
    <!-- Container -->
    <div class="container-fluid" id="container">
    <div class="row-fluid">

        <!-- Sidebar navigation (main menu) -->
        <div class="span2 leftmenu lefticon">
            <ul>
                {% for entry in main_menu_entries %}
                    <li{% if entry.is_active %} class="active"{% endif %}>
                        <a href="{{ entry.get_url }}" class="tooltip-right">
                        <span class="ico"><i class="{{ entry.get_icon_css_class }}"></i></span>
                        <span class="text">{{ entry }}</span>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        </div>

        <!-- Content -->
        <div id="content" class="span10">
            <div class="row-fluid">
                <div class="span12">
                    <div id="notifications">
                        <div id="dummy-notification" class="notification" style="display:none">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                        </div>
                        {% for message in messages %}
                        <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
                            <button type="button" class="close" data-dismiss="alert">×</button>
                            {{ message|safe }}
                        </div>
                        {% endfor %}
                    </div>
                {% block content %}{% endblock %}
                </div>
            </div>
            <hr />
            <footer>
                <small>
                    &copy; Copyright 2011–2015 | Powered by <a href="http://openslides.org" target="_blank">OpenSlides</a> | <a href="{% url 'core_version' %}">Version</a>
                </small>
            </footer>
        </div><!--/#content-->

    </div><!--/.row-fluid-->
    </div><!--/#container-->
    {% endblock %}<!--/body-->

    {% include 'core/chatbox.html' %}

    <!-- JavaScript (Placed at the end of the document so the pages load faster) -->
    <script src="{% static 'js/jquery/jquery.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery/jquery.cookie.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/jquery/jquery-ui.custom.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/bootstrap.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/sockjs-0.3.min.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/utils.js' %}" type="text/javascript"></script>
    <script src="{% static 'js/chatbox.js' %}" type="text/javascript"></script>
    <script src="{% url 'django.views.i18n.javascript_catalog' %}" type="text/javascript"></script>
    <script type="text/javascript" src="{% static 'js/jquery/jquery.bsmselect.js' %}"></script>
    <script type="text/javascript">
        // use jquery-bsmselect for all <select multiple> form elements
        $("select[multiple]:not(.dont_use_bsmselect)").bsmSelect({
          removeLabel: '<sup><b>X</b></sup>',
          containerClass: 'bsmContainer',
          listClass: 'bsmList-custom',
          listItemClass: 'bsmListItem-custom',
          listItemLabelClass: 'bsmListItemLabel-custom',
          removeClass: 'bsmListItemRemove-custom'
        });
    </script>
    {% for javascript in extra_javascript %}
        <script src="{% static javascript %}" type="text/javascript"></script>
    {% endfor %}
    {% block javascript %}{% endblock %}
</body>
</html>
