{# Spreadsheet preview — real column headers from the exporter, capped to keep
   the narrow preview legible (it is explicitly an excerpt). #}
{% set letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'] %}
{% set headers = columns.headers|slice(0, 8) %}

<div class="w-full overflow-x-auto">
    <div class="inline-block min-w-full overflow-hidden rounded-md bg-white shadow-md dark:bg-gray-900">
        <table class="border-collapse whitespace-nowrap text-[10.5px]">
            <thead>
                <tr>
                    <th class="w-6 border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"></th>
                    {% for i in 0..(headers|length - 1) %}
                        <th class="border border-gray-200 bg-gray-50 px-2 py-0.5 text-center text-[9.5px] font-semibold text-gray-400 dark:border-gray-700 dark:bg-gray-800">{{ letters[i] }}</th>
                    {% endfor %}
                </tr>
                <tr>
                    <th class="border border-gray-200 bg-gray-50 dark:border-gray-700 dark:bg-gray-800"></th>
                    {% for h in headers %}
                        <th class="border border-green-800 bg-green-700 px-2.5 py-1.5 text-left text-[10px] font-bold text-white">{{ h }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in columns.rows %}
                    <tr class="{{ loop.index0 is odd ? 'bg-green-50/70 dark:bg-green-500/5' : '' }}">
                        <th class="border border-gray-200 bg-gray-50 text-center text-[9.5px] font-semibold text-gray-400 dark:border-gray-700 dark:bg-gray-800">{{ loop.index + 1 }}</th>
                        {% for cell in row|slice(0, 8) %}
                            <td class="max-w-[120px] truncate border border-gray-200 px-2.5 py-1.5 text-gray-700 dark:border-gray-700 dark:text-gray-300">{{ cell }}</td>
                        {% endfor %}
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="{{ headers|length + 1 }}" class="border border-gray-200 px-3 py-6 text-center text-gray-400 dark:border-gray-700">{{ 'export.previewEmptyHelp'|trans({}, 'admin') }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
