{%- if page.tool -%} {%- assign tool = page.tool -%} {%- assign data = site.data.rating.rating.tools -%} {% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder = page.folderName %} {% assign Data= site.data[lang] %} <div class=“rating-tool”>

<img id="rating-img" loading='lazy' src="/assets/images/rating.png" alt="rating-img" {%- if site.crossorigin -%}
  crossorigin {%- endif -%}>
<div class="rating-text">{{Data.rate | default: 'Rate this tool' }}</div>
<div class="rating-stars">
  <i class="fas fa-star rating-star"></i><i class="fas fa-star rating-star"></i><i
    class="fas fa-star rating-star"></i><i class="fas fa-star rating-star"></i><i class="fas fa-star rating-star"></i>
</div>
<div class="rating-value ml-2">
  {%- for item in data -%}
  {%- if item.name ==tool -%}
  {%- assign rating = item.rating -%}
  {%- assign votes = item.votes -%}
  {%- endif -%}
  {%- endfor -%}
  <span class="rating"> <strong id='rating'>{{rating}}</strong><span>/5</span> </span>
  &nbsp; <span class="total-ratings" id='count'>{{votes}} </span> {{Data.votes | default: 'votes' }}
</div>

</div> <script>

const ratingValue = document.getElementById('rating')
const count = document.getElementById('count')
const setRating = async (rating) => {
  const name = '{{site.name}}'
  const tool = '{{page.tool}}'
  const data = { website: name, feature: tool, rating: rating };
  fetch('https://ratingapi-main.netlify.app/.netlify/functions/api/v1/rating/add', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  })
    .then(response => response.json())
    .then(data => {
      ratingValue.innerText = data.rating
      count.innerText = data.count
    })
    .catch((error) => {
      console.error('Error:', error);
    });
}
const tool = '{{page.tool}}'
const fetchRating = async () => {
  const data = await fetch(`https://ratingapi-main.netlify.app/.netlify/functions/api/v1/${tool}/rating`).then(res => res.json())
  ratingValue.innerText = data.rating
  count.innerText = data.votes
}
let ratingImg = document.querySelector('#rating-img');
ratingImg.addEventListener('load', (event) => {
  fetchRating()
});
const ratingNode = document.getElementsByClassName('rating-star')
let ratedValue = localStorage.getItem(`${tool}rating`)
if (ratedValue) {
  Array.from(ratingNode).slice(0, ratedValue).map(item => {
    item.style.color = '#FDD300'
  })
}
Array.from(ratingNode).map(item => item.addEventListener('click', () => {
  const tool = '{{page.tool}}'
  if (!localStorage.getItem(`${tool}rating`)) {
    function indexInClass(node) {
      var className = node.className;
      var num = 0;
      for (var i = 0; i < ratingNode.length; i++) {
        if (ratingNode[i] === node) {
          return num;
        }
        num++;
      }
      return -1;
    }
    const index = indexInClass(item)
    Array.from(ratingNode).slice(0, index + 1).map(item => {
      item.style.color = '#FDD300'
    })
    setRating(index + 1)
    localStorage.setItem(`${tool}rating`, index + 1)
  }
}))

</script>

{%- endif -%}