{% extends 'base.html.twig' %}
{% block title %}CRM | {% trans %}User profile{% 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_employee_list') }}">{% trans %}Employees{% endtrans %}</a>
            </li>
            <li class="breadcrumb-item active"
                aria-current="page">{{ employeeProfile.firstName }} {{ employeeProfile.lastName }}
                - {% trans %} Profile{% endtrans %}</li>
        </ol>
    </nav>

    <div class="row" style="margin-bottom: 2em;">
        <div class="col-auto">
            <a class="btn btn-primary"
               href="{{ path('app_edit_employee', {id: employeeProfile.id}) }}">{% trans %}Edit Employee Profile{% endtrans %}</a>
        </div>
    </div>

    <div class="row" style="margin-bottom: 2em;">
        <div class="col-8">
            <div style="margin-bottom: 2em;">
                <h3 class="text-center h3">{{ employeeProfile.firstName }} {{ employeeProfile.lastName }}
                    - {% trans %} Profile{% endtrans %}</h3>
            </div>
            <div class="userData">
                <p class="h4 eName"><span
                            class="font-weight-bold text-primary">{% trans %}First name{% endtrans %}: </span><span>{{ employeeProfile.firstName }}</span>
                </p>
                <p class="h4 eSurname"><span
                            class="font-weight-bold text-primary">{% trans %}Last name{% endtrans %}: </span><span>{{ employeeProfile.lastName }}</span>
                </p>
                <p class="h4 eAddress"><span
                            class="font-weight-bold text-primary">{% trans %}Address{% endtrans %}: </span><span>{{ employeeProfile.street }}, {{ employeeProfile.zipCode }} {{ employeeProfile.city }}</span>
                </p>
                <p class="h4 eCountry"><span
                            class="font-weight-bold text-primary">{% trans %}Country{% endtrans %}: </span><span>{{ employeeProfile.country }}</span>
                </p>
                <p class="h4 eExperience"><span
                            class="font-weight-bold text-primary">{% trans %}Experience{% endtrans %} ({% trans %}years{% endtrans %}): </span><span>{{ employeeProfile.experience }}</span>
                </p>
                <p class="h4 eProfession"><span
                            class="font-weight-bold text-primary">{% trans %}Profession{% endtrans %}: </span><span>{{ employeeProfile.profession }}</span>
                </p>
                <p class="h4 ePhone"><span
                            class="font-weight-bold text-primary">{% trans %}Phone no{% endtrans %}: </span><span><a
                                class="linkInProfile"
                                href="tel:{{ employeeProfile.phoneNo }}"><i
                                    class="fas fa-mobile-alt"></i> {{ employeeProfile.phoneNo }}</a></span>
                </p>
                <p class="h4 eMail"><span
                            class="font-weight-bold text-primary">{% trans %}Email{% endtrans %}: </span><span><a
                                class="linkInProfile"
                                href="mailto:{{ employeeProfile.email }}"><i
                                    class="fas fa-envelope"></i> {{ employeeProfile.email }}</a></span>
                </p>
                <div class="skills">
                    <p class="h4 eSkills"><span
                                class="font-weight-bold text-primary">{% trans %}Skills{% endtrans %}: </span>
                        {% for skill in employeeProfile.skills %}
                            <span class="badge badge-warning">{{ skill.name | trans }}</span>
                        {% endfor %}
                    </p>
                </div>
                <div class="languages">
                    <p class="h4 eLanguages"><span
                                class="font-weight-bold text-primary">{% trans %}Languages{% endtrans %}: </span>
                        {% for language in employeeProfile.languages %}
                            <span class="badge badge-secondary">{{ language.language | trans }}</span>
                        {% endfor %}
                    </p>
                </div>
            </div>
        </div>
        <div class="col-4">
            <div style="margin-bottom: 2em;">
                <h3 class="text-center h3">{% trans %}Employee reports{% endtrans %}</h3>
            </div>
            <table class="table">
                <thead>
                <tr>
                    <th>{% trans %}Report name{% endtrans %}</th>
                    <th></th>
                </tr>
                </thead>
                <tbody>
                {% for employeeReports in employeeProfile.employeeReports %}
                    <tr>
                        <td>{{ employeeReports.title }}</td>
                        <td><a class="btn btn-success" href="{{ path('app_show_report', {id: employeeProfile.id, reportID: employeeReports.id}) }}">{% trans %}Show report{% endtrans %}</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            <div class="row" style="margin-bottom: 2em;">
                <div class="col-auto">
                    <a class="btn btn-primary"
                       href="{{ path('app_add_report', {id: employeeProfile.id}) }}">{% trans %}Add report{% endtrans %}</a>
                </div>
            </div>
        </div>
    </div>
{% endblock %}