{% load static %}

<div class="bg-petrol-100 text-center grid grid-cols-1 gap-4 place-content-center pt-6 pb-16 px-12 relative min-h-[400px]">

  <div id="skipSkillDown" class="absolute left-0 inset-y-20 bg-petrol-500/20 hover:bg-petrol-500 text-white px-2 rounded-r flex items-center cursor-pointer">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
      class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
    </svg>
  </div>

  <div id="skipSkillUp" class="absolute right-0 inset-y-20 bg-petrol-500/20 hover:bg-petrol-500 text-white px-2 rounded-l flex items-center cursor-pointer">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
      class="w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
    </svg>
  </div>

  <div id="btnGrpSliceIndicator" class="h-[15px] absolute bottom-10 inset-x-0 flex justify-center items-center space-x-3">
    {% for experience in experiences %}
      <button id="btnSliceIndicator_{{experience.index}}" class="h-[12px] w-[12px] bg-petrol-500/20 hover:bg-petrol-500"></button>
    {% endfor %}
  </div>

  {% for experience in experiences|slice:":1" %}
    <div id="experience_{{experience.index}}" class="text-base text-slate-800 space-y-1">
      <p class="text-slate-500">{{experience.time}}</p>
      <p class="font-bold">{{experience.label}}</p>
      <p>
        {{ experience.content }}
      </p>
    </div>
  {% endfor %}


  {% for experience in experiences|slice:"1:" %}  
    <div id="experience_{{experience.index}}" class="text-base text-slate-800 space-y-1 hidden">
      <p class="text-slate-500">{{experience.time}}</p>
      <p class="font-bold">{{experience.label}}</p>
      <p>
        {{ experience.content }}
      </p>
    </div>
  {% endfor %}

  <div class="absolute bottom-2 inset-x-0 text-center text-sm font-bold text-slate-800">./04_ERFAHRUNGEN</div>

</div>

<script>
  let slideExperience = 0;
  const numExperiences = {{ experiences|length }};
  
  let btnGrpSliceIndicator = document.getElementById("btnGrpSliceIndicator")

  document.getElementById("skipSkillDown").addEventListener("click", skipSkillDown);
  document.getElementById("skipSkillUp").addEventListener("click", skipSkillUp);

  let el = btnGrpSliceIndicator.firstElementChild;
  toggleIndicator(el)

  for (let index = 0; index < btnGrpSliceIndicator.childElementCount; index++) {
    el.addEventListener("click", setSkill); 
    el = el.nextElementSibling
  }

  function skipSkillDown() {
    if (slideExperience -1 < 0) {
      document.getElementById("btnSliceIndicator_" + (numExperiences - 1)).click()
    } else {
      document.getElementById("btnSliceIndicator_" + (slideExperience - 1)).click()
    };
  };
  function skipSkillUp() {
    if (slideExperience + 1 >= numExperiences) {
      document.getElementById("btnSliceIndicator_0").click()
    } else {
      document.getElementById("btnSliceIndicator_" + (slideExperience + 1)).click()
    };
  };


  function setSkill(e) {
    let elHide = document.getElementById("experience_" + slideExperience)
    elHide.classList.toggle('hidden');
    toggleIndicator(document.getElementById("btnSliceIndicator_" + slideExperience))

    slideExperience = Number(e.target.id.split('_')[1])
    let elShow = document.getElementById("experience_" + slideExperience)
    elShow.classList.toggle('hidden');
    toggleIndicator(document.getElementById("btnSliceIndicator_" + slideExperience))
  }

  function toggleIndicator(el) {
    el.classList.toggle('bg-petrol-500/20');
    el.classList.toggle('bg-petrol-500');
  }
</script>