<style>
    .wrapper-admin-backend {
        padding: 1em;
    }

    #app-audio__form-wrapper {
        max-width: 300px;
        margin-bottom: 2em;
    }
</style>

<div class="wrapper-admin-backend">
    <h1>Trainings - Audios verknüpfen</h1>
    <div id="app-audio__form-wrapper">
        <form method="post">
            <div class="form-group">
                <label for="lektionId" class="ml-0">Training/Lektion ID</label>
                <select class="custom-select" size="1" id="lektionId" name="trainingId">
                    {% for tl in trainings_lektionen %}
                        <option value="{{ tl.ID }}">{{ tl.post_title }} (#{{tl.ID}})</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label for="audioId" class="ml-0">Audio ID</label>
                <select class="custom-select" size="1" id="audioId" name="audioId">
                    {% for audio in audio_files %}
                        <option value="{{ audio.ID }}">{{ audio.post_title }} (#{{audio.ID}})</option>
                    {% endfor %}
                </select>
            </div>

            <div class="form-group">
                <label for="action" class="bmd-label-floating ml-0">Aktion</label>
                <select class="form-control" id="action" name="action">
                    <option value="add">Hinzufügen</option>
                    <option value="del">Löschen</option>
                </select>
            </div>

            <button type="submit" name="submit" class="btn btn-primary btn-raised" id="backend-admin-app-audio-submit">Ausführen</button>
        </form>
    </div>

    <h2>Bestehende Verknüpfungen</h2>
    {% if trainingAudioLinks is not empty %}
        <table class="table table-striped table-hover table-bordered">
            <thead>
                <tr>
                    <th scope="col" class="align-middle text-center">Training/Lektion ID</th>
                    <th scope="col" class="align-middle text-center">Audio ID</th>
                    <th scope="col" class="align-middle text-center"><i class="fas fa-trash-alt"></i></th>
                </tr>
            </thead>
            <tbody>
                {% for row in trainingAudioLinks %}
                    <tr>
                        <td class="align-middle">{{ trainings_lektionen[row.training_id].post_title }}</td>
                        <td class="align-middle">{{ audio_files[row.audio_id].post_title }}</td>
                        <td class="align-middle text-center"><button class="backend-admin-app-audio-row-delete btn btn-danger btn-sm" type="button" data-traininglektion="{{ row.training_id }}" data-audio="{{ row.audio_id }}"><i class="fas fa-trash-alt"></i></button></td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    {% else %}
        <div class="alert alert-info" role="alert">
            <h5><i class="fas fa-info-circle"></i>&nbsp;Hinweis</h5>
            <p>
                Es gibt noch keine Verknäpfungen im System.
            </p>
        </div>
    {% endif %}
</div>