{% load crispy_forms_tags %}
{% load bloomerp %}

{% generate_uuid as uuid %}

<div id="id-{{ uuid }}" class="h-[calc(100dvh-8rem)] min-h-[72vh] {% if apply_mx %} -m-4 {% endif %}">
    <div class="grid h-full items-stretch lg:grid-cols-[minmax(320px,420px)_minmax(0,1fr)]" >
        <div class="flex min-h-0 flex-col border-r border-gray-200 bg-slate-50">
            <form
                hx-post="{{ form_action|default:request.get_full_path }}"
                hx-target="#id-{{ uuid }}"
                class="flex min-h-0 flex-1 flex-col"
            >
                <div class="bg-white px-5 py-4 border-b border-gray-200">
                    <h3 class="text-base font-semibold text-slate-900">Document details</h3>
                    <p class="mt-1 text-sm text-slate-500">Choose the source records and values for this document.</p>
                </div>

                <div class="min-h-0 flex-1 overflow-y-auto px-5 py-4">
                    {% csrf_token %}
                    <div class="space-y-4" bloomerp-component="focus-on-form">
                        {{ form | crispy }}
                    </div>
                </div>

                <div class="flex items-center justify-between gap-3 border-t border-gray-200 bg-white px-5 py-4">
                    <p class="text-xs text-slate-500">PDF preview updates after generation.</p>
                    <button class="btn btn-primary">
                        <i class="fa-solid fa-file-pdf" aria-hidden="true"></i>
                        <span><c-i18n.blocktrans>Generate</c-i18n.blocktrans></span>
                    </button>
                </div>
            </form>

            <div class="border-t border-gray-200 bg-white">
                <div class="flex items-center justify-between px-5 py-3">
                    <h3 class="text-sm font-semibold text-slate-900">Generated files</h3>
                    {% if files %}
                        <span class="text-xs font-medium text-slate-500">{{ files|length }}</span>
                    {% endif %}
                </div>
                {% if generated_file %}
                    <div class="border-b border-emerald-100 bg-emerald-50 px-5 py-2 text-xs font-medium text-emerald-700">
                        Saved {{ generated_file.name }}
                    </div>
                {% endif %}
                {% if files %}
                    <div class="max-h-56 divide-y divide-gray-100 overflow-y-auto">
                        {% for file in files %}
                            <div class="flex items-center gap-3 px-5 py-3">
                                <div class="flex h-9 w-9 shrink-0 items-center justify-center bg-slate-50 text-slate-500">
                                    <i class="fa-regular fa-file-pdf" aria-hidden="true"></i>
                                </div>
                                <div class="min-w-0 flex-1">
                                    <a
                                        href="{% url 'components_preview_file' file.id %}"
                                        hx-get="{% url 'components_preview_file' file.id %}"
                                        hx-target="#id-{{ uuid }}-preview-body"
                                        hx-swap="innerHTML"
                                        class="block truncate text-sm font-medium text-slate-900 hover:text-primary"
                                    >
                                        {{ file.name }}
                                    </a>
                                    <p class="mt-0.5 truncate text-xs text-slate-500">
                                        {{ file.datetime_created|date:request.user.datetime_view_preference }} &middot; {{ file.size_str }}
                                    </p>
                                </div>
                                <a
                                    href="{% url 'components_preview_file' file.id %}"
                                    hx-get="{% url 'components_preview_file' file.id %}"
                                    hx-target="#id-{{ uuid }}-preview-body"
                                    hx-swap="innerHTML"
                                    class="btn btn-ghost btn-xs"
                                    title="View"
                                >
                                    <i class="fa-regular fa-eye" aria-hidden="true"></i>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="px-5 py-5 text-sm text-slate-500">
                        Saved PDFs will appear here.
                    </div>
                {% endif %}
            </div>
        </div>

        <div class="flex min-h-0 flex-col overflow-hidden bg-white">
            <div class="flex items-center justify-between border-b border-gray-200 px-5 py-4">
                <div>
                    <h3 class="text-base font-semibold text-slate-900">
                        <c-i18n.blocktrans>Preview</c-i18n.blocktrans>
                    </h3>
                    <p class="mt-1 text-sm text-slate-500">Review the generated PDF before using it.</p>
                </div>
                {% if file_bytes %}
                    <span class="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">Generated</span>
                {% else %}
                    <span class="rounded-full bg-slate-50 px-3 py-1 text-xs font-semibold text-slate-600">Waiting</span>
                {% endif %}
            </div>
            <div id="id-{{ uuid }}-preview-body" class="min-h-0 flex-1">
                {% if file_bytes %}
                    <div class="h-full bg-slate-900">
                        <iframe
                            src="data:application/pdf;base64,{{ file_bytes }}"
                            class="h-full w-full"
                            title="Generated PDF preview"
                        ></iframe>
                    </div>
                {% else %}
                    <div class="flex h-full items-center justify-center bg-slate-50 px-8 text-center">
                        <div class="max-w-sm">
                            <div class="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-white text-slate-400 shadow-xs">
                                <i class="fa-regular fa-file-pdf text-2xl" aria-hidden="true"></i>
                            </div>
                            <h4 class="text-sm font-semibold text-slate-900">No preview yet</h4>
                            <p class="mt-2 text-sm text-slate-500">Generate the document to preview the PDF here.</p>
                        </div>
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>