{% set exportOptions = [
    {'id': 'export-copy', 'title': 'copy'|trans({},'cms'), 'image': 'copy-icon'},
    {'id': 'export-print', 'title': 'print'|trans({},'cms'), 'image': 'print-icon'},
    {'id': 'export-excel', 'title': 'excel'|trans({},'cms'), 'image': 'excel-icon'},
    {'id': 'export-csv', 'title': 'csv'|trans({},'cms'), 'image': 'placeholder-csv-format'},
    {'id': 'export-pdf', 'title': 'pdf'|trans({},'cms'), 'image': 'pdf-icon'},
] %}

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExport" aria-labelledby="offcanvasExportLabel">
    <div class="offcanvas-header px-4 bg-light">
        <h5 id="offcanvasExportLabel" class="mb-0">{{ 'export'|trans({},'cms') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body px-4">
        <div class="row g-2">
            {% for exportOption in exportOptions %}
                <div class="col-sm-6">
                    <a id="{{ exportOption.id }}" class="card shadow-none h-100 bg-light card-sm" href="javascript:;">
                        <div class="card-body ">
                            <div class="d-flex align-items-center text-center">
                                <div class="symbol symbol-30px">
                                    <img class="me-2" src="{{ asset('assets/media/icons/'~exportOption.image~'.svg') }}" alt="Image Description">
                                </div>

                                <h4 class="text-body ms-2 mb-0">{{ exportOption.title }}</h4>
                            </div>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
    </div>
</div>