{% extends "wagtailadmin/base.html" %}
{% load static wagtailadmin_tags %}
{% load i18n wagtailadmin_tags %}
{% block titletag %}
    {% trans "Add image from URL" %}
{% endblock %}
{% block bodyclass %}menu-images{% endblock %}
{% block content %}
    {% block header %}
        {% breadcrumbs items=breadcrumbs_items %}
    {% endblock %}

    <div class="w-max-w-6xl w-mx-auto w-mt-8 nice-padding">
        {% include "wagtailadmin/shared/header.html" with title=header_title icon="image" %}

        <!-- Main Card Container -->
        <div class="w-rounded-lg w-shadow-md w-overflow-hidden">
            <!-- Card Header -->

            <!-- Card Body -->
            <div class="w-p-6">

                <!-- URL Input Fields Container -->
                <div id="url-fields-container" class="w-space-y-4 w-mb-6">
                    <!-- Initial URL field with inline result -->
                    <div class="url-field-group w-flex w-items-start w-gap-3 w-p-4 w-rounded-lg w-transition-all hover:w-border-primary-300">
                        <div class="w-flex-1">
                            <label class="w-block w-text-sm w-font-medium w-text-grey-700 w-mb-2">
                                {% trans "Image URL" %} #<span class="url-number">1</span>
                            </label>
                            <input
                                type="url"
                                class="url-input w-w-full w-px-4 w-py-2 w-border w-border-grey-300 w-rounded-md focus:w-ring-2 focus:w-ring-primary-500 focus:w-border-primary-500 w-transition-all w-bg-transparent"
                                placeholder="https://example.com/image.jpg"
                            />
                        </div>
                        <button
                            type="button"
                            class="remove-url-btn w-mt-8 w-p-2 w-text-critical-600 hover:w-bg-critical-50 w-rounded-md w-transition-colors"
                            title="{% trans 'Remove this URL' %}"
                        >
                            <svg class="w-w-5 w-h-5" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                            </svg>
                        </button>
                        <!-- Inline Status Display -->
                        <div class="url-status w-hidden w-mt-8 w-flex w-items-center w-gap-2">
                            <div class="status-icon"></div>
                            <span class="status-text w-text-sm"></span>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons -->
                <div class="w-flex w-items-center w-gap-3 w-mb-6 w-p-4">
                    <button
                        id="add-url-field-btn"
                        type="button"
                        class="button button-secondary w-inline-flex w-items-center"
                    >
                        <svg class="icon icon-plus w-w-4 w-h-4 w-mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                        {% trans "Add Another URL" %}
                    </button>
                </div>

                <!-- Submit Button -->
                <div class="w-flex w-justify-end w-pt-4 w-border-t w-border-grey-200">
                    <button
                        id="fetch-urls-button"
                        type="button"
                        class="button action-save w-inline-flex w-items-center disabled:w-opacity-50 disabled:w-cursor-not-allowed"
                        data-url="{% url 'add_from_url' %}"
                    >
                        <svg class="icon icon-download w-w-4 w-h-4 w-mr-2" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                        </svg>
                        <span class="button-text">{% trans "Fetch All Images" %}</span>
                        <span class="button-loading w-hidden w-inline-flex w-items-center">
                            <svg class="w-animate-spin w-h-5 w-w-5 w-mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            {% trans "Fetching..." %}
                        </span>
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script type="module" src="{% static 'image_url_upload/js/main.js' %}"></script>
{% endblock %}