{% extends "base.html" %}

{% block title %}Listar Colaboradores - SGMP{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-slate-800 mb-2">Selecionar Colaborador</h1>
    <p><a href="{% url 'solicitacoes:dashboard' %}" class="text-primary font-medium hover:underline">← Voltar ao Dashboard</a></p>
</div>

<div class="bg-white p-5 rounded-lg shadow border border-slate-200 mb-5">
    <form method="get" class="flex flex-wrap gap-3">
        <input type="text" name="q" value="{{ busca }}" placeholder="Buscar por nome ou matrícula..." class="flex-1 min-w-[200px] py-2 px-3 border border-slate-200 rounded-md focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20">
        {% if tipo == 'substituicao' %}<input type="hidden" name="tipo" value="substituicao">{% endif %}
        <button type="submit" class="py-2 px-4 bg-primary text-white rounded-md font-semibold hover:bg-primary-hover transition-colors">Buscar</button>
        {% if busca %}<a href="{% url 'solicitacoes:listar_colaboradores' %}{% if tipo == 'substituicao' %}?tipo=substituicao{% endif %}" class="py-2 px-4 bg-slate-500 text-white no-underline rounded-md inline-block hover:bg-slate-600 transition-colors">Limpar</a>{% endif %}
    </form>
    {% if apenas_desligados %}
    <div class="mt-3 p-3 bg-amber-50 border border-amber-300 rounded-md text-amber-800 text-sm">
        <strong>ℹ️ Informação:</strong> Mostrando apenas colaboradores <strong>DESLIGADOS</strong> (útil para admissão por substituição).
    </div>
    {% endif %}
</div>

<div class="bg-white rounded-lg shadow border border-slate-200 overflow-hidden">
    <table class="w-full border-collapse">
        <thead>
            <tr>
                <th class="p-3 text-left border-b border-slate-200 bg-slate-50 font-semibold text-slate-600">Matrícula</th>
                <th class="p-3 text-left border-b border-slate-200 bg-slate-50 font-semibold text-slate-600">Nome</th>
                <th class="p-3 text-left border-b border-slate-200 bg-slate-50 font-semibold text-slate-600">Cargo</th>
                <th class="p-3 text-left border-b border-slate-200 bg-slate-50 font-semibold text-slate-600">Setor</th>
                <th class="p-3 text-left border-b border-slate-200 bg-slate-50 font-semibold text-slate-600">Centro de Custo</th>
                <th class="p-3 text-left border-b border-slate-200 bg-slate-50 font-semibold text-slate-600">Ações</th>
            </tr>
        </thead>
        <tbody>
            {% for colaborador in colaboradores %}
            <tr class="border-b border-slate-200 hover:bg-slate-50">
                <td class="p-3 text-slate-800">{{ colaborador.matricula }}</td>
                <td class="p-3 text-slate-800">{{ colaborador.nome }}</td>
                <td class="p-3 text-slate-800">{{ colaborador.cargo }}</td>
                <td class="p-3 text-slate-800">{{ colaborador.setor }}</td>
                <td class="p-3 text-slate-800">{{ colaborador.centro_custo }}</td>
                <td class="p-3 whitespace-nowrap">
                    <a href="{% url 'solicitacoes:criar_desligamento' colaborador.id %}" class="mr-2 py-1.5 px-2.5 no-underline bg-primary text-white rounded text-sm hover:bg-primary-hover transition-colors">Desligamento</a>
                    <a href="{% url 'solicitacoes:criar_movimentacao' colaborador.id %}" class="mr-2 py-1.5 px-2.5 no-underline bg-primary text-white rounded text-sm hover:bg-primary-hover transition-colors">Movimentação</a>
                    <a href="{% url 'solicitacoes:criar_admissao_substituicao' colaborador.id %}" class="py-1.5 px-2.5 no-underline bg-primary text-white rounded text-sm hover:bg-primary-hover transition-colors">Substituição</a>
                </td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="6" class="p-6 text-center text-slate-500">Nenhum colaborador encontrado.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

{% if colaboradores.has_other_pages %}
<div class="mt-5 flex items-center justify-center gap-2 flex-wrap">
    {% if colaboradores.has_previous %}
    <a href="?page=1{% if busca %}&q={{ busca }}{% endif %}{% if tipo == 'substituicao' %}&tipo=substituicao{% endif %}" class="py-2 px-3 no-underline border border-slate-200 rounded-md text-slate-600 bg-white hover:bg-slate-50 hover:border-primary">« Primeira</a>
    <a href="?page={{ colaboradores.previous_page_number }}{% if busca %}&q={{ busca }}{% endif %}{% if tipo == 'substituicao' %}&tipo=substituicao{% endif %}" class="py-2 px-3 no-underline border border-slate-200 rounded-md text-slate-600 bg-white hover:bg-slate-50 hover:border-primary">‹ Anterior</a>
    {% endif %}
    <span class="py-2 px-3 bg-primary text-white rounded-md">Página {{ colaboradores.number }} de {{ colaboradores.paginator.num_pages }}</span>
    {% if colaboradores.has_next %}
    <a href="?page={{ colaboradores.next_page_number }}{% if busca %}&q={{ busca }}{% endif %}{% if tipo == 'substituicao' %}&tipo=substituicao{% endif %}" class="py-2 px-3 no-underline border border-slate-200 rounded-md text-slate-600 bg-white hover:bg-slate-50 hover:border-primary">Próxima ›</a>
    <a href="?page={{ colaboradores.paginator.num_pages }}{% if busca %}&q={{ busca }}{% endif %}{% if tipo == 'substituicao' %}&tipo=substituicao{% endif %}" class="py-2 px-3 no-underline border border-slate-200 rounded-md text-slate-600 bg-white hover:bg-slate-50 hover:border-primary">Última »</a>
    {% endif %}
</div>
{% endif %}
{% endblock %}