<commit_before><template>
  <div v-if="products.length" class="products-container">
    <template v-for="product in products | filterBy search in 'name' | filterBy type in 'type' | orderBy 'name' ">
      <div class="product-item-wrapper" :class="{ 'inactive': !product.available }" v-link="{ name: 'ProductMarket', params: { id: product._id }}">
        <div class="product-item-circle {{ product.type }}">
          <svg viewBox="0 0 100 100" class="product-item-icon">
            <use xlink:href="#foods-icon-{{ product.icon}}"></use>
          </svg>
          <div class="product-item-quantity" :class="{ 'emergency': product.emergency }">
            {{ product.quantity }}
            <div class="product-item-dlc" v-if="product.emergency">
              <span v-for="n in 6" class="square square-{{n}}"></span>
            </div>
          </div>
        </div>
        <div class="product-item-name">{{ product.name }}</div>
        <div class="product-item-status" v-if="product.available">Disponible maintenant</div>
        <div class="product-item-status" v-else>Indisponible</div>
      </div>
    </template>
  </div>
  <div v-else class="no-products-container">
    <div class="no-products-item no-products-border-red">
      <div class="no-products-item-text-wrapper">
        <p class="no-products-item-text"><span class="underline"></span>En ce jour,<br /></p>
        <p class="no-products-item-text text-bold"><span class="underline"></span>nulle denrée n'est proposée<br /></p>
      </div>
    </div>
    <div class="add-products-button" v-link="{ name: 'AddProductFoodkeeper' }">Ajouter une denrée</div> 
  </div>
</template>

<script>
export default {
  props: ['products', 'search', 'type'],
};
</script>

<style lang="scss" scoped>
@import './../../styles/variables.scss';

.products-container {
  text-align: center;
  margin: 20px 0;
}

  @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

  .product-item-wrapper {
    display: inline-block;
    margin: 20px 15px;

    &.animate {
      animation: fadeIn 1s;
    }

    &.inactive {
      filter: grayscale(1);
      -webkit-filter: grayscale(1);

      .product-item-circle.raw,
      .product-item-circle.homemade {
        background: none;
      }

      .product-item-quantity {
        background-color: $color-inactive;
      }
      .product-item-status {
        opacity: 0.5;
      }
    }
  }

    .product-item-circle {
      position: relative;
      width: 125px;
      height: 125px;
      border-radius: 50%;
      text-align: center;
      background: $color-white;
      border: 10px solid $color-white;
      box-sizing: border-box;
    }

      .product-item-circle.raw {
        background: url('/static/img/product-raw.png') center center no-repeat $color-white;
      }

      .product-item-circle.homemade {
        background: url('/static/img/product-homemade.png') center center no-repeat $color-white;
      }

      .product-item-icon {
        transform: scale(0.8);
      }

      .product-item-quantity {
        position: absolute;
        right: -7px;
        top: -7px;
        width: 28px;
        height: 28px;
        font: 1.3em 'Karla-Bold', sans-serif;
        line-height: 28px;
        text-align: center;
        color: $color-white;
        background: $color-red;
        border-radius: 50%;
        animation-name: shake-item;
        animation-iteration-count: 3;
        animation-direction: alternate;
        animation-delay: 0.2s;

        @keyframes fade {
          0% {opacity: 0;}
          100% {opacity: 1;}<commit_msg>ProductsList - animation<commit_after><template>
  <div v-if="products.length" class="products-container">
    <template v-for="product in products | filterBy search in 'name' | filterBy type in 'type' | orderBy 'name' ">
      <div class="product-item-wrapper" :class="{ 'inactive': !product.available }" v-link="{ name: 'ProductMarket', params: { id: product._id }}">
        <div class="product-item-circle {{ product.type }}">
          <svg viewBox="0 0 100 100" class="product-item-icon">
            <use xlink:href="#foods-icon-{{ product.icon}}"></use>
          </svg>
          <div class="product-item-quantity" :class="{ 'animated emergency': product.emergency }">
            {{ product.quantity }}
            <div class="product-item-dlc" v-if="product.emergency">
              <span v-for="n in 6" class="square square-{{n}}"></span>
            </div>
          </div>
        </div>
        <div class="product-item-name">{{ product.name }}</div>
        <div class="product-item-status" v-if="product.available">Disponible maintenant</div>
        <div class="product-item-status" v-else>Indisponible</div>
      </div>
    </template>
  </div>
  <div v-else class="no-products-container">
    <div class="no-products-item no-products-border-red">
      <div class="no-products-item-text-wrapper">
        <p class="no-products-item-text"><span class="underline"></span>En ce jour,<br /></p>
        <p class="no-products-item-text text-bold"><span class="underline"></span>nulle denrée n'est proposée<br /></p>
      </div>
    </div>
    <div class="add-products-button" v-link="{ name: 'AddProductFoodkeeper' }">Ajouter une denrée</div>
  </div>
</template>

<script>
export default {
  props: ['products', 'search', 'type'],
};
</script>

<style lang="scss" scoped>
@import './../../styles/variables.scss';

.products-container {
  text-align: center;
  margin: 20px 0;
}

  @keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
  }

  .product-item-wrapper {
    display: inline-block;
    margin: 20px 15px;

    &.animate {
      animation: fadeIn 1s;
    }

    &.inactive {
      filter: grayscale(1);
      -webkit-filter: grayscale(1);

      .product-item-circle.raw,
      .product-item-circle.homemade {
        background: none;
      }

      .product-item-quantity {
        background-color: $color-inactive;
      }
      .product-item-status {
        opacity: 0.5;
      }
    }
  }

    .product-item-circle {
      position: relative;
      width: 125px;
      height: 125px;
      border-radius: 50%;
      text-align: center;
      background: $color-white;
      border: 10px solid $color-white;
      box-sizing: border-box;
    }

      .product-item-circle.raw {
        background: url('/static/img/product-raw.png') center center no-repeat $color-white;
      }

      .product-item-circle.homemade {
        background: url('/static/img/product-homemade.png') center center no-repeat $color-white;
      }

      .product-item-icon {
        transform: scale(0.8);
      }

      .product-item-quantity {
        position: absolute;
        right: -7px;
        top: -7px;
        width: 28px;
        height: 28px;
        font: 1.3em 'Karla-Bold', sans-serif;
        line-height: 28px;
        text-align: center;
        color: $color-white;
        background: $color-red;
        border-radius: 50%;
        animation-name: tada;
        animation-iteration-count: infinite;
        animation-delay: 0s;

        @keyframes fade {
          0% {opacity: 0;}
          100% {opacity: 1;}
{'fraction_non_alphanumeric': 0.16545148625911385, 'fraction_numerical': 0.016545148625911384, 'mean_word_length': 2.3223102002794596, 'pattern_counts': {'":': 0, '<': 97, '<?xml version=': 0, '>': 97, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5817507', 'n_tokens_mistral': 2442, 'n_tokens_neox': 2281, 'n_words': 473}