{% extends 'base.html.twig' %}
{% block title %}CRM | {% trans %}Search Employees{% endtrans %}{% endblock %}
{% block body %}
    <nav aria-label="breadcrumb" style="margin-bottom: 1.5em;">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ path('app_viewhome') }}">Home</a></li>
            <li class="breadcrumb-item"><a href="{{ path('app_search') }}">{% trans %}Search{% endtrans %}</a></li>
            <li class="breadcrumb-item active" aria-current="page">{% trans %}Search Employees{% endtrans %}</li>
        </ol>
    </nav>

    <form class="pull-right searchForm" style="display: none" role="search" id="nav-search-form" method="post" action="{{ path('app_search_employees') }}">
        <div class="row">
            <div class="col-auto">
                <div class="form-group">
                    <label for="experience">{% trans %}Experience{% endtrans %}:
                        <select class="form-control" name="experience">
                            <option>-</option>
                            {% for exp in experience | sort %}
                            <option {% if (results is not empty) and (exp == results.experience) %} selected {% endif %} value="{{ exp }}">{{ exp }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
            </div>
            <div class="col-auto">
                <div class="form-group">
                    <label for="profession">{% trans %}Profession{% endtrans %}:
                        <select class="form-control" name="profession">
                            <option>-</option>
                            {% for prof in profession | sort %}
                                <option {% if (results is not empty) and (prof == results.profession) %} selected {% endif %} value="{{ prof }}">{{ prof }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
            </div>
            <div class="col-auto">
                <div class="form-group">
                    <label for="country">{% trans %}Country{% endtrans %}:
                        <select class="form-control" name="country">
                            <option selected>-</option>
                            {% for c in country | sort %}
                                <option {% if (results is not empty) and (c == results.country) %} selected {% endif %} value="{{ c }}">{{ c }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
            </div>
            <div class="col-auto">
                <div class="form-group">
                    <label for="city">{% trans %}City{% endtrans %}:
                        <select class="form-control" name="city">
                            <option selected>-</option>
                            {% for c in city | sort %}
                                <option {% if (results is not empty) and (c == results.city) %} selected {% endif %} value="{{ c }}">{{ c }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
            </div>
            <div class="col-auto">
                <div class="form-group">
                    <label for="zipCode">{% trans %}Zip code{% endtrans %}:
                        <select class="form-control" name="zipCode">
                            <option selected>-</option>
                            {% for c in zipCode | sort %}
                                <option {% if (results is not empty) and (c == results.zipCode) %} selected {% endif %} value="{{ c }}">{{ c }}</option>
                            {% endfor %}
                        </select>
                    </label>
                </div>
            </div>
        </div>
        <div class="row justify-content-center">
            <div class="col-auto">
                <button type="submit" class="btn btn-success">{% trans %}Search{% endtrans %}</button>
            </div>
            <div class="col-auto">
                <a href="{{ path("app_search_employees") }}" class="btn btn-danger" id="resetSearchEmployee">{% trans %}Clear{% endtrans %}</a>
            </div>
        </div>
    </form>
    <div class="row justify-content-end" style="margin-top: 2em;">
        <div class="col-auto">
            <button type="button" class="showFilters btn-primary">{% trans %}Show Filters{% endtrans %}</button>
            <button type="button" class="hideFilters btn-primary" style="display: none">{% trans %}Hide Filters{% endtrans %}</button>
        </div>
    </div>
    <div style="margin-top: 2em;">
        <h3 class="h3">{% trans %}Results{% endtrans %}: {{ employeesList | length }}</h3>
        <table class="table table-striped">
            <thead class="thead-dark">
            <tr>
                <th>{% trans %}First name{% endtrans %}</th>
                <th>{% trans %}Last name{% endtrans %}</th>
                <th>{% trans %}City{% endtrans %}</th>
                <th>{% trans %}Zip code{% endtrans %}</th>
                <th>{% trans %}Profession{% endtrans %}</th>
                <th>{% trans %}Experience{% endtrans %}</th>
            </tr>
            </thead>
            <tbody>
            {% for employee in employeesList | sort('desc') %}
                <tr>
                    <td><a href="{{ path('app_employee_profile', {id: employee.id}) }}">{{ employee.firstName }}</a></td>
                    <td>{{ employee.lastName }}</td>
                    <td>{{ employee.city }}</td>
                    <td>{{ employee.zipCode }}</td>
                    <td>{{ employee.profession }}</td>
                    <td>{{ employee.experience }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}