<div class="wrapper-admin-backend">
    <ul class="list-group mt-3">
        <li class="list-group-item mb-0 formlist">
            <span>Ist diese Option aktiv, wird standardmäßig dieser Avatar im Shortcode <code>[tspv2_my_avatar]</code> angezeigt, sofern noch kein Avatar ausgewählt wurde.</span>
            <div class="form-check mb-2  d-flex align-items-center">
                <input type="checkbox" class="form-check-input position-relative"  id="default-avatar-checkbox" value="true" {% if is_default_avatar %}checked{% endif %}>
                <label for="default-avatar-checkbox" class="form-check-label mb-0 mr-5 ml-2">
                    Dieser Avatar ist der Default-Avatar
                </label>
            </div>
        </li>
        <li class="list-group-item mb-0">
            <h6>Auswahl einer Bilddatei:</h6>
            <div {% if avatarImage.url is not empty %}class="d-none"{% endif %} id="avatar-no-image">
                <p>Keine Datei ausgewählt.</p>
            </div>
            <div {% if avatarImage.url is empty %}class="d-none"{% endif %} id="avatar-image-preview">
                <img class="img-fluid w-25 mb-4 mt-2" {% if avatarImage.url is not empty %}src="{{avatarImage.url}}"{% endif %}>
            </div>
            <div class="form-group">
                <button id="avatar-image-button" class="btn btn-primary mr-3"><i class="fas fa-image"></i>&nbsp;Bilddatei auswählen</button>
                <button id="avatar-remove-image-button" class="btn btn-secondary {% if avatarImage.url is empty %}d-none{% endif %}">Bilddatei entfernen</button>
                <input type="hidden" id="avatar-image-url" value="{% if avatarImage.url is not empty %}{{avatarImage.url}}{% endif %}">
                <input type="hidden" id="avatar-image-id" value="{% if avatarImage.id is not empty %}{{avatarImage.id}}{% endif %}">
            </div>
        </li>
        <li class="list-group-item mb-0">
            <h6>Auswahl einer GIF-Datei:</h6>
            <div {% if avatarGif.url is not empty %}class="d-none"{% endif %} id="avatar-no-gif">
                <p>Keine Datei ausgewählt.</p>
            </div>
            <div {% if avatarGif.url is empty %}class="d-none"{% endif %} id="avatar-gif-preview">
                <img class="img-fluid w-25 mb-4 mt-2" {% if avatarGif.url is not empty %}src="{{avatarGif.url}}"{% endif %}>
            </div>
            <div class="form-group">
                <button id="avatar-gif-button" class="btn btn-primary mr-3"><i class="fas fa-image"></i>&nbsp;GIF-Datei auswählen</button>
                <button id="avatar-remove-gif-button" class="btn btn-secondary {% if avatarGif.url is empty %}d-none{% endif %}">GIF-Datei entfernen</button>
                <input type="hidden" id="avatar-gif-url" value="{% if avatarGif.url is not empty %}{{avatarGif.url}}{% endif %}">
                <input type="hidden" id="avatar-gif-id" value="{% if avatarGif.id is not empty %}{{avatarGif.id}}{% endif %}">
            </div>
        </li>
    </ul>
    <div>
        <input type="hidden" id="avatar-options-id" value="{{postid}}">
        <button type="button" class="btn btn-primary my-3" id="backend-avatar-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-avatar-options-save-button').click();
        })
    });
</script>