{{ partial:banner }}
{{ _sort = (get:sort ?? 'date:desc') }}
<div class="container-1 bg-white">
    <div class="flex flex-col">
        <div class="flex flex-col items-center gap-8 pb-8 pt-12">
            <h2>{{ title }}</h2>
            <span class="text-copy text-black lg:text-copy-lg">{{ subtitle }}</span>
        </div>
        <form class="flex items-center gap-2 py-10" x-data="{ sort: '{{ get:sort }}' }" @change="$el.submit()">
            <label for="storiesFilter" class="text-brand-black">{{ trans:mwb.searches.filter_by }}</label>
            {{ partial:form/select class="w-[10.375rem]" }}
                {{ slot:attributes }}
                    name="sort" x-model="sort" :class="{ 'text-brand-gray-mid' : sort.length === 0 }"
                {{ /slot:attributes }}
                <option :disabled="sort.length === 0" value="">{{ trans:mwb.forms.select }}</option>
                <option value="title">{{ trans:mwb.title }}</option>
                <option value="date:desc">{{ trans:mwb.date }}</option>
            {{ /partial:form/select }}
        </form>
        {{ collection:stories paginate="6" as="stories" sort="{{ _sort | urldecode }}" }}
            <div id="stories-index" class="flex flex-col gap-8 lg:grid lg:grid-cols-3 lg:pb-8">
                {{ stories }}
                    {{ partial src="card/story" }}
                {{ /stories }}
            </div>
            <div class="flex w-full justify-center py-10">
                {{ partial:pagination }}
            </div>
        {{ /collection:stories }}
    </div>
</div>