{% from "_custom_select.html" import custom_select %}
<div id="new-task-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-4xl max-h-[85vh] flex flex-col modal-content-transition relative z-[100]">
        <div class="p-8 pb-4 flex-shrink-0">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="p-3 bg-orange-500/20 rounded-2xl border border-orange-500/30 mr-4">
                        <i data-lucide="check-square" class="h-6 w-6 text-orange-400"></i>
                    </div>
                    <div>
                        <h3 class="text-2xl font-bold text-white leading-tight">Create New Task</h3>
                        <p class="text-sm text-zinc-500 mt-1">Add a task for Owners and Collaborators</p>
                    </div>
                </div>
                <button onclick="closeModalAnimation(document.getElementById('new-task-modal'))"
                    class="text-zinc-400 hover:text-white transition-colors">
                    <i data-lucide="x" class="h-6 w-6"></i>
                </button>
            </div>
        </div>

        <form id="new-task-form" method="POST"
            action="{{ url_for('tasks.new_task', repo_name=repo_name, repo_owner=repo_owner) }}"
            class="flex-1 flex flex-col overflow-hidden">
            <div class="flex-1 overflow-y-auto px-8 py-4 space-y-6 custom-scrollbar">
                <div class="space-y-2">
                    <label for="new-task-title"
                        class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Title</label>
                    <input type="text" name="title" id="new-task-title" required
                        placeholder="Brief description of the task"
                        class="w-full glass-search-input rounded-xl py-3 px-4 text-sm font-medium text-white focus:ring-2 focus:ring-orange-500/50 focus:border-orange-500/30 outline-none transition-all">
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label
                            class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Priority</label>
                        {{ custom_select(name="priority", id="task-priority", options=[{"value": "LOW", "label": "LOW"}, {"value": "MED", "label": "MED"}, {"value": "HIGH", "label": "HIGH"}], selected_value="MED", selected_label="MED", mode="form", class="w-full") }}
                    </div>
                    <div class="space-y-2">
                        <label
                            class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Complexity</label>
                        {{ custom_select(name="complexity", id="task-complexity", options=[{"value": "LOW", "label": "LOW"}, {"value": "MED", "label": "MED"}, {"value": "HIGH", "label": "HIGH"}], selected_value="MED", selected_label="MED", mode="form", class="w-full") }}
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div class="space-y-2">
                        <label class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Type</label>
                        {{ custom_select(name="task_type", id="task-type", options=[{"value": "Feature", "label": "Feature"}, {"value": "Bug Fix", "label": "Bug Fix"}], selected_value="Feature", selected_label="Feature", mode="form", class="w-full") }}
                    </div>
                    <div class="space-y-2">
                        <label class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Due
                            Date</label>
                        <input type="date" name="due_date"
                            class="w-full glass-search-input rounded-xl py-3 px-4 text-sm font-medium text-white focus:ring-2 focus:ring-orange-500/50 focus:border-orange-500/30 outline-none transition-all align-middle"
                            style="color-scheme: dark;">
                    </div>
                </div>

                <div class="space-y-2">
                    <label for="new-task-assignees"
                        class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Assigned Devs
                        (comma-separated usernames)</label>
                    <input type="text" name="assignees" id="new-task-assignees" data-mentions="true"
                        data-repo-id="{{ repo.id }}" placeholder="E.g. @alice, @bob"
                        class="w-full glass-search-input rounded-xl py-3 px-4 text-sm font-medium text-white focus:ring-2 focus:ring-orange-500/50 focus:border-orange-500/30 outline-none transition-all">
                </div>

                <div class="space-y-2">
                    <label for="new-task-description"
                        class="block text-xs font-bold uppercase tracking-widest text-zinc-500 ml-1">Description</label>
                    <div
                        class="relative rounded-xl overflow-hidden border border-white/10 bg-black/20 focus-within:ring-2 focus-within:ring-orange-500/50 transition-all">
                        <textarea name="description" id="new-task-description" rows="5"
                            class="w-full bg-transparent border-none px-4 py-3 text-zinc-300 placeholder-zinc-600 resize-none outline-none font-mono text-sm leading-relaxed custom-scrollbar"
                            placeholder="Detailed explanation..."></textarea>
                    </div>
                </div>
            </div>

            <div class="p-8 pt-4 flex-shrink-0 flex justify-end space-x-3 border-t border-white/5">
                <button type="button" onclick="closeModalAnimation(document.getElementById('new-task-modal'))"
                    class="glass-button no-hover-lift text-zinc-300 font-bold py-2.5 px-6 rounded-xl text-sm">Cancel</button>
                <button type="submit"
                    class="create-file-btn-shine glass-button-primary font-bold py-2.5 px-8 rounded-xl text-sm">
                    Create Task
                </button>
            </div>
        </form>
    </div>
</div>