{# Matches repo_settings_modal + bulk_delete_modal: glass-modal, white/10 border, icon tile header, footer Cancel + action #}
<div id="repo-delete-confirm-modal"
    class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[110] p-4 text-white">
    <div class="modal-backdrop fixed inset-0 bg-black/60 modal-transition z-[109]"></div>

    <div
        class="modal-content glass-modal modal-radius-lg shadow-3xl w-full max-w-md max-h-[85vh] flex flex-col modal-content-transition relative z-[110] border border-white/10 overflow-hidden">

        <div
            class="p-6 border-b border-white/5 flex items-center justify-between flex-shrink-0 bg-white/[0.02]">
            <div class="flex items-center gap-3 min-w-0">
                <div
                    class="flex-shrink-0 p-2.5 bg-red-500/10 rounded-xl flex items-center justify-center border border-red-500/20">
                    <i data-lucide="trash-2" class="h-6 w-6 text-red-400"></i>
                </div>
                <div class="min-w-0">
                    <h3 class="text-lg font-bold text-white leading-tight tracking-tight">Delete repository</h3>
                    <p class="text-[10px] font-black uppercase tracking-widest text-red-400/90 mt-1">Permanent · No recovery</p>
                </div>
            </div>
            <button type="button" id="repo-delete-modal-close"
                class="flex-shrink-0 p-3 bg-white/[0.03] hover:bg-white/10 border border-white/5 hover:border-white/10 rounded-2xl text-zinc-500 hover:text-white transition-all">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>

        <div class="flex-1 overflow-y-auto px-6 py-6 space-y-5 custom-scrollbar">
            <div class="bg-white/[0.03] rounded-2xl border border-white/5 p-5 space-y-3">
                <p class="text-sm text-zinc-300 leading-relaxed">
                    This removes the repository, its files, branches, and related data from this server. This cannot be undone.
                </p>
                <p class="text-xs text-zinc-500 leading-relaxed">
                    Type the following exactly to confirm:
                </p>
                <code
                    class="block font-mono text-sm bg-black/30 text-red-300 px-3 py-2.5 rounded-xl text-center select-all border border-white/5">{{ repo_owner }}/{{ repo_name }}</code>
            </div>

            <form id="repo-delete-form"
                action="{{ url_for('git.delete_repository', repo_owner=repo_owner, repo_name=repo_name) }}"
                method="POST" class="space-y-2">
                <label for="repo_name_confirm" class="block text-xs font-medium text-zinc-500">Confirmation</label>
                <input type="text" id="repo_name_confirm" name="repo_name_confirm" autocomplete="off"
                    class="w-full glass-search-input py-3 px-4 text-sm font-mono tracking-tight text-white focus:ring-2 focus:ring-red-500/35 focus:border-red-500/25 outline-none transition-all placeholder-zinc-600 rounded-xl border border-white/5 bg-white/[0.02]"
                    placeholder="{{ repo_owner }}/{{ repo_name }}"
                    data-expected-value="{{ repo_owner }}/{{ repo_name }}">
            </form>
        </div>

        <div
            class="p-6 pt-4 border-t border-white/5 flex flex-col-reverse sm:flex-row gap-3 flex-shrink-0 bg-white/[0.02]">
            <button type="button" id="repo-delete-cancel-btn"
                class="flex-1 glass-button py-3 rounded-xl text-[10px] font-black uppercase tracking-widest text-zinc-400 hover:text-white transition-colors">
                Cancel
            </button>
            <button id="repo-delete-confirm-btn" type="submit" form="repo-delete-form" disabled
                class="flex-1 bg-red-600 hover:bg-red-500 text-white py-3 rounded-xl text-[10px] font-black uppercase tracking-widest transition-all flex items-center justify-center gap-2 disabled:opacity-40 disabled:cursor-not-allowed disabled:hover:bg-red-600">
                <i data-lucide="trash-2" class="h-4 w-4"></i>
                <span>Delete repository</span>
            </button>
        </div>
    </div>
</div>