<!--
  Mudabbir - Create Task Modal Component

  Created: 2026-02-05
  Extracted from missions.html as part of template componentization.

  Features:
  - Task title and description inputs
  - Priority selector
  - Agent assignment dropdown
  - Tags input (comma-separated)
-->

<!-- Create Task Modal -->
<div
    x-show="missionControl.showCreateTask"
    x-transition.opacity
    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
    @click.self="missionControl.showCreateTask = false"
>
    <div
        class="w-full max-w-lg bg-[#1c1c1e] border border-white/10 rounded-2xl shadow-2xl"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="scale-95 opacity-0"
        x-transition:enter-end="scale-100 opacity-100"
        @click.stop
    >
        <div class="flex items-center justify-between px-6 py-4 border-b border-white/5">
            <h3 class="text-base font-semibold text-white">New Task</h3>
            <button class="p-2 text-white/50 hover:text-white hover:bg-white/10 rounded-lg" @click="missionControl.showCreateTask = false">
                <i data-lucide="x" class="w-4 h-4"></i>
            </button>
        </div>
        <div class="p-6 space-y-4">
            <input
                type="text"
                x-model="missionControl.taskForm.title"
                placeholder="Task title"
                class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-sm text-white focus:outline-none focus:border-accent placeholder-white/30"
                @keydown.enter="createMCTask()"
            >
            <textarea
                x-model="missionControl.taskForm.description"
                placeholder="Description (optional)"
                rows="3"
                class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-sm text-white focus:outline-none focus:border-accent placeholder-white/30 resize-none"
            ></textarea>
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="text-[10px] text-white/40 uppercase tracking-wider mb-2 block">Priority</label>
                    <select
                        x-model="missionControl.taskForm.priority"
                        class="w-full bg-white/5 border border-white/10 rounded-lg py-2.5 px-3 text-sm text-white focus:outline-none focus:border-accent"
                    >
                        <option value="low">Low</option>
                        <option value="medium">Medium</option>
                        <option value="high">High</option>
                        <option value="urgent">Urgent</option>
                    </select>
                </div>
                <div>
                    <label class="text-[10px] text-white/40 uppercase tracking-wider mb-2 block">Assign to</label>
                    <select
                        x-model="missionControl.taskForm.assignee"
                        class="w-full bg-white/5 border border-white/10 rounded-lg py-2.5 px-3 text-sm text-white focus:outline-none focus:border-accent"
                    >
                        <option value="">Unassigned</option>
                        <template x-for="agent in missionControl.agents" :key="agent.id">
                            <option :value="agent.id" x-text="agent.name"></option>
                        </template>
                    </select>
                </div>
            </div>
            <input
                type="text"
                x-model="missionControl.taskForm.tags"
                placeholder="Tags (comma-separated)"
                class="w-full bg-white/5 border border-white/10 rounded-xl py-3 px-4 text-sm text-white focus:outline-none focus:border-accent placeholder-white/30"
            >
            <button
                class="w-full py-3 bg-accent hover:bg-accent/90 text-white font-medium rounded-xl transition-all disabled:opacity-50 disabled:cursor-not-allowed"
                @click="createMCTask()"
                :disabled="!missionControl.taskForm.title"
            >
                Create Task
            </button>
        </div>
    </div>
</div>
