{% load custom_tags_and_filters %}
<form method="POST" action="{% url 'customize' 'publications' %}" class="form-horizontal">
    <div class="panel-body">
        {% csrf_token %}
        <h3 class="customization-section-title">Carousel</h3>
        <div class="form-group">
            <div class="col-md-offset-1 col-md-11 help-block light-grey">
                These settings apply to both carousel: the one on the landing page (if enabled) and the jumbotron available at <a target="_blank" href="{% url 'publications_jumbotron' %}">{% absolute_url 'publications_jumbotron' %}</a>
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4 col-lg-3" for="publications_enable_landing_carousel">Landing page carousel</label>
            <div class="col-md-8 col-lg-9">
                <div class="checkbox">
                    <label>
                        <input type="checkbox"
                               id="publications_enable_landing_carousel"
                               name="publications_enable_landing_carousel"
                               {% if publications_enable_landing_carousel %}checked{% endif %}
                               value="enabled">
                        Enable
                    </label>
                </div>
            </div>
            <div class="col-lg-offset-3 col-md-offset-4 col-md-8 col-lg-9 help-block light-grey">
                Check this box to enable the carousel at the top of the landing page.
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4 col-lg-3" for="publications_carousel_latest_display_count">
                Number of publications
            </label>
            <div class="col-md-5">
                <div class="input-group">
                    <span class="input-group-addon">Most recent</span>
                    <input type="number"
                           step="1"
                           min="0"
                           id="publications_carousel_latest_display_count"
                           name="publications_carousel_latest_display_count"
                           class="form-control text-right"
                           value="{{ publications_carousel_latest_display_count }}" />
                    <span class="input-group-addon">publications</span>
                </div>
            </div>
            <div class="col-lg-offset-3 col-md-offset-4 col-md-8 col-lg-9 help-block light-grey">
                The number of recently added publications to show in the carousel
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-md-4 col-lg-3" for="publications_carousel_interval_time">Interval time</label>
            <div class="col-md-3">
                <div class="input-group">
                    <input type="number"
                           step="1"
                           min="0"
                           id="publications_carousel_interval_time"
                           name="publications_carousel_interval_time"
                           class="form-control text-right"
                           value="{{ publications_carousel_interval_time }}" />
                    <span class="input-group-addon">seconds</span>
                </div>
            </div>
            <div class="col-lg-offset-3 col-md-offset-4 col-md-8 col-lg-9 help-block light-grey">
                The interval time before the carousel slides to the next item
            </div>
        </div>
        <div class="customization-separation" style="margin-bottom: 15px"></div>
        <div class="text-center">{% button type="save" value="Save settings" %}</div>
    </div>
</form>