{% extends 'base.html.twig' %}

{% block title %}Departamentos
{% endblock %}

{% block body %}

    <nav aria-label="breadcrumb" class="hide-on-mobile">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{{ path('index') }}">Administrar</a>
            </li>
            <li aria-current="page" class="breadcrumb-item active">Departamentos</li>
        </ol>
    </nav>
    <div class="container-fluid">
        <div class="box">
            <div class="title">
                <div class="row">
                    <div class="col-lg-8">
                        <h1>Departamentos</h1>
                        <p class="explanation">Seus departamentos.</p>
                    </div>
                    <div class="col-lg-4 text-right">
                        <a class="btn btn-primary" href="{{ path('department_new') }}">
                            <i class="mr-1 fas fa-plus"></i>
                            Add departamento
                        </a>
                    </div>
                </div>
            </div>
            <div class="box-body px-4 py-4">
                <div class="row pb-3">
                    <div class="col-sm-6 col-md-8">
                        <input class="form-control search-department-input" value="{{search}}" placeholder="Pesquisar por nome"/>
                    </div>
                    <div class="col-sm-6 col-md-3">
                        <select class="form-control select-client">
                            <option value="">Cliente</option>
                            {% for client in clients %}
                                <option {{current_client == client.id ? 'selected' : ''}} value={{client.id}}>{{client.fantasyName}}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-sm-12 col-md-1 ml-0 pl-1">
                        <button class="btn btn-primary search-department">Pesquisar</button>
                    </div>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-bordered">
                        <thead>
                            <tr>
                                <th class="tc-45">Nome</th>
                                <th class="tc-35">Cliente</th>
                                <th class="tc-25">Ações</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for department in pagination %}
                                <tr>
                                    <td>{{ department.name }}</td>
                                    <td>{{ department.client }}</td>
                                    <td class="grid-actions">
                                        <a class="btn" href="{{ path('department_edit', {'id': department.id}) }}">Editar</a>
                                        <span class="sep ml-1 mr-2">|</span>
                                        {{ include('department/_delete_form.html.twig') }}
                                    </td>
                                </tr>
                            {% else %}
                                <tr>
                                    <td colspan="9">Você não tem departamentos cadastrados ainda.</td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                <div class="mt-4">
                    {{ encore_entry_script_tags('departments') }}
                    {{ knp_pagination_render(pagination) }}
                </div>
            </div>
        </div>
    </div>
{% endblock %}