{block name="et-product-list-filter-modal"}
    {et_isShopVersionAtLeast value="5.5.0-rc.1" assign='shopIsAtLeast55'}
    {$sortingDisplayMobile=$sortingDisplayMobile|default:'withFilters'}
    {$filterModalPosition=$filterModalPosition|default:'center'}
    <div id="et-product-list-filter-modal-content-mobile" aria-hidden="true" class="modal fade et-modal-{$filterModalPosition} et-product-list-filter-modal-content-mobile">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">{if $sortingDisplayMobile === 'withFilters'}{lang key="filterAndSort" section="global"}{else}{lang key="filter" section="global"}{/if}</div>
                    <button type="button" class="close" data-dismiss="modal" aria-label="{if $shopIsAtLeast55}{lang key="close" section="aria"}{else}Close{/if}">
                        <i class="{et_getIcon key="close"}"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="et-product-list-filter-modal-mobile-target">

                    </div>
                </div>
            </div>
        </div>
    </div>
    {* Move all filters into the modal when it first opens to prevent having to render them twice in the source *}
    {inline_script}
        <script>
            $(document).ready(() => {
                let $modal = $('#et-product-list-filter-modal-content-mobile');
                let $source = $('#et-product-list-filter-collapse-content-mobile');
                let $sourceParent = $source.parent();
                let $target = $('#et-product-list-filter-modal-mobile-target');
                $modal.on('show.bs.modal', () => {
                    $target.empty();
                    $source.addClass('show').appendTo($target);
                });
                $modal.on('hidden.bs.modal', () => {
                    $source.removeClass('show').appendTo($sourceParent);
                });
            });
        </script>
    {/inline_script}
{/block}