{% from "_custom_select.html" import custom_select %}
<div id="create-pr-modal"
    class="hidden modal-hidden fixed inset-0 flex items-center justify-center z-[100] p-4 overflow-y-auto">
    <div class="modal-backdrop fixed inset-0 bg-black/40 modal-transition z-[99]"></div>

    <div
        class="modal-content glass-modal w-full max-w-2xl max-h-[85vh] flex flex-col modal-content-transition relative z-[100]">

        <!-- Modal Header -->
        <div class="flex items-center justify-between p-6 border-b border-white/5 flex-shrink-0 rounded-t-xl">
            <h3 class="text-xl font-bold font-mono tracking-tight text-white flex items-center">
                <i data-lucide="git-pull-request-create" class="h-6 w-6 mr-3 text-purple-400"></i>
                Create Pull Request
            </h3>

            <button id="create-pr-cancel-btn"
                class="bg-white/5 hover:bg-white/10 text-zinc-400 hover:text-white p-2 rounded-lg transition-colors">
                <i data-lucide="x" class="h-5 w-5"></i>
            </button>
        </div>

        <form id="create-pr-form" class="flex-1 flex flex-col overflow-hidden">
            <div class="flex-1 overflow-y-auto px-6 py-6 space-y-6 custom-scrollbar">

                <!-- Branch Selection Area (Refactored Layout) -->
                <div
                    class="flex flex-col md:flex-row items-center gap-4 bg-white/[0.02] p-6 rounded-2xl border border-white/5">

                    <div class="flex-1 w-full relative space-y-2">
                        <label class="block text-xs uppercase tracking-widest text-zinc-500 font-bold ml-1">Head Repo
                            (Source)</label>
                        {{ custom_select(id="pr-source-repo-select", options=[{"value": "", "label": "Select a repository..."}], selected_value="", selected_label="Select a repository...", mode="form", class="w-full", dynamic=true, picker_title="Head repository") }}
                        {{ custom_select(id="pr-source-branch-select", options=[{"value": "", "label": "Select branch..."}], selected_value="", selected_label="Select branch...", mode="form", class="w-full", disabled=true, dynamic=true, picker_title="Head branch") }}
                    </div>

                    <!-- Arrow -->
                    <div class="flex items-center justify-center pt-6 text-zinc-500 shrink-0">
                        <i data-lucide="arrow-right" class="h-6 w-6 md:rotate-0 rotate-90"></i>
                    </div>

                    <div class="flex-1 w-full relative space-y-2">
                        <label class="block text-xs uppercase tracking-widest text-zinc-500 font-bold ml-1">Base Repo
                            (Target)</label>
                        <div class="relative group">
                            <i data-lucide="git-branch"
                                class="absolute left-3 top-1/2 -translate-y-1/2 text-zinc-500 group-hover:text-purple-400 h-4 w-4"></i>
                            <div id="pr-base-repo-display"
                                class="w-full pl-10 pr-4 py-2 text-sm rounded-lg bg-white/5 border border-white/10 text-zinc-400 font-medium">
                                Loading...
                            </div>
                        </div>

                        {{ custom_select(id="pr-target-branch-select", options=[{"value": "", "label": "Select branch..."}], selected_value="", selected_label="Select branch...", mode="form", class="w-full", dynamic=true, picker_title="Base branch") }}
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="pr-title-input"
                        class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Title</label>
                    <input type="text" id="pr-title-input" required placeholder="e.g. Implement feature X"
                        class="w-full glass-search-input rounded-xl py-3 px-4 text-sm font-medium text-white placeholder-zinc-500 focus:ring-2 focus:ring-purple-500/30 transition-all outline-none">
                </div>

                <div class="space-y-2">
                    <label for="pr-description-textarea"
                        class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Description</label>
                    <textarea id="pr-description-textarea" rows="8" placeholder="What changes did you make?"
                        class="w-full glass-search-input rounded-xl py-3 px-4 text-sm resize-y font-medium text-white placeholder-zinc-500 focus:ring-2 focus:ring-purple-500/30 transition-all outline-none custom-scrollbar"></textarea>
                </div>
            </div>

            <div class="p-6 border-t border-white/5 flex justify-end space-x-3 rounded-b-xl flex-shrink-0">
                <button type="button" onclick="closeModalAnimation(document.getElementById('create-pr-modal'))"
                    class="glass-button no-hover-lift text-zinc-300 font-bold py-2.5 px-6 rounded-xl text-sm">Cancel</button>
                <button id="create-pr-confirm-btn" type="submit"
                    class="create-file-btn-shine glass-button-primary font-bold py-2.5 px-8 rounded-xl text-sm w-full md:w-auto flex items-center justify-center space-x-2">
                    <i data-lucide="check" class="h-4 w-4"></i>
                    <span>Create Pull Request</span>
                </button>
            </div>
        </form>
    </div>
</div>