{% extends 'core/widget.html' %}

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

{% block content %}

<!-- projector live view -->
<a href="{% url 'projector_show' %}" target="_blank">
    <div id="iframewrapper">
        <iframe id="iframe" src="{% url 'projector_show' %}" frameborder="0"></iframe>
        <div id="iframeoverlay"></div>
    </div>
</a>

<!-- projector control buttons -->
{% if perms.core.can_manage_projector %}
    <p>
        <a class="projector_edit btn" href="{% url 'projector_bigger' %}" title="{% trans 'Zoom in' %}">
            <i class="icon-zoom-in"></i>
        </a>
        <a class="projector_edit btn" href="{% url 'projector_smaller' %}" title="{% trans 'Zoom out' %}">
            <i class="icon-zoom-out"></i>
        </a>
        <a class="projector_edit btn" href="{% url 'projector_clean_scale' %}" title="{% trans 'Reset zoom level' %}">
            <i class="icon-resize-small"></i>
        </a>
        {% trans "Zoom level" %}: <span id="scale_level">{{ 'projector_scale'|get_config }}</span>
    </p>
    <p>
        <a class="projector_edit btn {% if 'projector_scroll'|get_config == 0 %}disabled{% endif %}" id="scroll_up_button"
            href="{% url 'projector_up' %}" title="{% trans 'Scroll visible view up' %}">
            <i class="icon-arrow-up"></i>
        </a>
        <a class="projector_edit btn" href="{% url 'projector_down' %}" title="{% trans 'Scroll visible view down' %}">
            <i class="icon-arrow-down"></i>
        </a>
        <a class="projector_edit btn" href="{% url 'projector_clean_scroll' %}" title="{% trans 'Reset scroll level' %}">
            <i class="icon-resize-small"></i>
        </a>
        {% trans "Scroll level" %}: <span id="scroll_level">{{ 'projector_scroll'|get_config }}</span>
    </p>
{% endif %}

{% endblock %}