const scripts = document.getElementsByTagName('script');
const script_url = scripts[scripts.length - 1].getAttribute('src');
const root = script_url.substring(0, script_url.lastIndexOf('/'));

let toc = `
  <div class="c-detail-index__header">
    <h2 class="c-detail-index__label">目次</h2>
    <div>
      <label class="index-opener opener" for="news-index-toggle">[OPEN]</label>
      <label class="index-opener closer" for="news-index-toggle">[CLOSE]</label>
    </div>
  </div>
  <ul class="c-detail-index__list" style="overflow: hidden; max-height: 0; transition: max-height 0.4s ease-out;">
`;

let count = 0;
const headings = document.querySelectorAll('.c-detail-inner h2');

headings.forEach((h2, index) => {
  const idx = 'index-' + index;
  h2.setAttribute('id', idx);
  const text = h2.textContent.trim();
  toc += `<li><a href="#${idx}">${text}</a></li>`;
  count++;
});

toc += '</ul>';

if (count > 0) {
  const indexContainer = document.querySelector('.c-detail-index');
  if (indexContainer) {
    indexContainer.innerHTML = toc;

    const ul = indexContainer.querySelector('.c-detail-index__list');
    const openBtn = indexContainer.querySelector('.index-opener.opener');
    const closeBtn = indexContainer.querySelector('.index-opener.closer');

    openBtn.addEventListener('click', () => {
      ul.style.maxHeight = ul.scrollHeight + "px";
      ul.style.marginBottom = '20px';
      openBtn.style.display = 'none';
      closeBtn.style.display = 'inline';
    });

    closeBtn.addEventListener('click', () => {
      ul.style.maxHeight = "0";
      ul.style.marginBottom = '0';
      closeBtn.style.display = 'none';
      openBtn.style.display = 'inline';
    });
  }
}