{% load i18n %}
<div
    oninput="
        if (event.target.matches('[data-link-url], [data-edit-link-url]')) {
            const option = Array.from(event.target.list?.options || []).find((candidate) => candidate.value === event.target.value);
            const form = event.target.closest('[data-add-link-form], [data-edit-link-form]');
            const nameInput = form?.querySelector('[data-link-name], [data-edit-link-name]');
            if (option && nameInput && !nameInput.value.trim()) nameInput.value = option.dataset.name || '';
        }
    "
>
    <datalist id="workspace-link-route-suggestions">
        {% for route in link_route_suggestions %}
            <option value="{{ route.url }}" data-name="{{ route.name }}">{{ route.name }}{% if route.description %} — {{ route.description }}{% endif %}</option>
        {% endfor %}
    </datalist>

    <div class="border-b border-gray-200 p-3">
        <div class="mb-3 flex items-center justify-between gap-2">
            <h3 class="font-medium">{% blocktrans %}Links and folders{% endblocktrans %}</h3>
            <span class="text-xs text-gray-500">{% blocktrans %}Use the arrows to reorder items{% endblocktrans %}</span>
        </div>
        {% if link_builder_items %}
            <div class="space-y-2">
                {% include "components/workspaces/tile_builders/links_tile_builder_items.html" with items=link_builder_items %}
            </div>
        {% else %}
            <p class="text-sm text-gray-500">{% blocktrans %}No links have been added yet.{% endblocktrans %}</p>
        {% endif %}
    </div>

    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <div class="bg-white p-3 border-r border-gray-200">
            <h3 class="mb-3 font-medium">{% blocktrans %}Add link{% endblocktrans %}</h3>
            <div class="space-y-3" data-add-link-form>
                <label class="block">
                    <span class="mb-1 block text-sm">{% blocktrans %}URL{% endblocktrans %}</span>
                    <input type="text" class="input input-sm w-full" list="workspace-link-route-suggestions" data-link-url autocomplete="off">
                    <span class="mt-1 block text-xs text-gray-500">{% blocktrans %}Search route names or descriptions, or enter any URL.{% endblocktrans %}</span>
                </label>
                <label class="block">
                    <span class="mb-1 block text-sm">{% blocktrans %}Name{% endblocktrans %}</span>
                    <input type="text" class="input input-sm w-full" data-link-name>
                </label>
                <div class="block">
                    <span class="mb-1 block text-sm">{% blocktrans %}Icon (optional){% endblocktrans %}</span>
                    {{ add_link_icon_picker }}
                </div>
                <label class="block">
                    <span class="mb-1 block text-sm">{% blocktrans %}Folder{% endblocktrans %}</span>
                    <select class="input input-sm w-full" data-link-parent>
                        <option value="[]">{% blocktrans %}Top level{% endblocktrans %}</option>
                        {% for folder in link_folder_options %}
                            <option value="{{ folder.path }}">{{ folder.name }}</option>
                        {% endfor %}
                    </select>
                </label>
                <button
                    class="btn btn-primary btn-sm flex w-full items-center justify-center gap-2"
                    type="button"
                    hx-post="{% url 'preview_workspace_tile' %}"
                    hx-vals='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'
                    hx-vars='js:{
                        operation: "add_link",
                        data: {
                            url: this.closest("[data-add-link-form]").querySelector("[data-link-url]").value,
                            name: this.closest("[data-add-link-form]").querySelector("[data-link-name]").value,
                            icon: this.closest("[data-add-link-form]").querySelector("[name=add_link_icon]").value,
                            parent_path: JSON.parse(this.closest("[data-add-link-form]").querySelector("[data-link-parent]").value)
                        }
                    }'
                    hx-target="#tile-preview-section"
                >
                    <i class="fa fa-plus" aria-hidden="true"></i>
                    {% blocktrans %}Add link{% endblocktrans %}
                </button>
            </div>
        </div>

        <div class="p-3">
            <h3 class="mb-3 font-medium">{% blocktrans %}Add folder{% endblocktrans %}</h3>
            <div class="space-y-3" data-add-folder-form>
                <label class="block">
                    <span class="mb-1 block text-sm">{% blocktrans %}Name{% endblocktrans %}</span>
                    <input type="text" class="input input-sm w-full" data-folder-name>
                </label>
                <div class="block">
                    <span class="mb-1 block text-sm">{% blocktrans %}Icon (optional){% endblocktrans %}</span>
                    {{ add_folder_icon_picker }}
                </div>
                <label class="block">
                    <span class="mb-1 block text-sm">{% blocktrans %}Parent folder{% endblocktrans %}</span>
                    <select class="input input-sm w-full" data-folder-parent>
                        <option value="[]">{% blocktrans %}Top level{% endblocktrans %}</option>
                        {% for folder in link_folder_options %}
                            <option value="{{ folder.path }}">{{ folder.name }}</option>
                        {% endfor %}
                    </select>
                </label>
                <button
                    class="btn btn-secondary btn-sm flex w-full items-center justify-center gap-2"
                    type="button"
                    hx-post="{% url 'preview_workspace_tile' %}"
                    hx-vals='{"csrfmiddlewaretoken": "{{ csrf_token }}"}'
                    hx-vars='js:{
                        operation: "add_folder",
                        data: {
                            name: this.closest("[data-add-folder-form]").querySelector("[data-folder-name]").value,
                            icon: this.closest("[data-add-folder-form]").querySelector("[name=add_folder_icon]").value,
                            parent_path: JSON.parse(this.closest("[data-add-folder-form]").querySelector("[data-folder-parent]").value)
                        }
                    }'
                    hx-target="#tile-preview-section"
                >
                    <i class="fa fa-folder-plus" aria-hidden="true"></i>
                    {% blocktrans %}Add folder{% endblocktrans %}
                </button>
            </div>
        </div>
    </div>
</div>