{% load wagtailadmin_tags i18n %}

{% trans "Preview" as heading %}
{% panel id="preview" icon="view" heading=heading %}
    <div class="w-image-url-generator__preview">
        <div class="w-block w-border-2 w-border-border-furniture w-overflow-scroll w-p-4 w-rounded-sm w-max-h-[clamp(25rem,50vh,50rem)]">
            <img class="preview w-max-w-none" src="{{ preview_url }}" alt="{% trans 'Preview' %}" />
        </div>
    </div>
{% endpanel %}

{% trans "URL" as heading %}
{% panel id="url" heading=heading %}
    <div class="w-relative" data-controller="w-clipboard w-clone" data-w-clone-auto-clear-value="5_000" data-action="w-clipboard:copy->w-clone#clear w-clipboard:copied->w-clone#add w-clipboard:error->w-clone#add">
        <label class="w-sr-only" for="result-url">{% trans "Image URL" %}</label>
        <textarea class="w-image-url-generator__url" id="result-url" rows="1" name="result-url" data-controller="w-action" data-action="focus->w-action#select" data-w-clipboard-target="value">{{ result_url }}</textarea>
        <button type="button" class="button button-secondary button-small w-absolute w-top-5 w-right-3 w-bottom-auto w-left-auto !w-bg-surface-page" data-action="w-clipboard#copy" aria-describedby="clipboard-tooltip">
            {% trans "Copy URL" %}
        </button>
        <div class="clipboard-tooltip" data-w-clone-target="container" id="clipboard-tooltip" aria-atomic="true" aria-live="polite"></div>
        <template data-w-clone-target="template" data-type="success">
            <span class="w-text-grey-50 w-absolute w-right-2 w-bg-positive-100 w-p-2 w-rounded-sm">{% trans 'Copied to clipboard' %}</span>
        </template>
        <template data-w-clone-target="template" data-type="error">
            <span class="w-text-grey-50 w-absolute w-right-2 w-bg-critical-100 w-p-2 w-rounded-sm">{% trans 'Copying to clipboard failed' %}</span>
        </template>
    </div>
{% endpanel %}