{% load i18n %}

<span>
    {% trans "Countdown for speaking time" %}:
    <div class="overlayblock">
        <div class="input-append" style="margin-bottom:0;">
            <input class="projector_countdown_spinval" id="countdown_time" name="countdown_time" type="number" min="0" value="{{ countdown_time }}">
            <span class="add-on">{% trans "s" context "seconds" %}</span>
            <button id="countdown_set" class="countdown_control btn tooltip-bottom" href="{% url 'countdown_set_default' %}"
                rel="tooltip" data-original-title="{% trans 'Add time to favourites' %}">
                <i class="icon-star"></i>
            </button>
        </div>
        <a id="countdown_reset" class="countdown_control btn" href="{% url 'countdown_reset' %}"
            rel="tooltip" data-original-title="{% trans 'Reset countdown' %}">
            <i class="icon-fast-backward"></i>
        </a>
        <a id="countdown_play" class="countdown_control btn" href="{% url 'countdown_start' %}"
            rel="tooltip" data-original-title="{% trans 'Start countdown' %}"
            {% if countdown_state == 'active' %} style="display:none"{% endif %}>
            <i class="icon-play"></i>
        </a>
        <a id="countdown_stop" class="countdown_control btn" href="{% url 'countdown_stop' %}"
            rel="tooltip" data-original-title="{% trans 'Stop countdown' %}"
            {% if countdown_state == 'inactive' or countdown_state == 'paused' or countdown_state == 'expired' %} style="display:none"{% endif %}>
            <i class="icon-pause"></i>
        </a>

        <!-- countdown_shortcut -->
        <span id="countdown_shortcut_dummy" class="countdown_shortcut_time btn btn-mini btn-default">
            <span></span>
            <a class="countdown_shortcut_remove" href="#">
                <button type="button" class="close" aria-hidden="true"><sup>&times;</sup></button>
            </a>
        </span>
        <div id="countdown_shortcut_storage"></div>
    </div>
</span>
