(function () {
  var listing = document.getElementById('blog-listing');
  var content = document.getElementById('blog-window-content');
  var panels  = document.querySelectorAll('.blog-post-panel');
  var tagBtns = document.querySelectorAll('.blog-tag');
  var items   = document.querySelectorAll('.post-list-item');

  // ── Tag filtering ──────────────────────────────
  tagBtns.forEach(function (btn) {
    btn.addEventListener('click', function () {
      tagBtns.forEach(function (b) { b.classList.remove('active'); });
      btn.classList.add('active');
      var tag = btn.dataset.tag;
      items.forEach(function (li) {
        var tags = li.dataset.tags ? li.dataset.tags.split(' ') : [];
        li.style.display = (tag === '*' || tags.indexOf(tag) !== -1) ? '' : 'none';
      });
    });
  });

  // ── Open a post ────────────────────────────────
  document.querySelectorAll('.blog-open-post').forEach(function (link) {
    link.addEventListener('click', function (e) {
      e.preventDefault();
      listing.classList.add('hidden');
      panels.forEach(function (p) { p.classList.add('hidden'); });
      var panel = document.getElementById('blog-post-' + link.dataset.postIdx);
      if (panel) { panel.classList.remove('hidden'); content.scrollTop = 0; }
    });
  });

  // ── Back to listing ────────────────────────────
  document.querySelectorAll('.blog-back').forEach(function (btn) {
    btn.addEventListener('click', function () {
      panels.forEach(function (p) { p.classList.add('hidden'); });
      listing.classList.remove('hidden');
      content.scrollTop = 0;
    });
  });
}());