{{ define "main" }}

<h1>Blog</h1>
<div id="accordion" class="divide-y divide-gray-200">
  {{ range $index, $page := .Data.Pages }}
  <div class="accordion-item">
    <h2 class="accordion-header mb-0" style="padding:0!important;">
      <button class="accordion-button relative flex items-center w-full py-4 px-5 text-left text-gray-800 bg-gray-100 focus:outline-none" type="button">
        <i class="verua-icon far text-primary fa-bullhorn"></i>&nbsp; {{ .Title }}
      </button>
    </h2>
    <div class="accordion-collapse hidden">
      <div class="accordion-body py-4 px-5">
        {{ .Content }}
      </div>
    </div>
  </div>
  {{ end }}
</div>

<script>
  document.addEventListener('DOMContentLoaded', () => {
    const accordionButtons = document.querySelectorAll('.accordion-button');

    accordionButtons.forEach(button => {
      button.addEventListener('click', () => {
        const accordionCollapse = button.parentElement.nextElementSibling;

        button.classList.toggle('active');
        if (button.classList.contains('active')) {
            button.parentElement.nextElementSibling.classList.remove('hidden');
          accordionCollapse.style.maxHeight = accordionCollapse.scrollHeight + 'px';
        } else {
          accordionCollapse.style.maxHeight = null;
          button.parentElement.nextElementSibling.classList.add('hidden');
        }
      });
    });
  });
</script>
{{ end}}