<commit_before><template transition="popIn">
  <div class="add-picto-popup-container">
    <h3 class="add-picto-popup-title">Choix de la denrée</h3>
    <div class="popup-title-separator"></div>
    <div class="add-picto-accomplice-text">
      <p>Choisis l'illustration de la denrée que <span class="underline"></span><br /></p>
      <p>tu souhaites partager<span class="underline"></span></p>
    </div>
    <div class="add-picto-pictos-wrapper">
      <div class="add-picto-pictos-search">
        <svg viewBox="0 0 100 100" class="add-picto-pictos-search-icon  add-picto-pictos-search-icon-left">
          <use xlink:href="#app-icon-search"></use>
        </svg>
        <svg viewBox="0 0 100 100" class="add-picto-pictos-search-icon  add-picto-pictos-search-icon-right">
          <use xlink:href="#app-icon-close"></use>
        </svg>
        <input placeholder="Nom du produit..." v-model="search" />
      </div>

      <div class="pictos-container">
        <template v-for="picto in pictos | filterBy search in 'name' | orderBy 'name' ">
          <div class="picto-item-wrapper">
            <input name="{{ picto.name }}" class="picto" type="radio" value="{{ picto.name }}" v-model="picto">
            <label for="{{ picto.name }}" class="picto-item-container">
              <svg viewBox="0 0 100 100" class="picto-item-icon">
                <use xlink:href="#foods-icon-{{ picto.name }}"></use>
              </svg>
            </label>
          </div>
        </template>
      </div>
    </div>
    <div class="add-picto-accomplice-button">Ajouter</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pictos : [
        {name : 'salade'},
        {name : 'oeuf'},
        {name : 'sandwich'},
      ],
    }
  },
};
</script>

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

.popup-title-separator {
  width: 56px;
  height: 5px;
  margin: 0 auto;
  transform: scale(0.5);
  background: url('/static/img/separator-green.png') center center no-repeat;
}

.add-picto-popup-container {
  width: 100%;
}

  .add-picto-popup-title {
    margin-top: 30px;
    font: 1.8em 'IowanOldStyleBT-BlackItalic', sans-serif;
    color: $color-red;
  }

  .add-picto-popup-item-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

    .add-picto-popup-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .add-picto-accomplice-text{margin: 30px auto 20px;}

    .add-picto-accomplice-text p {
      display: inline;
      position: relative;
      margin: 0;
      font: 1.5em 'Karla-Italic', sans-serif;
      color: $color-text;
    }

    .underline {
      position: absolute;
      left: 0;
      bottom: 2px;
      height: 4px;
      width: 100%;
      background: $color-beige;
      z-index: -1;
    }

  .add-picto-accomplice-button {
    margin: 20px auto 20px;
    width: 150px;
    padding: 18px 0;
    border-radius: 25px;
    background-color: $color-beige;
    font: 1.3em 'Karla-Bold', sans-serif;
    color: $color-text;
    text-transform: uppercase;
    text-align: center;
  }

  .add-picto-pictos-wrapper {
    text-align: center;
  }

    .add-picto-pictos-search {
      position: relative;
      margin: 0px auto 18px ;
      width: 262px;

      input {
        padding: 0 55px 0 50px;
        width: 100%;
        height: 40px;
        border: none;
        border-radius: 20px;
        box-sizing: border-box;
        font: 1.5em 'Karla-Italic', sans-serif;
        color: $color-white;
        background: $color-green-lite;
      }

      ::-webkit-input-placeholder {
        color: $color-white;
      }
    }

      .add-picto-pictos-search-icon {
        position: absolute;
        margin-top: 5px;
        width: 30px;
        height: 30px;
        fill: $color-white;
      }

      .add-picto-pictos-search-icon-left {
        left: 15px;
      }
      .add-picto-pictos-search-icon-right {
        right: 15px;
        opacity: 0;
        transition: all 0.5s;
        &.active {
          opacity: 1;
        }
      }

      .pictos-container {
        display: flex;
        flex-flow: row;
        max-width: 262px;
        margin: auto;
      }
      .picto-item-wrapper{
        width: 33%;
        text-align: center;
        input[type="radio"] {
          display: none;
          &:checked {
            + label {
              transform: scale3d(1.2,1.2,1.2);
            }
          }
        }
      }

      .picto-item-container {
        svg {max-width: 60px;}

      }

</style>
<commit_msg>Popup addict<commit_after><template transition="popIn">
  <div class="add-picto-popup-container">
    <h3 class="add-picto-popup-title">Choix de la denrée</h3>
    <div class="popup-title-separator"></div>
    <div class="add-picto-accomplice-text">
      <p>Choisis l'illustration de la denrée que <span class="underline"></span><br /></p>
      <p>tu souhaites partager<span class="underline"></span></p>
    </div>
    <div class="add-picto-wrapper">
      <div class="add-picto-search">
        <svg viewBox="0 0 100 100" class="add-picto-search-icon  add-picto-search-icon-left">
          <use xlink:href="#app-icon-search"></use>
        </svg>
        <svg viewBox="0 0 100 100" class="add-picto-search-icon  add-picto-search-icon-right">
          <use xlink:href="#app-icon-close"></use>
        </svg>
        <input placeholder="Nom du produit..." v-model="search" />
      </div>

      <div v-if="!filteredFoods.length" class="categories-container" >
       <div class="add-picto-accomplice-subtitle">
        <p>Sapristi ! P<NAME> ne connaitrait<br /> pas cette mystérieuse denrée...</p>
      </div>
       <div class="add-picto-accomplice-text">
         <p>Mais tu peux choisir la catégorie de<span class="underline"></span><br /></p>
         <p>ton produit dans la liste ci-dessous : <span class="underline"></span></p>
       </div>
       <div class="categories-wrapper">
         <template v-for="category in categories | orderBy 'name' ">
           <div class="category-item-wrapper">
             <input id="{{ category.shortName }}" class="category-item-input" type="radio" value="{{ category.shortName }}" v-model="selectedCategory">
             <label for="{{ category.shortName }}" class="category-item-label">{{ category.longName }}</label>
           </div>
         </template>
       </div>
      </div>

      <div v-else class="pictos-container">
        <template v-for="picto in pictos | filterBy search in 'name' | orderBy 'name' ">
          <div class="picto-item-wrapper">
            <input id="{{ picto.name }}" class="picto" type="radio" value="{{ picto.name }}" v-model="selectedFood">
            <label for="{{ picto.name }}" class="picto-item-container">
              <svg viewBox="0 0 100 100" class="picto-item-icon">
                <use xlink:href="#foods-icon-{{ picto.name }}"></use>
              </svg>
            </label>
          </div>
        </template>

      </div>
    </div>
    <div class="add-picto-accomplice-button">Ajouter</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      search: '',
      selectedFood: '',
      categories: [
        {shortName: 'legumes', longName : 'Légumes & Fruits'},
        {shortName: 'viandes', longName : 'Viandes & Poissons'},
        {shortName: 'laitiers', longName : 'Produits laitiers'},
        {shortName: 'cereales', longName : 'Céréales & Dérivés'},
        {shortName: 'boissons', longName : 'Boissons'},
        {shortName: 'desserts', longName : 'Desserts'},
        {shortName: 'autres', longName : 'Autres'},
      ],
      pictos : [
        {name : 'salade'},
        {name : 'oeuf'},
        {name : 'sandwich'},
        {name : 'poivron'},
        {name : 'poisson'},
        {name : 'viande'},
        {name : 'pates'},
        {name : 'croissant'},
        {name : 'tomate'},
        {name : 'orange'},
        {name : 'pomme'},
        {name : 'poire'},
        {name : 'riz'},
        {name : 'yaourt'},
        {name : 'pizza'},
        {name : 'patate'},
        {name : 'muffin'},
        {name : 'lait'},
        {name : 'pates'},
        {name : 'citron'},
        {name : 'carotte'},
        {name : 'pain'},
        {name : 'banane'},
        {name : 'emmental'},
        {name : 'chou'},
        {name : 'poulet'},
        {name : 'chocolat'},
        {name : 'painmie'},
      ],
    }
  },
  computed: {
    filteredFoods: function () {
         return this.pictos.filter(function(picto){
             return picto.name.indexOf(this.search) > -1;
         }.bind(this));
     }
   },
};
</script>

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

.popup-title-separator {
  width: 56px;
  height: 5px;
  margin: 0 auto;
  transform: scale(0.5);
  background: url('/static/img/separator-green.png') center center no-repeat;
}

.add-picto-popup-container {
  width: 100%;
}

  .add-picto-popup-title {
    margin-top: 30px;
    font: 1.8em 'IowanOldStyleBT-BlackItalic', sans-serif;
    color: $color-red;
  }

  .add-picto-popup-item-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

    .add-picto-popup-item {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .add-picto-accomplice-subtitle {
      text-align: center;
      p {
        display: inline;
        position: relative;
        margin: 0;
        font: 1.5em 'Karla-Italic', sans-serif;
        color: $color-red;
      }
    }

    .add-picto-accomplice-text{
      margin: 20px auto;
      text-align: center;
    }

    .add-picto-accomplice-text p {
      display: inline;
      position: relative;
      margin: 0;
      font: 1.5em 'Karla-Italic', sans-serif;
      color: $color-text;
      text-align: center;
    }

    .underline {
      position: absolute;
      left: 0;
      bottom: 2px;
      height: 4px;
      width: 100%;
      background: $color-beige;
      z-index: -1;
    }

  .add-picto-accomplice-button {
    margin: 20px auto 20px;
    width: 150px;
    padding: 18px 0;
    border-radius: 25px;
    background-color: $color-beige;
    font: 1.3em 'Karla-Bold', sans-serif;
    color: $color-text;
    text-transform: uppercase;
    text-align: center;
  }

  .add-picto-wrapper {
    text-align: center;
  }

    .add-picto-search {
      position: relative;
      margin: 0px auto 18px ;
      width: 262px;

      input {
        padding: 0 55px 0 50px;
        width: 100%;
        height: 40px;
        border: none;
        border-radius: 20px;
        box-sizing: border-box;
        font: 1.5em 'Karla-Italic', sans-serif;
        color: $color-white;
        background: $color-green-lite;
      }

      ::-webkit-input-placeholder {
        color: $color-white;
      }
    }

      .add-picto-search-icon {
        position: absolute;
        margin-top: 5px;
        width: 30px;
        height: 30px;
        fill: $color-white;
      }

      .add-picto-search-icon-left {
        left: 15px;
      }
      .add-picto-search-icon-right {
        right: 15px;
        opacity: 0;
        transition: all 0.5s;
        &.active {
          opacity: 1;
        }
      }

      .pictos-container {
        max-width: 262px;
        margin: auto;
        overflow: scroll;
        height: 300px;
      }
      .picto-item-wrapper{
        text-align: center;
        display: inline-block;
        width: 33%;
        label {
          display: inline-block;
          width: 60px;
        }
        input[type="radio"] {
          display: none;
          &:checked + label {
            transform: scale3d(1.2,1.2,1.2);
          }
        }
      }

      .categories-wrapper {
        max-width: 270px;
        margin-left: 50px;
        text-align: left;
      }
      .category-item-wrapper{
        position: relative;
        text-align: left;
        display: inline-block;
        width: 50%;
        margin: 10px auto;
        label {
          vertical-align: middle;
          text-transform: uppercase;
          color: $color-text;
          font: 1.4em 'Karla-Italic', sans-serif;
          margin: 0px 0 0px 35px;
          max-width: 69px;
          display: inline-block;
          &:before {
            left: 0px;
            top: 0px;
            width: 20px;
            height: 20px;
            border: 1px solid $color-sepia;
          }
          &:after {
            left: 3px;
            top: 3px;
            width: 16px;
            height: 16px;
          }
          &:before,
          &:after {
            content: "";
            position: absolute;
            display: inline-block;
            border-radius: 50%;
          }
        }
        input[type="radio"] {
          display: none;
          &:checked + label:after {
            background-color: $color-sepia;
          }
        }
      }


</style>

{'fraction_non_alphanumeric': 0.1561664757541046, 'fraction_numerical': 0.02046582665139366, 'mean_word_length': 1.8494342906875545, 'pattern_counts': {'":': 0, '<': 133, '<?xml version=': 0, '>': 134, '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': '2260842', 'n_tokens_mistral': 4693, 'n_tokens_neox': 4435, 'n_words': 888}