/* Add custom JS code below */ 
/* Add custom JS code below */ 
/* top navbar (search) deleted, added search icon*/
document.addEventListener('DOMContentLoaded', function () {
  function initSearchBtn() {
    const mainnav = document.querySelector('#mainnav');
    const userMenu = document.querySelector('#mainnav salla-user-menu');
    const search = document.querySelector('.top-navbar .header-search');
    const bar = search ? search.parentElement : null;

    if (!mainnav || !userMenu || !search || !bar) return;

    if (!document.querySelector('.header-search-btn')) {
      const btn = document.createElement('button');
      btn.type = 'button';
      btn.className = 's-user-menu-login-btn header-search-btn';
      btn.innerHTML = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><title>search</title><path d="M30.276 28.391l-7.576-7.576c1.644-2.053 2.633-4.652 2.633-7.481 0-6.616-5.384-12-12-12s-12 5.384-12 12 5.384 12 12 12c2.829 0 5.428-.989 7.481-2.633l7.576 7.576c.521.521 1.365.521 1.886 0s.521-1.364 0-1.885zM13.333 22.667c-5.147 0-9.333-4.187-9.333-9.333s4.187-9.333 9.333-9.333 9.333 4.187 9.333 9.333-4.187 9.333-9.333 9.333z"></path></svg>';

      userMenu.before(btn);

      btn.onclick = function (e) {
        e.stopPropagation();
        document.documentElement.style.setProperty('--mainnav-height', mainnav.offsetHeight + 'px');
        document.body.classList.add('search-open');
        setTimeout(() => search.querySelector('input')?.focus(), 100);
      };
    }

    if (!document.querySelector('.search-close-btn')) {
      const x = document.createElement('button');
      x.type = 'button';
      x.className = 'search-close-btn';
      x.innerHTML = '<svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path></svg>';

      bar.appendChild(x);

      x.onclick = function (e) {
        e.preventDefault();
        e.stopPropagation();
        document.body.classList.remove('search-open');
      };
    }
  }

  initSearchBtn();
  setTimeout(initSearchBtn, 1000);

  document.addEventListener('click', function (e) {
    if (document.body.classList.contains('search-open') && !e.target.closest('.top-navbar')) {
      document.body.classList.remove('search-open');
    }
  });
});

/* language button */

document.addEventListener('DOMContentLoaded', function () {
  function moveLangBtn() {
    const lang = document.querySelector('.top-navbar salla-localization-modal');
    const userMenu = document.querySelector('#mainnav salla-user-menu');

    if (!lang || !userMenu || lang.classList.contains('mainnav-lang')) return;

    lang.classList.add('mainnav-lang');
    userMenu.parentElement.prepend(lang);
  }

  moveLangBtn();
  setTimeout(moveLangBtn, 1000);
});