<div class="p-6">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h2 class="text-xl font-bold dark:text-white">🎨 Branding Assets</h2>
            <p class="text-xs text-gray-500"><%= total %> images across <%= Object.keys(byCategory).length %> categories. Click to insert filename into media notes.</p>
        </div>
        <button onclick="document.getElementById('spp-assets-modal').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-2xl leading-none">&times;</button>
    </div>

    <% if (total === 0) { %>
        <div class="text-center py-12 text-gray-500">
            <div class="text-4xl mb-2">📭</div>
            <div class="text-sm">No branding assets found. Add files to <code>branding/</code> in the ops manual repo.</div>
        </div>
    <% } %>

    <% Object.keys(byCategory).sort().forEach(function(cat) { %>
        <div class="mb-6">
            <h3 class="text-xs font-semibold uppercase text-gray-500 dark:text-gray-400 mb-2 pb-1 border-b border-gray-200 dark:border-gray-700"><%= cat %></h3>
            <div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2">
                <% byCategory[cat].forEach(function(asset) { %>
                    <div class="group border border-gray-200 dark:border-gray-700 rounded overflow-hidden hover:border-pink-400 cursor-pointer bg-gray-50 dark:bg-gray-900"
                         onclick="window.sppInsertAsset('<%= asset.rel.replace(/'/g, "\\'") %>')">
                        <div class="aspect-square bg-white dark:bg-gray-800 flex items-center justify-center overflow-hidden">
                            <img src="/admin/branding-assets/thumb?path=<%= encodeURIComponent(asset.rel) %>"
                                 alt="<%= asset.name %>"
                                 loading="lazy"
                                 class="max-w-full max-h-full object-contain">
                        </div>
                        <div class="p-1 text-[10px] text-gray-600 dark:text-gray-300 truncate" title="<%= asset.name %>"><%= asset.name %></div>
                    </div>
                <% }); %>
            </div>
        </div>
    <% }); %>
</div>
