<template>
  <Frame
    :image="image"
    :padding-y="$_theme('spacingXxl')"
    class="block-pp-listing-searches-container"
  >
    <welcome-searches
      :content-types="['p_and_p', 'p_and_p_france']"
      :placeholder="$_tr('placeholder')"
    />
  </Frame>
</template>

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

export default {
  name: 'BlockPPListingSearches',
  $_i18nRootPath: 'customs.pp.LISTING.searches',
  components: {
    Frame
  },
  data() {
    return {
      image: this.getStore('getInsideSettings', 'homepage.p_and_p_background')
    }
  }
}
</script>

<style lang="scss">
.block-pp-listing-searches-container {
  .welcome-searches-container {
    max-width: 270px;
    margin: auto;

    .welcome-search-header {
      display: none;
    }

    .filters .filters-container {
      .input-container input {
        padding: var(--spacing-m) var(--spacing-xl) var(--spacing-m)
          var(--spacing-m);
      }

      .filter-item-container svg {
        bottom: 6px;
      }
    }
  }
}

.inside-radius {
  .block-pp-listing-searches-container {
    border-radius: var(--radius-m);
  }
}
</style>
