<template>
  <div class="carpooling-page-container">
    <Banner :add="['carpools', 'cities', 'move_hours']" page="carpooling">
      <template #footer>
        <router-link
          :to="{
            name: 'Add',
            params: {
              content: 'carpools'
            }
          }"
        >
          <Button class="add-button">{{ $_tr('button.title') }}</Button>
        </router-link>
      </template>
    </Banner>

    <TemplateContainer size="l">
      <filters-container :id="filtersId" :filters="filters" />

      <component-listing
        id="offers-listing"
        endpoint="content/carpools"
        pagination="bar"
        direction="vertical"
        :fields="requestFields"
        :filters="requestFilters"
        :filter-id="filtersId"
        :fractions="1"
        :items-per-page="12"
        :grid-gap="$_theme('spacingXxl')"
        :search-in="['carpools']"
        :use-grid="false"
      >
        <template #default="{ item }">
          <Card v-bind="item" :key="item.uuid" />
        </template>
      </component-listing>
    </TemplateContainer>
  </div>
</template>

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

import { Button } from 'inside-collection/components'

export default {
  name: 'CarpoolingPage',
  $_i18nRootPath: 'customs.CARPOOLING',
  components: {
    Card,
    TemplateContainer,
    Banner,
    Button
  },
  data() {
    return {
      filtersId: 'carpools-listing',
      requestFields: [
        'content_type',
        'uuid',
        'title',
        'introduction',
        'published_at',
        {
          move_hours: {
            fields: ['uuid', 'title'],
            filters: {
              'status:eq': 1
            }
          }
        },
        {
          arrival_cities: {
            fields: ['uuid', 'title'],
            filters: {
              'status:eq': 1
            }
          }
        },
        {
          departure_cities: {
            fields: ['uuid', 'title'],
            filters: {
              'status:eq': 1
            }
          }
        }
      ]
    }
  },
  computed: {
    requestFilters() {
      return { 'status:eq': 1 }
    },
    filters() {
      return [
        {
          modelName: 'search',
          type: 'text',
          label: this.$_tr('filters.search')
        },
        {
          id: 'departureCities',
          type: 'selectbox',
          modelName: 'departure_cities',
          label: this.$_tr('filters.departureCities'),
          fetch: true,
          async: {
            contentType: 'cities',
            fields: ['uuid', 'title'],
            filters: { status: 1 }
          },
          equality: 'eq',
          reference: 'departure_cities',
          fields: ['uuid', 'title'],
          filters: { 'status:eq': 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid'
        },
        {
          id: 'arrivalCities',
          type: 'selectbox',
          modelName: 'arrival_cities',
          label: this.$_tr('filters.arrivalCities'),
          fetch: true,
          async: {
            contentType: 'cities',
            fields: ['uuid', 'title'],
            filters: { status: 1 }
          },
          equality: 'eq',
          reference: 'arrival_cities',
          fields: ['uuid', 'title'],
          filters: { 'status:eq': 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid'
        },
        {
          id: 'moveHours',
          type: 'selectbox',
          modelName: 'move_hours',
          label: this.$_tr('filters.moveHour'),
          fetch: true,
          reference: 'move_hours',
          fields: ['uuid', 'title'],
          filters: { 'status:eq': 1, sort: 'title:asc' },
          objectLabelKey: 'title',
          objectValueKey: 'uuid'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.carpooling-page-container {
  .footer {
    display: flex;
    justify-content: center;
  }
}
</style>
