{% if data %}
<div class="font-mono text-sm w-full">
    <hr class="my-4 border-gray-300">

    <div class="w-full overflow-x-auto max-h-[600px] overflow-y-auto mb-8 border border-gray-200 rounded shadow-sm">
        <table class="w-full border-collapse table-auto">
            <thead class="bg-white">
                <tr>
                    <th class="sticky top-0 z-10 bg-gray-100 text-black font-bold w-12 border border-gray-300 px-2 py-1 text-center">
                        <!-- índice -->
                    </th>
                    {% set headers = [('WEBPI', data['WEBPI_nro_solicitud']), ('GALENA', data['GALENA_nro_solicitud'])] %}
                    {% for sistema, nro in headers %}
                    <th class="sticky top-0 z-10 bg-gray-100 text-black w-[40%] border border-gray-300 px-2 py-1 text-center">
                        <div class="text-blue-600 underline cursor-pointer text-lg">
                            {{ nro | default('sin nro') | safe }}
                        </div>
                        {{ sistema }}
                    </th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for key, value in data.items() if key.startswith('WEBPI_') %}
                {% set campo = key[6:] %}
                {% set galena_key = 'GALENA_' ~ campo %}
                <tr>
                    <td class="bg-gray-100 font-bold w-12 border border-gray-300 px-2 py-1 text-left whitespace-nowrap">
                        {{ campo }}
                    </td>
                    <td class="border border-gray-300 px-2 py-1 align-top break-words">
                        {{ value | safe }}
                    </td>
                    <td class="border border-gray-300 px-2 py-1 align-top break-words">
                        {{ data[galena_key] | default('') | safe }}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}