{#
  Variables
    - searchValue
    - items
    - totalItems
    - page
    - limit
    - permissions
    - security
    - tmpl
#}
{% if items|length > 0 %}
    <div class="table-responsive">
        <table class="table table-hover" id="formTable">
            <thead>
            <tr>
                {{ include('@MauticCore/Helper/tableheader.html.twig', {
                    'checkall': 'true',
                    'target': '#formTable',
                }) }}

                {{ include('@MauticCore/Helper/tableheader.html.twig', {
                        'sessionVar': 'form',
                        'orderBy': 'f.name',
                        'text': 'mautic.core.name',
                        'class': 'col-form-name',
                }) }}

                {{ include('@MauticCore/Helper/tableheader.html.twig', {
                        'sessionVar': 'form',
                        'orderBy': 'c.title',
                        'text': 'mautic.core.category',
                        'class': 'visible-md visible-lg col-form-category',
                }) }}

                {{ include('@MauticCore/Helper/tableheader.html.twig', {
                    'sessionVar': 'form',
                    'orderBy': 'f.template',
                    'text': 'mautic.core.form.theme',
                    'class': 'visible-md visible-lg col-form-template',
                }) }}

                {{ include('@MauticCore/Helper/tableheader.html.twig', {
                        'sessionVar': 'form',
                        'orderBy': 'submission_count',
                        'text': 'mautic.form.form.results',
                        'class': 'visible-md visible-lg col-form-submissions',
                }) }}

                {{ include('@MauticCore/Helper/tableheader.html.twig', {
                        'sessionVar': 'form',
                        'orderBy': 'f.dateAdded',
                        'text': 'mautic.lead.import.label.dateAdded',
                        'class': 'visible-md visible-lg col-form-dateAdded',
                }) }}

                {{ include('@MauticCore/Helper/tableheader.html.twig', {
                        'sessionVar': 'form',
                        'orderBy': 'f.dateModified',
                        'text': 'mautic.lead.import.label.dateModified',
                        'class': 'visible-md visible-lg col-form-dateModified',
                        'default': true,
                }) }}

                {{ include('@MauticCore/Helper/tableheader.html.twig', {
                        'sessionVar': 'form',
                        'orderBy': 'f.createdByUser',
                        'text': 'mautic.core.createdby',
                        'class': 'visible-md visible-lg col-form-createdby',
                }) }}

                {{ include('@MauticCore/Helper/tableheader.html.twig', {
                        'sessionVar': 'form',
                        'orderBy': 'f.id',
                        'text': 'mautic.core.id',
                        'class': 'visible-md visible-lg col-form-id',
                }) }}
            </tr>
            </thead>
            <tbody>
            {% for i in items %}
                {% set item = i[0] %}
                <tr>
                    <td>
                        {{ include('@MauticCore/Helper/list_actions.html.twig', {
                                'item': item,
                                'templateButtons': {
                                    'edit': securityHasEntityAccess(permissions['form:forms:editown'], permissions['form:forms:editother'], item.createdBy),
                                    'clone': permissions['form:forms:create'],
                                    'delete': securityHasEntityAccess(permissions['form:forms:deleteown'], permissions['form:forms:deleteother'], item.createdBy),
                                },
                                'routeBase': 'form',
                                'customButtons': [
                                    {
                                        'attr': {
                                            'data-toggle': '',
                                            'target': '_blank',
                                            'href': path('mautic_form_action', {'objectAction': 'preview', 'objectId': item.id}),
                                        },
                                        'iconClass': 'ri-eye-line',
                                        'btnText': 'mautic.form.form.preview',
                                    },
                                    {
                                        'attr': {
                                            'data-toggle': 'ajax',
                                            'href': path('mautic_form_action', {'objectAction': 'results', 'objectId': item.id}),
                                        },
                                        'iconClass': 'ri-list-view',
                                        'btnText': 'mautic.form.form.results',
                                    },
                                ],
                        }) }}
                    </td>
                    <td>
                        <div>
                            {{ include('@MauticCore/Helper/publishstatus_icon.html.twig', {'item': item, 'model': 'form.form'}) }}
                            <a href="{{ path('mautic_form_action', {'objectAction': 'view', 'objectId': item.id}) }}" data-toggle="ajax" data-menu-link="mautic_form_index">
                                {{ item.name }}
                                {% if 'campaign' == item.formType %}
                                    <span data-toggle="tooltip" title="{{ 'mautic.form.icon_tooltip.campaign_form'|trans }}"><i class="ri-fw ri-megaphone-fill fs-14"></i></span>
                                {% endif %}
                            </a>
                            {{ customContent('form.name', _context) }}
                            {{ include('@MauticProject/Modules/projects.html.twig') }}
                        </div>
                        {{ include('@MauticCore/Helper/description--inline.html.twig', {
                            'description': item.description
                        }) }}
                    </td>
                    <td class="visible-md visible-lg">
                        {{ include('@MauticCore/Modules/category--expanded.html.twig', {'category': item.category}) }}
                    </td>
                    <td class="visible-md visible-lg">
                        {% if item.template %}
                            {{ getThemeName(item.template) }}
                        {% else %}
                            <span class="text-muted">{{ 'mautic.core.form.default'|trans }}</span>
                        {% endif %}
                    </td>
                    <td class="visible-md visible-lg">
                        <a href="{{ path('mautic_form_action', {'objectAction': 'results', 'objectId': item.id}) }}" data-toggle="ajax" data-menu-link="mautic_form_index" size="sm" class="label label-gray" {% if 0 == i.submission_count %}disabled="disabled"{% endif %}>
                           {{- 'mautic.form.form.viewresults'|trans({'%count%': i['submission_count']}) -}}
                        </a>
                    </td>
                    <td class="visible-md visible-lg">{% if item.dateAdded %}{{ dateToFull(item.dateAdded) }}{% endif %}</td>
                    <td class="visible-md visible-lg">{% if item.dateModified %}{{ dateToFull(item.dateModified) }}{% endif %}</td>
                    <td class="visible-md visible-lg">{{ item.createdByUser }}</td>
                    <td class="visible-md visible-lg">{{ item.id }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <div class="panel-footer">
            {{ include('@MauticCore/Helper/pagination.html.twig', {
                    'totalItems': totalItems,
                    'page': page,
                    'limit': limit,
                    'baseUrl': path('mautic_form_index'),
                    'sessionVar': 'form',
            }) }}
        </div>
    </div>
{% else %}
    {% if searchValue is not empty %}
        {{ include('@MauticCore/Helper/noresults.html.twig', {'tip': 'mautic.form.noresults.tip'}) }}
    {% 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': 'text--input',
                        'size': '80'
                    } %}
                </div>

                {{ include('@MauticCore/Components/content-item-row.html.twig', {
                    type: 'default',
                    eyebrow: 'mautic.form.list.eyebrow',
                    heading: 'mautic.form.list.heading',
                    copy: 'mautic.form.list.copy',
                }) }}
                
                {% set formFeaturesContainer %}
                <div class="row">
                    <div class="col-sm-6 col-xs-12">
                        {{ include('@MauticCore/Components/content-item.html.twig', {
                            type: 'pictogram',
                            pictogram: 'select--range',
                            heading: 'mautic.form.list.feature1.heading',
                            copy: 'mautic.form.list.feature1.copy',
                        }) }}
                    </div>
                    <div class="col-sm-6 col-xs-12">
                        {{ include('@MauticCore/Components/content-item.html.twig', {
                            type: 'pictogram',
                            pictogram: 'event-driven',
                            heading: 'mautic.form.list.feature2.heading',
                            copy: 'mautic.form.list.feature2.copy',
                        }) }}
                    </div>
                </div>
                {% endset %}

                {{ include('@MauticCore/Components/content-group.html.twig', {
                    heading: 'mautic.form.list.capabilities.heading',
                    childContainer: formFeaturesContainer,
                }) }}

                {% set formUsesContainer %}
                <div class="type-body-02 mb-32">
                    {% include '@MauticCore/Components/list--styled.html.twig' with {
                        'type': 'unordered',
                        'style': 'checkmark',
                        'items': [
                            'mautic.form.list.use1',
                            'mautic.form.list.use2',
                            'mautic.form.list.use3',
                            'mautic.form.list.use4',
                            'mautic.form.list.use5',
                        ]
                    } %}
                </div>
                {% endset %}
                
                {{ include('@MauticCore/Components/content-group.html.twig', {
                    heading: 'mautic.form.list.uses.heading',
                    childContainer: formUsesContainer,
                }) }}
                {% endset %}
                
                {{ include('@MauticCore/Components/content-block.html.twig', {
                    heading: 'mautic.form.list.block.heading',
                    subheading: 'mautic.form.list.block.subheading',
                    childContainer: childContainer,
                }) }}
        </div>
    {% endif %}
{% endif %}
