{% load i18n %}
{% load base_tags_extra %}
{% load webpush_notifications %}

<header class="header">
  <div class="header__grid container">
    <div class="header__logo">
{#      <a href="{% url 'main' %}">#}
        <img class="svg" src="/static/img/png/finlogo.png">
{#      </a>#}
    </div>


    <nav class="header__nav hide__md">
      <ul class="header__list">
        <li class="header__item">
          <a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
        </li>
        <li class="header__item">
          <a href="#chatterbox" class="header__link">{% trans "Отзывы" %}</a>
        </li>
        <li class="header__item">
          <a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
        </li>
        <li class="header__item">
          <a href="#about" class="header__link">{% trans "О сервисе" %}</a>
        </li>
      </ul>
    </nav>
    <a
        class="header__btn btn btn--primary hide--md"
        onclick="ym(97070898,'reachGoal','reg_button_header'); return true"
        href="{% url "registration_page" %}">
      {% trans "Регистрируйся" %}
    </a>
    <div class="dropdown show__md">
      <img onclick="showMenu(this, event)" class="dropbtn" src="/static/img/svg/Menu.svg">
      <div
          class="dropdown-content"
      >
        <a href="#benefits" class="header__link">{% trans "Преимущества" %}</a>
        <a href="#chatterbox" class="header__link">{% trans "Отзывы" %}</a>
        <a href="#howtowork" class="header__link">{% trans "Как это работает" %}</a>
        <a href="#about" class="header__link">{% trans "О сервисе" %}</a>
      </div>
    </div>
  </div>
</header>
<script>
  function initHeaderState() {
	var activeClassname = 'scrolled';
	var $document = $(document);
	var headerTop = $('.header');
		var header = $('.header');
		$(window).off('scroll.header').on('scroll.header', function() {
			var scrollTop = $document.scrollTop();
			var headerHeight = header.outerHeight();
			if (scrollTop > headerHeight) {
				headerTop.addClass(activeClassname);
				$(document.body).addClass(activeClassname);
			} else {
				headerTop.removeClass(activeClassname);
				$(document.body).removeClass(activeClassname);
			}
		});
	}

$(document).ready(()=>{
  initHeaderState();
})
$(document).off('click.hide-menu').on('click.hide-menu',(e)=>{
  let el = e.target;
  if (!el.closest('.dropdown')) {
    $('.dropdown-content').removeClass('show');
  }
})
</script>