<div class="portfolio-list">
    {% if projects|length %}
        <div data-simplebar data-simplebar-auto-hide="false" class="portfolio-list__wrapper">
            <div id="portfolioListFilters" class="portfolio-list__filters">
                <button id="portfolioListCategory-0" class="portfolio-list__category portfolio-list__category_selected" type="button">ALL</button>
                {% for item in categories %}
                    <button id="portfolioListCategory-{{ item.id }}" class="portfolio-list__category" type="button">{{ item.name|upper }}</button>
                {% endfor %}
            </div>
        </div>
        <div class="portfolio-list__stage-outer">
            <div class="portfolio-list__stage" id="portfolioListStage">
                {% partial __SELF__ ~ '::stage' projects=projects %}
            </div>
        </div>
        <div id="portfolioListModal" class="portfolio-list__modal">
            <div data-simplebar data-simplebar-auto-hide="false">
                <div id="portfolioListModalText" style="overflow:hidden;"></div>
            </div>
        </div>
        
        <div class="portfolio-list__stage-loader" id="portfolioListStageLoader">
            <div role="status">
                <span class="screen-reader-only">Loading...</span>
            </div>
        </div>
    {% else %}
        <p>No portfolio records found</p>
    {% endif %}
</div>

{% if projects|length %}
    <div class="portfolio-list__modal-spinner" id="portfolioListModalSpinner">
        <div role="status">
            <span class="screen-reader-only">Loading...</span>
        </div>
    </div>
{% endif %}

{% put styles %}
    <style>
        :root {
            --property-list-title-font-size: {{ __SELF__.property('titleFontSize') }};
            --property-list-title-top-margin: {{ __SELF__.property('titleTopMargin') }};
            --property-list-item-top-margin: {{ __SELF__.property('itemTopMargin') }};
            --property-list-item-width: {{ __SELF__.property('itemWidthXs') }};
            --property-list-item-width-sm: {{ __SELF__.property('itemWidthSm') }};
            --property-list-item-width-md: {{ __SELF__.property('itemWidthMd') }};
            --property-list-item-width-lg: {{ __SELF__.property('itemWidthLg') }};
            --property-list-item-width-xl: {{ __SELF__.property('itemWidthXl') }};
            --property-list-gutter-size: {{ __SELF__.property('gutterSizeXs') }};
            --property-list-gutter-size-sm: {{ __SELF__.property('gutterSizeSm') }};
            --property-list-gutter-size-md: {{ __SELF__.property('gutterSizeMd') }};
            --property-list-gutter-size-lg: {{ __SELF__.property('gutterSizeLg') }};
            --property-list-gutter-size-xl: {{ __SELF__.property('gutterSizeXl') }};
            --property-list-modal-padding: {{ __SELF__.property('modalPadding') }};
            --property-list-spinner-color: {{ __SELF__.property('spinnerColor') }};
        }
    </style>
{% endput %}

{% put scripts %}
    <script>
        // Masonry options
        var masonryOptions = {
            columnWidth: '.portfolio-list__sizer',
            itemSelector: '.portfolio-list__item',
            gutter: '.portfolio-list__gutter-sizer',
            percentPosition: true,
            horizontalOrder: {{ __SELF__.property('horizontalOrder') }}
        };
    </script>
{% endput %}