<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    {% load i18n %}
    {% load static %}

    <title> {{ SETTINGS.SITE_NAME }} </title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/libs/bootstrap/css/bootstrap.min.css' %}">
    <link rel="stylesheet" type="text/css" href="{% static 'css/styles.css' %}">
    {% block extra_css %}{% endblock %}
</head>

<body ng-app="MusetteApp">
    <div class="navbar navbar-default">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a class="navbar-brand" href="/forums/" style="margin-top: -10px; margin-bottom: 5px">
              <img src="{% static 'img/logo.png' %}" width="160" height="100" class="img-responsive">
          </a>
        </div>

        <div class="container">
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <!-- Notifications -->
                <ul class="nav navbar-nav navbar-right">
                    {% if user.id %}
                      {% include "musette/notification.html" %}
                    {% endif %}
                </ul>
            </div>
        </div>

    </div>

    <section>
        {% block content %}
        {% endblock %}
    </section>

    <hr>

    <footer>
        <div class="container">
            <div class="pull-left">
                <a href="/"><p class="text-muted"> {{ SETTINGS.SITE_NAME }} </p></a>
            </div>
            {% if SETTINGS.LANGUAGES|length > 1 %}
            <div id="lenguage_sel" class="pull-right">
                <form action="{% url 'set_language' %}" method="post" class="form-search">
                    {% csrf_token %}
                    <input name="next" type="hidden" value="{{ redirect_to }}" />
                    <div class="input-group">
                        <select class="form-control input-sm" name="language">
                        {% get_current_language as LANGUAGE_CODE %}
                        {% get_available_languages as LANGUAGES %}
                        {% get_language_info_list for LANGUAGES as languages %}
                        {% for language in languages %}
                        <option value="{{ language.code }}"{% if language.code == LANGUAGE_CODE %} selected="selected"{% endif %}>
                            {{ language.name_local }} ({{ language.code }})
                        </option>
                        {% endfor %}
                        </select>
                        <span class="input-group-btn">
                            <input type="submit" class="btn btn-flat btn-default  btn-sm" value="Go" />
                        </span>
                    </div>
                </form>
            </div>
            {% endif %}
        </div>
        <br>
    </footer>

    {% block hitcount_javascript %}{% endblock %}
    <script src="{% static 'js/libs/jquery/jquery-2.1.3.min.js' %}"></script>
    <script src="{% static 'js/libs/bootstrap/bootstrap.min.js' %}"></script>
    <script src="{% static 'js/frameworks/angularjs/angular.min.js' %}"></script>
    <script src="{% static 'hitcount/hitcount-jquery.js' %}"></script>

    <script src="{% static 'endless_pagination/js/module.endless.js' %}"></script>
    <script src="{% static 'js/modules/musette.module.js' %}"></script>
    {% block extra_js %}{% endblock %}

</body>
</html>