<template>
  <div class="projects-listing-container">
    <Banner :add="['projects', 'projects_statuses']" page="projects-listing" />

    <TemplateContainer size="xl">
      <Full
        :infinite-scroll="false"
        :per-page="18"
        :search-placeholder="$_tr('search')"
        content-types="projects"
        component-mosaic-name="project-item-customs"
        sort="published_at:desc"
        filters-unfolded="selected"
        class="projects-catalog"
      />
    </TemplateContainer>
  </div>
</template>

<script>
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Banner from '@inside-commons/components/lib/Banner'

import Full from '@inside-catalog/components/lib/FullCatalog'

export default {
  name: 'ProjectsListingPage',
  $_i18nRootPath: 'customs.PROJECTS',
  components: { TemplateContainer, Banner, Full }
}
</script>

<style lang="scss">
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.projects-catalog {
  main {
    > .item-list-catalog {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: var(--spacing-m);

      @include small-desktop {
        grid-template-columns: repeat(2, 1fr);
      }

      @include mobile {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>
