{%- if page.tool -%} {%- assign tool = page.tool -%} {%- assign data =
site.data.rating.rating.tools -%} {%- for item in data -%} {%- if item.name
==tool -%} {%- assign rating = item.rating -%} {%- assign votes = item.votes -%}
{%- endif -%} {%- endfor -%}

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-10 pt-5 text-center">
      <div class="rating-tool">
        <img
          id="rating-img"
          loading="lazy"
          src="/assets/images/rating.png"
          alt="rating-img"
        />
        <div class="rating-text">Rate this tool</div>
        <div class="rating-stars">
          <svg
            class="rating-star"
            width="26"
            height="26"
            viewBox="0 0 56 53"
            fill="gray"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z"
            />
          </svg>
          <svg
            class="rating-star"
            width="26"
            height="26"
            viewBox="0 0 56 53"
            fill="gray"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z"
            />
          </svg>
          <svg
            class="rating-star"
            width="26"
            height="26"
            viewBox="0 0 56 53"
            fill="gray"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z"
            />
          </svg>
          <svg
            class="rating-star"
            width="26"
            height="26"
            viewBox="0 0 56 53"
            fill="gray"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z"
            />
          </svg>
          <svg
            class="rating-star"
            width="26"
            height="26"
            viewBox="0 0 56 53"
            fill="gray"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M30.8532 3.54509C29.9551 0.781158 26.0449 0.781146 25.1468 3.54508L20.538 17.7295C20.4042 18.1415 20.0202 18.4205 19.587 18.4205H4.67262C1.76645 18.4205 0.558112 22.1393 2.90926 23.8475L14.9752 32.614C15.3257 32.8686 15.4724 33.32 15.3385 33.732L10.7297 47.9164C9.83166 50.6803 12.9951 52.9787 15.3462 51.2705L27.4122 42.5041C27.7627 42.2494 28.2373 42.2494 28.5878 42.5041L40.6538 51.2705C43.0049 52.9787 46.1683 50.6803 45.2703 47.9164L40.6615 33.732C40.5276 33.32 40.6743 32.8686 41.0248 32.614L53.0907 23.8475C55.4419 22.1393 54.2336 18.4205 51.3274 18.4205H36.413C35.9798 18.4205 35.5958 18.1415 35.462 17.7295L30.8532 3.54509Z"
            />
          </svg>
          <!-- <i class="bi bi-star-fill rating-star"></i>
        <i class="bi bi-star-fill  rating-star"></i>
        <i class="bi bi-star-fill rating-star"></i>
        <i class="bi bi-star-fill rating-star"></i>
        <i class="bi bi-star-fill rating-star"></i> -->
        </div>
        <div class="rating-value ml-2">
          <span class="rating">
            <strong id="rating">{{rating}}</strong><span>/5</span>
          </span>
          &nbsp; <span class="total-ratings" id="count">{{votes}} </span> votes
        </div>
      </div>
    </div>
  </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) => {
        console.log(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());
    if (data.rating === "NaN") {
      ratingValue.innerText = "5.00";
      count.innerText = "1";
    } else {
      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.fill = "#FFB21D";
      });
  }

  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.fill = "#FFB21D";
          });
        setRating(index + 1);
        localStorage.setItem(`${tool}rating`, index + 1);
      }
    })
  );
</script>
{%- endif -%}