{% extends "base.html" %}
{% block title %}岗位管理 - findyou{% endblock %}
{% block nav_positions %}bg-gray-700{% endblock %}

{% block content %}
<div x-data="positionManager()" x-init="fetchPositions()" class="space-y-6">
    <div class="flex items-center justify-between">
        <h2 class="text-2xl font-bold text-gray-800">岗位管理</h2>
        <button @click="showForm = !showForm"
                class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm hover:bg-blue-700 transition">
            <span x-text="showForm ? '取消' : '+ 新建岗位'"></span>
        </button>
    </div>

    <div x-show="showForm" x-transition class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-semibold mb-4">新建岗位</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">岗位 ID</label>
                <input x-model="form.id" class="w-full p-2 border rounded text-sm" placeholder="如: sr-python">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">标题</label>
                <input x-model="form.title" class="w-full p-2 border rounded text-sm" placeholder="如: 高级 Python 工程师">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">公司</label>
                <input x-model="form.company" class="w-full p-2 border rounded text-sm">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">地点</label>
                <input x-model="form.location" class="w-full p-2 border rounded text-sm">
            </div>
            <div class="md:col-span-2">
                <label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
                <textarea x-model="form.description" class="w-full p-2 border rounded text-sm" rows="3"></textarea>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">必需技能 (逗号分隔)</label>
                <input x-model="form.required_skills_str" class="w-full p-2 border rounded text-sm" placeholder="Python, FastAPI, PostgreSQL">
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">偏好技能 (逗号分隔)</label>
                <input x-model="form.preferred_skills_str" class="w-full p-2 border rounded text-sm">
            </div>
        </div>
        <button @click="createPosition()"
                class="mt-4 px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 transition">
            创建
        </button>
    </div>

    <div x-show="loading" class="text-center text-gray-500 py-12">加载中...</div>

    <template x-for="pos in positions" :key="pos.id">
        <div class="bg-white rounded-lg shadow p-6">
            <div class="flex justify-between items-start">
                <div>
                    <h3 x-text="pos.title" class="text-lg font-bold text-gray-800"></h3>
                    <p class="text-sm text-gray-500 mt-1">
                        <span x-text="pos.company"></span>
                        <span x-text="pos.location ? ' · ' + pos.location : ''"></span>
                    </p>
                    <div class="flex flex-wrap gap-1 mt-2">
                        <template x-for="skill in pos.required_skills" :key="skill">
                            <span class="px-2 py-0.5 bg-blue-100 text-blue-700 text-xs rounded" x-text="skill"></span>
                        </template>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    <span class="px-3 py-1 rounded-full text-xs font-medium"
                          :class="{
                              'bg-green-100 text-green-800': pos.status === 'active',
                              'bg-yellow-100 text-yellow-800': pos.status === 'paused',
                              'bg-gray-100 text-gray-800': pos.status === 'closed'
                          }"
                          x-text="pos.status"></span>
                </div>
            </div>
            <div class="flex gap-2 mt-4">
                <button x-show="pos.status === 'active'" @click="pausePosition(pos.id)"
                        class="px-3 py-1 text-sm text-yellow-600 hover:underline">暂停</button>
                <button x-show="pos.status === 'paused'" @click="resumePosition(pos.id)"
                        class="px-3 py-1 text-sm text-green-600 hover:underline">恢复</button>
                <button x-show="pos.status !== 'closed'" @click="closePosition(pos.id)"
                        class="px-3 py-1 text-sm text-red-600 hover:underline">关闭</button>
            </div>
        </div>
    </template>

    <div x-show="positions.length === 0 && !loading" class="text-center text-gray-500 py-12">
        <p class="text-lg">暂无岗位</p>
    </div>
</div>
{% endblock %}