{% extends 'base.html.twig' %}
{% block title %}CRM | {% trans %}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 active" aria-current="page">{% trans %}Employees{% endtrans %}</li>
        </ol>
    </nav>

    <div style="margin-bottom: 2em;">
        <h2 class="text-center h2">{% trans %}List of employees{% endtrans %}</h2>
    </div>

    <div class="row justify-content-end" style="margin-bottom: 2em;">
        <div class="col-auto">
            <a href="{{ path('app_add_employee') }}" class="btn btn-primary">{% trans %}Add Employee{% endtrans %}</a>
        </div>
    </div>

    <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 %}Profession{% endtrans %}</th>
            <th>{% trans %}Experience{% endtrans %}</th>
            <th>{% trans %}Email{% endtrans %}</th>
            <th>{% trans %}Phone no{% endtrans %}</th>
        </tr>
        </thead>
        <tbody>
        {% for employee in employeesList %}
            <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.profession }}</td>
                <td>{{ employee.experience }}</td>
                <td><a href="mailto:{{ employee.email }}">{{ employee.email }}</a></td>
                <td><a href="tel:{{ employee.phoneNo }}">{{ employee.phoneNo }}</a></td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <div class="row justify-content-center">
        <div class="navigation col-auto">
            {{ knp_pagination_render(employeesList) }}
        </div>
    </div>

{% endblock %}