{# templates/repository_modals/repo_info_modal.html #}
<div id="repo-info-modal" class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[110] p-4">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition" id="repo-info-backdrop"></div>
    <div
        class="modal-content glass-modal modal-radius-lg shadow-3xl w-full max-w-lg border border-white/10 modal-content-transition relative flex flex-col overflow-hidden max-h-[90vh]">

        <div class="p-6 border-b border-white/5 flex items-center justify-between bg-white/[0.02]">
            <div class="flex items-center gap-3">
                <div
                    class="w-10 h-10 bg-blue-500/10 rounded-xl flex items-center justify-center border border-blue-500/20">
                    <i data-lucide="info" class="h-6 w-6 text-blue-400"></i>
                </div>
                <div>
                    <h3 class="text-lg font-bold text-white leading-tight">Repository Insights</h3>
                    <p class="text-xs text-zinc-500">{{ repo_owner }}/{{ repo_name }}</p>
                </div>
            </div>
            <button id="repo-info-close-btn"
                class="p-2 rounded-xl hover:bg-white/5 text-zinc-400 hover:text-white transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>

        <div class="overflow-y-auto CustomScrollbar p-6 space-y-8">
            <!-- Stats Grid -->
            <div class="grid grid-cols-2 gap-4">
                <div class="p-4 rounded-2xl bg-white/[0.03] border border-white/5">
                    <div class="flex items-center gap-2 mb-3">
                        <i data-lucide="file-text" class="h-3.5 w-3.5 text-zinc-500"></i>
                        <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Files</span>
                    </div>
                    <p class="text-2xl font-black text-white" id="info-file-count">0</p>
                </div>
                <div class="p-4 rounded-2xl bg-white/[0.03] border border-white/5">
                    <div class="flex items-center gap-2 mb-3">
                        <i data-lucide="history" class="h-3.5 w-3.5 text-zinc-500"></i>
                        <span class="text-[10px] font-bold text-zinc-500 uppercase tracking-widest">Commits</span>
                    </div>
                    <p class="text-2xl font-black text-white" id="info-commit-count">0</p>
                </div>
            </div>

            <!-- Size Progress Section -->
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                        <i data-lucide="database" class="h-4 w-4 text-zinc-400"></i>
                        <span class="text-xs font-bold text-zinc-300">Storage Usage</span>
                    </div>
                    <span class="text-xs font-medium text-zinc-500" id="info-size-label">0 MB / 0 MB</span>
                </div>
                <div class="h-3 w-full bg-white/5 rounded-full overflow-hidden border border-white/5 p-0.5">
                    <div id="info-size-progress" class="h-full rounded-full transition-all duration-1000 ease-out"
                        style="width: 0%; background: linear-gradient(90deg, #3b82f6, #60a5fa);"></div>
                </div>
                <p class="text-[10px] text-zinc-600 italic">Storage quota is based on your account tier and repository
                    visibility.</p>
            </div>

            <!-- Creation Date -->
            <div class="flex items-center justify-between p-4 rounded-2xl bg-white/[0.03] border border-white/5">
                <div class="flex items-center gap-3">
                    <i data-lucide="calendar" class="h-5 w-5 text-zinc-500"></i>
                    <span class="text-sm text-zinc-300">Creation Date</span>
                </div>
                <span class="text-sm font-semibold text-white" id="info-creation-date">-</span>
            </div>

            <!-- Language Tree -->
            <div class="space-y-4">
                <div class="flex items-center gap-2">
                    <i data-lucide="code-2" class="h-4 w-4 text-zinc-400"></i>
                    <span class="text-xs font-bold text-zinc-300">Language Composition</span>
                </div>
                <div id="info-languages-container" class="space-y-3">
                    <!-- Populated via JS -->
                </div>
            </div>
        </div>

        <div class="p-6 bg-white/[0.02] border-t border-white/5">
            <p class="text-[10px] text-zinc-500 text-center uppercase tracking-widest font-bold">Stats are cached and
                updated on every commit</p>
        </div>
    </div>
</div>