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

<!DOCTYPE html>
<html lang="{{LANGUAGE_CODE}}">
    <head>
        <link href="{% static 'styles/bootstrap.min.css' %}" type="text/css" rel="stylesheet">
        <link href="{% static 'styles/projector.css' %}" type="text/css" rel="stylesheet">
        <link  href="{% static 'img/favicon.png' %}" type="image/png" rel="shortcut icon">
        <title>{% trans 'Projector' %} – {{ 'event_name'|get_config }}</title>

        <script type="text/javascript" src="{% static 'javascript/jquery.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'javascript/sockjs-0.3.min.js' %}"></script>
        <script type="text/javascript" src="{% static 'javascript/projector.js' %}"></script>
        <script type="text/javascript">
            $(function() {
            {% for js in overlay_js %}
                projector.update_data({{ js|safe }});
            {% endfor %}
            {% for key, value in calls.items %}
                projector.{{ key }}({{ value }});
            {% endfor %}
            });
        </script>
        <style type="text/css">
            #header {
                {% if 'projector_backgroundcolor2'|get_config %}
                    background-image: -moz-linear-gradient(top, {{ 'projector_backgroundcolor1'|get_config }}, {{ 'projector_backgroundcolor2'|get_config }});
                    background-image: -ms-linear-gradient(top, {{ 'projector_backgroundcolor1'|get_config }}, {{ 'projector_backgroundcolor2'|get_config }});
                    background-image: -webkit-gradient(linear, 0 0, 0 100%, from({{ 'projector_backgroundcolor1'|get_config }}), to({{ 'projector_backgroundcolor2'|get_config }}));
                    background-image: -webkit-linear-gradient(top, {{ 'projector_backgroundcolor1'|get_config }}, {{ 'projector_backgroundcolor2'|get_config }});
                    background-image: -o-linear-gradient(top, {{ 'projector_backgroundcolor1'|get_config }}, {{ 'projector_backgroundcolor2'|get_config }});
                    background-image: linear-gradient(top, {{ 'projector_backgroundcolor1'|get_config }}, {{ 'projector_backgroundcolor2'|get_config }});
                    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='{{ 'projector_backgroundcolor1'|get_config }}', encColorstr='{{ 'projector_backgroundcolor2'|get_config }}')"; /* IE 8+ */
                {% else %}
                    background-color: {{ 'projector_backgroundcolor1'|get_config }};
                {% endif %}
            }
            #eventdata {
                color: {{ 'projector_fontcolor'|get_config }};
            }
        </style>
    </head>
    <body>
        <div id="header">
            {% if 'projector_enable_logo'|get_config %}
                <img id="logo" alt="Logo" src="{% static 'img/logo-projector.png' %}">
            {% endif %}
            {% if 'projector_enable_title'|get_config %}
                <div id="eventdata">
                    <div class="title {% if not 'event_description'|get_config %}titleonly{% endif %}">{{ 'event_name'|get_config }}</div>
                    {% if 'event_description'|get_config %}
                        <div class="description">{{ 'event_description'|get_config }}</div>
                    {% endif %}
                </div>
            {% endif %}

        </div>

        <div id="overlays">
            {{ overlays }}
        </div>

        <div id="content" {% if reload %}class="reload"{% endif %}>
            {{ content }}
        </div>
    </body>
</html>
