{% if items|length > 0 %}
    <div class="table-responsive">
        <table class="table table-hover" id="leadTable">
            <thead>
                <tr>
                    {{ include('@MauticCore/Helper/tableheader.html.twig', {
                        'checkall': 'true',
                        'target': '#leadTable',
                    }) }}

                    {% for column, label in columns %}
                        {{ include([('@MauticLead/Lead/_list_header_'~column~'.html.twig'), '@MauticLead/Lead/_list_header_default.html.twig'], {
                              'label': label,
                              'column': column,
                              'class': (column in columns|keys) ? 'hidden-xs' : '',
                        }) }}
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {{ include('@MauticLead/Lead/_list_rows.html.twig', {
                    'items': items,
                    'columns': columns,
                    'security': security,
                    'currentList': currentList,
                    'permissions': permissions,
                    'noContactList': noContactList,
                }) }}
            </tbody>
        </table>
    </div>
    <div class="panel-footer">
        {{ include('@MauticCore/Helper/pagination.html.twig', {
            'totalItems': totalItems,
            'page': page,
            'limit': limit,
            'menuLinkId': 'mautic_contact_index',
            'baseUrl': path('mautic_contact_index'),
            'tmpl': indexMode,
            'sessionVar': 'lead',
        }) }}
    </div>
{% else %}
    {% if searchValue is not empty %}
    {{ include('@MauticCore/Helper/noresults.html.twig') }}
    {% else %}
    <div class="mt-80 col-md-offset-2 col-lg-offset-3 col-md-8 col-lg-5 height-auto">
        {% set childContainer %}
            <div class="mb-md">
                {% include '@MauticCore/Components/pictogram.html.twig' with {
                    'pictogram': 'user--analytics',
                    'size': '80'
                } %}
            </div>

            {{ include('@MauticCore/Components/content-item-row.html.twig', {
                type: 'default',
                eyebrow: 'mautic.lead.list.eyebrow',
                heading: 'mautic.lead.list.heading',
                copy: 'mautic.lead.list.copy',
            }) }}
            
            {% set formFeaturesContainer %}
            <div class="row">
                <div class="col-sm-6 col-xs-12">
                    {{ include('@MauticCore/Components/content-item.html.twig', {
                        type: 'pictogram',
                        heading: 'mautic.lead.list.anonymous.heading',
                        pictogram: 'anonymous--users',
                        copy: 'mautic.lead.list.anonymous.copy',
                    }) }}
                </div>
                <div class="col-sm-6 col-xs-12">
                    {{ include('@MauticCore/Components/content-item.html.twig', {
                        type: 'pictogram',
                        heading: 'mautic.lead.list.known.heading',
                        pictogram: 'id--badge',
                        copy: 'mautic.lead.list.known.copy',
                    }) }}
                </div>
            </div>


            {% endset %}

            {{ include('@MauticCore/Components/content-group.html.twig', {
                heading: 'mautic.lead.list.types.heading',
                childContainer: formFeaturesContainer,
            }) }}
            {% endset %}
            
            {{ include('@MauticCore/Components/content-block.html.twig', {
                heading: 'mautic.lead.list.block.heading',
                subheading: 'mautic.lead.list.block.subheading',
                copy: 'mautic.lead.list.block.copy',
                childContainer: childContainer,
                cta: permissions['lead:leads:create'] ? {
                    'label': 'mautic.lead.action.add',
                    'link': path('mautic_import_action', {'object': 'contacts', 'objectAction': 'new'}),
                    'attributes': {'data-toggle': 'ajax'}
                } : null
            }) }}
    </div>
    {% endif %}
{% endif %}
