<h1 class="text-center mb-5">{{ heading }}</h1>

<p>Hier können die Trainings und die darin verwendeten Medien exportiert als auch neue Trainings importiert werden.</p>
<br>
<div id="successArea" class="d-none alert alert-success" style="margin-top: 10px; margin-bottom: 10px;"></div>
<div id="errorArea" class="d-none alert alert-danger" style="margin-top: 10px; margin-bottom: 10px;"></div>
<br>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#importMedienModal">Import
    Medien</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#importTrainingModal">Import
    Training</button>
<br><br>
{% if trainings is not empty %}
<div class="table-responsive">
    <table id="table" class="table-striped large-list table table-bordered table-hover" 
    data-filter-control="true" data-filter-show-clear="true">
        <thead>
            <tr>
                <th data-field="title" data-filter-control="input" id="title">Training-Titel</th>
                <th data-field="lektion" data-filter-control="input" id="lektion">Lektionen</th>
                <th class="align-middle">Medien-Download</th>
                <th class="align-middle">Training-Download</th>
                <th class="align-middle">Training duplizieren</th>
            </tr>
        </thead>
        <tbody>
            {% for training in trainings %}
            <tr>
                <td>{{training.title}}</td>
                <td>
                    {% for lektion in training.lektionsliste %}
                    <span class="badge badge-light">{{lektion.title}}</span>
                    {% endfor %}
                </td>
                <td class="mediendownload text-center align-middle cursor-pointer"><i class="fas fa-folder h2 m-0"></i><input type="hidden" value="{{training.id}}"></td>
                <td class="trainingdownload text-center align-middle cursor-pointer"><i class="fas fa-download h2 m-0"></i><input type="hidden" value="{{training.id}}"></td>
                <td class="trainingduplicate text-center align-middle cursor-pointer"><i class="fas fa-copy h2 m-0"></i><input type="hidden" value="{{training.id}}"></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>


<script>
    jQuery(function () {
        var $table = jQuery('#table')
        jQuery('#table').bootstrapTable()
    })
</script>
{% else %}
    <div class="alert alert-info" role="alert">
        <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
       <p>
           Es wurden noch keine Trainings angelegt.
       </p> 
    </div>
{% endif %}

{% include "trainings-ex-import/trainings-ex-import-import-medien.html" with {'files' : files} %}
{% include "trainings-ex-import/trainings-ex-import-import-training.html" %}
{% include "trainings-ex-import/trainings-ex-import-loading-export.html" %}
{% include "trainings-ex-import/trainings-ex-import-loading-import.html" %}
{% include "trainings-ex-import/trainings-ex-import-duplicate-training.html" %}
