{{define "image_editor"}}
<fieldset class='image-editor' data-image-editor>
    <legend>Bild</legend>
	<input type='hidden' name='image_data' value='{{.ImageData}}' data-image-value>
	<input type='hidden' name='image_id' value='{{.ImageID}}' data-image-id>
	<div class='image-preview' data-image-preview><span {{if .ImageData}}hidden{{end}}>Noch kein Bild gewählt</span></div>
    <div class='image-actions'>
        <label class='button secondary image-file-button'>Bild hochladen<input type='file' accept='image/jpeg,image/png,image/webp' data-image-file></label>
        <button type='button' class='secondary' data-image-camera>Foto aufnehmen</button>
		{{if .Images}}<button type='button' class='secondary' data-image-library-open>Aus Bilderdatenbank</button>{{end}}
		<button type='button' class='secondary' data-image-remove {{if not .ImageData}}hidden{{end}}>Bild entfernen</button>
    </div>
	{{if .Images}}<dialog class='image-library-dialog' data-image-library-dialog><h3>Bild aus der Bilderdatenbank auswählen</h3><div class='image-picker-grid'>{{range .Images}}<button type='button' class='image-picker-item {{if eqInt $.ImageID .ID}}is-selected{{end}}' data-image-library-select data-image-id='{{.ID}}' data-image-url='/g/{{$.GardenID}}/images/{{.ID}}/data'><img src='/g/{{$.GardenID}}/images/{{.ID}}/data' alt='{{if .FileName}}{{.FileName}}{{else}}Bild auswählen{{end}}' loading='lazy'><span>{{if .FileName}}{{.FileName}}{{else}}{{.CreatedAt.Format "02.01.2006"}}{{end}}</span></button>{{end}}</div><div class='image-actions'><button type='button' class='secondary' data-image-library-cancel>Abbrechen</button></div></dialog>{{end}}
    <dialog class='image-dialog' data-image-dialog>
        <h3>Bild zuschneiden</h3>
        <div class='cropper-stage'><img alt='Vorschau zum Zuschneiden' data-cropper-image></div>
        <div class='image-actions'>
            <button type='button' class='secondary' data-image-rotate-left aria-label='Nach links drehen'>↶ Drehen</button>
            <button type='button' class='secondary' data-image-rotate-right aria-label='Nach rechts drehen'>↷ Drehen</button>
            <button type='button' data-image-apply disabled>Übernehmen</button>
            <button type='button' class='secondary' data-image-cancel>Abbrechen</button>
        </div>
        <p class='field-error' data-image-error aria-live='polite'></p>
    </dialog>
    <dialog class='camera-dialog' data-camera-dialog>
        <h3>Foto aufnehmen</h3>
        <video autoplay muted playsinline data-camera-video></video>
        <p class='field-error' data-camera-error aria-live='polite'></p>
        <div class='image-actions'>
            <button type='button' class='secondary' data-camera-switch>Kamera wechseln</button>
            <button type='button' data-camera-capture disabled>Foto aufnehmen</button>
            <button type='button' class='secondary' data-camera-cancel>Abbrechen</button>
        </div>
    </dialog>
    <p class='muted'>Das Bild wird im Verhältnis 3:2 zugeschnitten und für die Kacheldarstellung optimiert.</p>
</fieldset>
{{end}}