{% extends "base.html" %}
{% import "bootstrap/form.html" as wtf %}


{% block head %}
    {{ super() }}
    {% if filename is defined %}
    <meta http-equiv="refresh" content="0;URL='{{ url_for('download_file', filename=filename) }}'" />
    {% endif %}
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css"
          integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg=="
          crossorigin="anonymous" />
    <link rel="stylesheet"
          href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
          integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog=="
          crossorigin="anonymous" referrerpolicy="no-referrer" />
{% endblock %}

{% block page_header %}
    <h1>Sendungsmitschnitt herunterladen</h1>
{% endblock %}

{% block app_content %}
    <div class="row">
        <div class="col col-xs-12 col-sm-6 col-md-6 col-lg-4">
        <div class='card card-body bg-light'>

        <form class="form" method="post" role="form" novalidate>

        {{ form.hidden_tag() }}

        {{ wtf.form_errors(form, hiddens="only") }}

        <div class="form-group required">
            {{ form.start_time.label(class_="form-control-label") }}
            <div class='input-group date' id='start_time_group' data-target-input="nearest">
                <input name='start_time' id='start_time_'
                    class="form-control datetimepicker-input {{"is-invalid" if form.start_time.errors else ""}}"
                    type="text" data-target="#start_time_group"
                    placeholder="{{ form.start_time.format }}"
                    {% if form.start_time.data %}
                    value="{{ form.start_time.data.strftime(form.start_time.format) }}"
                    {% endif %}
                />
                <div class="input-group-append" data-target="#start_time_group" data-toggle="datetimepicker">
                    <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                </div>
            </div>
            {% if form.start_time.errors %}
                <div class="invalid-feedback">{{ form.start_time.errors|join("<br/>")|safe }}</div>
            {% endif %}
        </div>

        <div class="form-group required">
            {{ form.length.label(class_="form-control-label") }}
            <div class='input-group'>
            {{ form.length(class_="form-control " + ("is-invalid" if form.length.errors else "")) }}
            <div class="input-group-append">
                <span class="input-group-text">Minuten</span>
            </div>
            {% if form.length.errors %}
            <div class="invalid-feedback">{{ form.length.errors|join("<br/>")|safe }}</div>
            {% endif %}
            </div>
        </div>

        <div class="form-group required">
        {{ form.submit(class_="btn btn-primary") }}
        </div>

        </form>

        </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
{{ super() }}

<script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js"
        integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA=="
        crossorigin="anonymous"></script>

<script type="text/javascript">
    $(function() {
        $('#start_time_group').datetimepicker({
            locale: 'de',
            format: 'DD.MM.YYYY HH:mm',
            sideBySide: true
        });
        $(".alert-success").delay(4000).fadeOut(500, function() {
            $(this).alert('close');
        });
    });
</script>
{% endblock %}