<!--
SPDX-FileCopyrightText: 2025-present Tobias Kunze
SPDX-License-Identifier: AGPL-3.0-only WITH LicenseRef-Pretalx-AGPL-3.0-Terms
-->

{% load i18n %}

{% if widget.is_initial %}<span class="form-image-initial">{{ widget.initial_text }}: <a href="{{ widget.value.url }}" data-lightbox>{{ widget.value }}</a>{% if not widget.is_required %}
    <span class="form-image-clear"><input type="checkbox" name="{{ widget.checkbox_name }}" id="{{ widget.checkbox_id }}"{% if widget.attrs.disabled %} disabled{% endif %}>
        <label for="{{ widget.checkbox_id }}">{{ widget.clear_checkbox_label }}</label></span>{% endif %}</span><br>
    {{ widget.input_text }}:{% endif %}
<div class="avatar-crop-widget" data-widget-id="{{ widget.attrs.id }}">
    <input type="{{ widget.type }}" name="{{ widget.name }}" class="avatar-file-input"{% include "django/forms/widgets/attrs.html" %}>

    <dialog id="avatar-crop-modal-{{ widget.attrs.id }}" class="modal-dialog avatar-crop-modal" role="dialog" aria-labelledby="avatar-crop-label-{{ widget.attrs.id }}">
        <div class="modal-card-content">
            <div class="modal-card-header">
                <h3 id="avatar-crop-label-{{ widget.attrs.id }}">{% translate "Crop your avatar" %}</h3>
                <button type="button" class="btn btn-default btn-xs close-dialog" aria-label="{% translate "Close" %}"><i class="fa fa-times"></i></button>
            </div>
            <div class="avatar-crop-container">
                <img class="avatar-crop-image" src="" alt="{% translate "Image for cropping" %}">
            </div>
            <div class="avatar-crop-actions">
                <button type="button" class="btn btn-secondary close-dialog avatar-crop-cancel">{% translate "Cancel" %}</button>
                <button type="button" class="btn btn-success avatar-crop-apply">{% translate "Apply Crop" %}</button>
            </div>
        </div>
    </dialog>
</div>
