<div class="wrapper-admin-backend">
    <ul class="list-group my-3">
        <li class="list-group-item mb-0 d-flex align-items-center"><label class="mb-0 mr-1">Shortcode: <code>[ts_exercise id='{{exercise_id}}']</code></label><button class="btn btn-secondary btn-sm copy-shortcode-button" type="button" title="Kopieren"><i class="fas fa-copy"></i></button></li>
        <li class="list-group-item d-flex align-items-center"><label class="mb-0 mr-2">Anzahl der Favorisierungen:</label><h4 class="m-0"><span class="badge badge-secondary">{{ count }}</span></h4></li>
    </ul>
    <div class="form-group">
        <label class="mb-2 mx-0 mt-0" for="exerciseHeadlineType">HTML-Element des Titels:</label>
        <select class="form-control" id="exerciseHeadlineType">
            <option {% if exerciseHeadline is not null and exerciseHeadline == "p" %}selected{% endif %} value="p">&lt;p&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "h1" %}selected{% endif %} value="h1">&lt;h1&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "h2" %}selected{% endif %} value="h2">&lt;h2&gt;</option>
            <option {% if (exerciseHeadline is not null and exerciseHeadline == "h3") or exerciseHeadline is empty %}selected{% endif %} value="h3">&lt;h3&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "h4" %}selected{% endif %} value="h4">&lt;h4&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "h5" %}selected{% endif %} value="h5">&lt;h5&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "h6" %}selected{% endif %} value="h6">&lt;h6&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "small" %}selected{% endif %} value="small">&lt;small&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "b" %}selected{% endif %} value="b">&lt;b&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "i" %}selected{% endif %} value="i">&lt;i&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "span" %}selected{% endif %} value="span">&lt;span&gt;</option>
            <option {% if exerciseHeadline is not null and exerciseHeadline == "none" %}selected{% endif %} value="none">keinen Titel anzeigen</option>
        </select>
    </div>
    <div class="form-check pl-0 mb-3  d-flex align-items-center">
        <input type="checkbox" class="form-check-input position-relative m-0" id="exerciseShowBackground" style="margin-top: 0 !important;"
            {% if exerciseShowBackground %}checked{% endif %}>
        <label class="form-check-label m-0 ml-2" for="exerciseShowBackground">Hintergrundfarbe des Themes im Header</label>
    </div>
    <div class="form-check pl-0 mb-3  d-flex align-items-center">
        <input type="checkbox" class="form-check-input position-relative m-0" id="exerciseShowFavButton" style="margin-top: 0 !important;"
            {% if exerciseShowFavButton %}checked{% endif %}>
        <label class="form-check-label m-0 ml-2" for="exerciseShowFavButton">Übung kann favorisiert werden</label>
    </div>
    <div>
        <input type="hidden" id="exercise-options-id" value="{{exercise_id}}">
        <button type="button" class="btn btn-primary my-3" id="backend-exercise-options-save-button"><i class="fas fa-save"></i>&nbsp;Speichern</button>
    </div>
</div>

<script>
    jQuery(document).ready(function ($) {
        jQuery(document).on('click', '#publish', function (e) {
            jQuery('#backend-exercise-options-save-button').click();
        })
    });
</script>