{% extends "shared/base_dashboard.html" %}
{% block title %}Alocar Tarefa - Chaplin{% endblock %}

{% block content %}
<div class="p-8 max-w-2xl mx-auto">
    <div class="mb-8">
        <a href="{% url 'tasks:detail' task.pk %}" class="text-gray-500 hover:text-orange-500 dark:text-gray-400 dark:hover:text-orange-400 font-medium mb-4 inline-block">&larr; Voltar para Detalhes</a>
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Alocar Responsável</h1>
        <p class="text-gray-600 dark:text-gray-300 mt-2">Escolha um colaborador para executar a tarefa: <strong class="dark:text-white">{{ task.title }}</strong></p>
    </div>

    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-100 dark:border-gray-700 p-6">
        <form method="POST" action="{% url 'tasks:assign' task.pk %}" class="space-y-6">
            {% csrf_token %}
            
            <div>
                <label for="user_id" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Selecione o Responsável <span class="text-red-500">*</span></label>
                <div class="relative">
                    <select name="user_id" id="user_id" required class="appearance-none w-full bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-white py-3 px-4 pr-8 rounded-lg leading-tight focus:outline-none focus:bg-white dark:focus:bg-gray-600 focus:border-orange-500 focus:ring-2 focus:ring-orange-200 transition">
                        <option value="" disabled >Selecione um usuário...</option>
                        {% for u in users %}
                            <option value="{{ u.id }}" {% if task.assigned_to_id == u.id %}selected{% endif %}>
                                {{ u.get_full_name|default:u.username }} ({{ u.profile.get_role_display|default:'Colaborador' }}{% if u.profile.especialidade %} - {{ u.profile.especialidade.nome }}{% endif %})
                            </option>
                        {% endfor %}
                    </select>
                    <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-4 text-gray-700 dark:text-gray-300">
                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                    </div>
                </div>
            </div>

            <div class="pt-6 border-t border-gray-100 dark:border-gray-700 flex gap-4">
                <a href="{% url 'tasks:detail' task.pk %}" class="w-full text-center bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-600 font-semibold py-3 px-4 rounded-lg transition duration-200">
                    Cancelar
                </a>
                <button type="submit" class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold py-3 px-4 rounded-lg transition shadow-md flex justify-center items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
                    Alocar
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}