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

{% block title %}{{ 'lang.myContacts'|trans }}{% endblock %}

{% block body %}
    <div class="table-container h-100">
        <div class="table-section transparent">
            <div class="row">
                <div class="col-md-4 link-wrap">
                    <a class="display-flex-center" href="{{ path('app_contact_new') }}">
                        <svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M15.5 7.75L15.5 23.25" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                            <path d="M23.25 15.5L7.75 15.5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                        </svg>
                        {{ 'lang.newContact'|trans }}
                    </a>
                </div>
            </div>

            <div class="row h-100">
                <div class="col">
                    <div class="table-responsive h-100">
                        <table class="table table-striped table-bordered" id="contactTable">
                            <thead class="table-mobile-class">
                            <tr>
{#                                <th>Id</th>#}
                                <th>{{ 'lang.company' | trans }}</th>
                                <th>{{ 'lang.name' | trans }}</th>
                                <th>{{ 'lang.surname' | trans }}</th>
                                <th>{{ 'lang.email' | trans }}</th>
                                <th>{{ 'lang.cellphone' | trans }}</th>
                                <th>{{ 'lang.edit'  | trans }}</th>
                                <th>{{ 'lang.delete' | trans }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for contact in contacts %}
                                <tr>
{#                                    <td class="rows-mobile">{{ contact.id }}</td>#}
                                    <td class="rows-mobile">{{ contact.company }}</td>
                                    <td class="rows-mobile-show">
                                        <a class="d-block d-lg-none"
                                           href="{{ path('app_contact_edit', {'id': contact.id}) }}">
                                            {{ contact.firstName }} {{ contact.lastName }}
                                        </a>
                                        <span class="d-none d-lg-block">
                                        {{ contact.firstName }}
                                    </span>
                                    </td>
                                    <td class="rows-mobile">{{ contact.lastName }}</td>
                                    <td class="rows-mobile">{{ contact.email }}</td>
                                    <td class="rows-mobile">{{ contact.cellphone }}</td>
                                    <td class="rows-mobile">
                                        <span class="display-flex-center">
                                            <a href="{{ path('app_contact_edit', {'id': contact.id}) }}"
                                               class="btn">
                                                <i class="icofont-edit"></i>
                                            </a>
                                        </span>
                                    </td>
                                    <td class="rows-mobile">
                                    <span class="display-flex-center">
                                        <a href="{{ path('app_contact_delete', {'id': contact.id}) }}"
                                           class="btn"><i
                                                    class="icofont-trash"></i></a>
                                    </span>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('contact') }}
{% endblock %}