{% if templateVariables|length %}
    <div class="card">
        <div class="card-header text-right">
            <twig:link_button label="button_create_custom_variable" translationDomain="admin" icon="fa-solid fa-plus"
                              path="{{ path('admin_variable_add') }}"
                              :attr="{
                        class: 'btn btn-primary'
                    }"/>
        </div>
        <div class="card-body">
            <h4>{{ 'template_variables'|trans({}, 'admin') }}</h4>
            <em class="help">
                {{ 'form_help_variable'|trans({}, 'admin') }}
            </em>
            <ul class="variable-list">
                {% for variable in templateVariables %}
                    <li data-copy="{{ variable.name }}" data-action="click->form#copy">
                        <pre>{{ variable.name }}</pre>
                        {% if variable.id %}
                            <a href="{{ path('admin_variable_remove', {'id': variable.id}) }}"
                               class="remove-icon text-danger"
                               data-delete-confirm="{{ 'alert_email_template_remove'|trans({
                                   '{value}': variable.name
                               }, 'admin') }}"
                               title="{{ 'help_remove'|trans({}, 'admin') }}">
                                <i class="fa-solid fa-trash"></i>
                            </a>
                            <a href="{{ path('admin_variable_update', {'id': variable.id}) }}" class="update-icon"
                               title="{{ 'help_update'|trans({}, 'admin') }}">
                                <i class="fa-solid fa-pencil"></i>
                            </a>
                        {% endif %}
                        <span class="copy-icon" title="{{ 'help_copy'|trans({}, 'admin') }}">
                            <i class="fa-regular fa-copy"></i>
                        </span>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
{% endif %}