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

{% block title %}Dépannages{% endblock %}


{% block importmap %}
    {{ importmap(['app', 'module']) }}
{% endblock %}

{% block body %}

    {% set searchData = (searchForm is defined ? getIfNotNull(searchForm, ['vars', 'data']) : null) %}
    {% set contactStuffDisplay = (isNotNull(searchData, ['contactStuffDisplay']) ? "(" ~ searchData.contactStuffDisplay ~ ")") %}

    <h1 class="module-title">Dépannages {{ contactStuffDisplay }}</h1>

    <div id="" class="module-list">
        <div class="module-list-actions">
            <div class="module-list-actions-left">
            </div>
            <div class="module-list-actions-right">
{#                <a class="module-list-btn" href="{{ path('app_todo_new') }}">{{ ux_icon('lucide:square-plus') }}</a>#}
            </div>
        </div>
        {% include '_index_search.html.twig' with {searchForm : searchForm} %}

        <div class="module-list-items">
            <div class="module-list-body">
                {% for item in items %}
                    {% set title = (item.contact ? item.contact.lastname ~ ' ' ~ item.contact.firstname : '') ~ ' : ' ~ item.label %}
                    {% set title = '<a href="' ~ path("app_depannage_edit", {id:item.id}) ~ '">' ~ title ~ '</a>' %}

                    {% set address = (item.contact ? item.contact.address ~ ' ' ~ item.contact.postalCode ~ ' ' ~ item.contact.city : '') %}

                    {% set date = item.dateStart|formatDateTime('d/m/Y H:i') %}

                    {% include '_index_module_item.html.twig' with {
                        'one' : title,
                        'two' : item.stuffsLabel,
                        'three' : address ,
                        'four' : date,
                        'optionalStyles' : 'box-sizing: border-box; ' ~ (item.contactData.contactHighlightColor ? 'border: 2px solid ' ~ item.contactData.contactHighlightColor ~ '; border-right: 25px solid' ~ item.contactData.contactHighlightColor)
                    } %}
                {% endfor %}
            </div>
        </div>
    </div>

{% endblock %}