{% extends "admin/main/main.html" %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="{{ url_for('admin_slideshowmodule.static',filename='style/admin.css')}}">
{% endblock %}

{% block logohead %}{{ url_for('slideshow.static', filename='images/logo.jpg')}}{% endblock %}

{% block maincontent %}
    <script>
        function update_label(timeout,id){
            document.querySelector(id).value = timeout;
        }
    </script>
    <h1>{{ _('Slideshow')}}</h1>
    <form action="" method="post" enctype="multipart/form-data" novalidate>

        

        {{ form.hidden_tag() }}
        
            {{ form.slide_timeout.label(class='firstcolumn')}}
            <div class="secondcolumn">
                {{ form.slide_timeout(min=0, max=120,step=5, oninput="update_label(value,'#timeout_display')", value=form.slide_timeout.data) }}
                <output id="timeout_display" for="slide_timeout">{{ form.slide_timeout.data }} s</output>
            </div>
        
        
            {{ form.transition.label(class='firstcolumn') }}
            <div class="secondcolumn">
                {{ form.transition() }}

            </div>
            

            <label for="" class="firstcolumn">{{ _('Background')}}</label>
            {% for x in form.background_selected %}
            <div class="secondcolumn">
                {{ x() }}
                <label for="">{{ x.label }}</label>
                {% if x.data == 'solid' %}
                    {{ form.background_color() }}
                {% else %}
                {{ form.background_image() }}
                {% endif %}
            </div>
            {% endfor %}
        
        
            {{ form.title_size.label(class='firstcolumn') }}
            <div class="secondcolumn">
                {{ form.title_size(min=30, max=120, oninput="update_label(value,'#title_size_display')", value=form.title_size.data) }}
                <output id="title_size_display" for="title_size">{{ form.title_size.data }}</output><span>pt</span>

            </div>
        
        
            {{ form.description_size.label(class='firstcolumn') }}
            <div class="secondcolumn">
                {{ form.description_size(min=20, max=80, oninput="update_label(value,'#description_size_display')", value=form.description_size.data) }}
                <output id="description_size_display" for="description_size">{{ form.description_size.data }}</output><span>pt</span>

            </div>
        <div class="secondcolumn actionform">{{ form.submit() }}</div>
    </form>
{% endblock %}