<div class="wrapper-admin-backend">
    <h6>Auswahl eines Logos: <small>(optional)</small></h6>
    <div {% if certificate_header.logo_url is not empty %}class="d-none"{% endif %} id="zertifikat-no-logo">
        <p>Kein Bild ausgewählt.</p>
    </div>
    <div {% if certificate_header.logo_url is empty %}class="d-none"{% endif %} id="zertifikat-logo-preview">
        <img class="img-fluid w-25 mb-4 mt-2" {% if certificate_header.logo_url is not empty %}src="{{certificate_header.logo_url}}"{% endif %}>
    </div>
    <div class="form-group">
        <button id="zertifikat-logo-button" class="btn btn-primary mr-3"><i class="fas fa-image"></i>&nbsp;Bild auswählen</button>
        <button id="zertifikat-remove-logo-button" class="btn btn-secondary {%if certificate_header.logo_url is empty %}d-none{% endif %}">Bild entfernen</button>
        <input type="hidden" id="zertifikat-logo-url" value="{% if certificate_header.logo_url is not empty %}{{certificate_header.logo_url}}{% endif %}">
        <input type="hidden" id="zertifikat-logo-id" value="{% if certificate_header.logo_id is not empty %}{{certificate_header.logo_id}}{% endif %}">
        <input type="hidden" id="zertifikat-logo-hwratio" value="{% if certificate_header.logo_hwratio is not empty %}{{certificate_header.logo_hwratio}}{% endif %}">
    </div>
    <div {% if certificate_header.logo_url is empty %}class="d-none"{% endif %} id="zertifikat-logo-options">
        <h6>Größe des Logos festlegen:</h6>
        <div class="form-group">
            <label class="ml-0" for="zertifikat-logo-height">Höhe des Logos (in mm)</label>
            <input type="number" min="1" max="25" id="zertifikat-logo-height" class="form-control" step="1" {% if certificate_header.logo_height is not empty%}value="{{certificate_header.logo_height}}"{% endif %}>
        </div> 
        <div class="form-group">
            <label class="ml-0" for="zertifikat-logo-width">Breite des Logos (in mm)</label>
            <input type="number" min="1" id="zertifikat-logo-width" class="form-control" step="1" {% if certificate_header.logo_width is not empty%}value="{{certificate_header.logo_width}}"{% endif %} disabled>
        </div>
        <h6>Positionierung des Logos:</h6>
        <div class="form-check form-check-inline">
            <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-logo-orientation-left" name="zertifikat-logo-orientation" {% if certificate_header.logo_orientation == "left" or certificate_header is empty%}checked{% endif %}>
            <label for="zertifikat-logo-orientation-left" class="form-check-label mb-1 ml-2">links</label>
        </div>
        <div class="form-check form-check-inline">
            <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-logo-orientation-center" name="zertifikat-logo-orientation" {% if certificate_header.logo_orientation == "center"%}checked{% endif %}>
            <label for="zertifikat-logo-orientation-center" class="form-check-label mb-1 ml-2">mittig</label>
        </div>
        <div class="form-check form-check-inline">
            <input type="radio" class="form-check-input mt-0 position-relative" id="zertifikat-logo-orientation-right" name="zertifikat-logo-orientation" {% if certificate_header.logo_orientation == "right"%}checked{% endif %}>
            <label for="zertifikat-logo-orientation-right" class="form-check-label mb-1 ml-2">rechts</label>
        </div>
    </div>
</div>