{% load static %}

<div
    data-detail-tabs-folder-modal
    data-mode="{{ mode }}"
    {% if success %}
        data-success="true"
        data-folder-id="{{ folder_id }}"
        data-folder-name="{{ result_folder_name }}"
    {% endif %}
>
    <form
        hx-post="{% url 'components_detail_tabs_folder_modal' %}"
        hx-target="#bloomerp-general-use-modal-body"
        hx-swap="innerHTML"
        class="space-y-3"
    >
        {% csrf_token %}
        <input type="hidden" name="mode" value="{{ mode }}" />
        <input type="hidden" name="content_type_id" value="{{ content_type_id }}" />
        <input type="hidden" name="folder_id" value="{{ folder_id }}" />

        <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">Folder name</label>
            <input
                type="text"
                name="folder_name"
                value="{{ folder_name }}"
                class="w-full border border-gray-200 rounded-md px-3 py-2 text-sm"
                placeholder="Enter folder name"
                autofocus
            />
        </div>

        {% if error %}
            <p class="text-sm text-red-600">{{ error }}</p>
        {% endif %}

        {% if success %}
            <p class="text-sm text-green-600">Saved successfully.</p>
        {% endif %}

        <div class="flex justify-end gap-2">
            <button
                type="submit"
                class="px-3 py-2 text-sm bg-primary text-white rounded-md hover:opacity-90"
            >
                {% if mode == 'rename' %}Rename{% else %}Create{% endif %}
            </button>
        </div>
    </form>
</div>