<?php

use app\models\News;
use app\models\Informers;

$curs = Informers::GetСurrency();
$temp = Informers::GetTemperature();
?>
<header>
    <div class="container">
        <?=$this->render("@app/views/_etc/banners/headerBanner")?>
        <div class="row">
            <div class="col-md-1 d-none d-lg-block">
                <div class="header-center__info" style="height:198px;">
                    <ul class="header-center__info-list">
                        <li class="header-center__info-item"><a href="/weather"><span class="header-center__info-link"><?=$temp?>°, Барнаул</span></a></li>
                        <?php if( $curs ): //Смотри, так красивше же гораздо? ?>
                            <li class="header-center__info-item"><span id="USD" class="header-center__info-link <?=($curs['USD']['dynamics'] == 'up')?'header-center__info-link_up':'header-center__info-link_down'?>">$&nbsp;<?=$curs['USD']['value']?></span></li>
                            <li class="header-center__info-item"><span id="EUR" class="header-center__info-link <?=($curs['EUR']['dynamics'] == 'up')?'header-center__info-link_up':'header-center__info-link_down'?>">€&nbsp;<?=$curs['EUR']['value']?></span></li>
                            <li class="header-center__info-item"><span id="CNY" class="header-center__info-link <?=($curs['CNY']['dynamics'] == 'up')?'header-center__info-link_up':'header-center__info-link_down'?>">Ұ&nbsp;<?=$curs['CNY']['value']?></span></li>
                            <li class="header-center__info-item"><span id="BTC" class="header-center__info-link <?=($curs['BTC']['dynamics'] == 'up')?'header-center__info-link_up':'header-center__info-link_down'?>">&#8383;&nbsp;<?=$curs['BTC']['value']?></span></li>
                        <?php endif;?>
                    </ul>
                </div>
            </div>
            <div class="col-lg-7 col-md-9">
                <?=$this->render("stories")?>
            </div>
            <div class="col-md-4">
                <?=$this->render("@app/views/_etc/header/header_comments")?>
            </div>
        </div>
    </div>
    <div class="nav-cont">
        <div id="js-header-bottom-id" class="header__bottom js-header-bottom">
            <div class="burger">
                <div class="hamburger hamburger--squeeze js-hamburger">
                    <div class="hamburger-box">
                        <div class="hamburger-inner"></div>
                    </div>
                </div>
            </div>
            <div class="header-bottom container">
                <div class="header-bottom__wrapper section-wrapper">
                    <main class="header-bottom__main">
                        <div class="header-bottom__logo"><a href="/" class="header-bottom__logo-link"><img src="/img/amic-logo.svg" width="91" height="28" alt="logo"></a></div>
                        <div class="header-bottom__nav">
                            <nav class="header-nav">
                                <ul class="header-nav__list">
                                    <li class="header-nav__item"><a href="/news" class="header-nav__link" title="Лента новостей">
                                            Новости
                                        </a></li>
                                    <li class="header-nav__item"><a href="/articles" class="header-nav__link" title="Статьи">
                                            Читай
                                        </a></li>
                                    <li class="header-nav__item"><a href="/podcasts" class="header-nav__link" title="Подкасты">
                                            Слушай
                                        </a></li>
                                    <li class="header-nav__item"><a href="/video" class="header-nav__link" title="Видео проекты">
                                            Смотри
                                        </a></li>
									<li class="header-nav__item"><span class="burgerd">...</span></li>

                                </ul>
                            </nav>
                        </div>
                    </main>
                    <aside class="header-bottom__side">
                        <div class="header-bottom__buttons">
                            <div class="header-bottom__button">
                                <a href="https://fmprod.ru/radiostantsii/item/evropa-plyus/" target="_blank" class="button button_grey">
                                    <span class="button__text tg">▶ Слушать радио</span>
                                </a>
                            </div>
                            <div class="header-bottom__button">
                                <a href="https://t.me/amic_ru" target="_blank" class="button button_grey button_grey-tg">
                                <span class="button__icon">
                                    <svg style="width: 17px;height: 14px;" class="icon icon-tg"><use xlink:href="/svg/symbol/sprite-styled.svg#tg"></use></svg>
                                </span>
                                    <span class="button__text tg">&nbsp;Телеграм-канал</span>
                                </a>
                            </div>
							<?=$this->render("@app/views/layouts/filters")?>
                        </div>

                    </aside>
                    <div class="actions">
                        <div class="desktop-search">
                            <form action="/search" method="get" class="search_form">
                                <input type="hidden" value="<?=Yii::$app->controller->id?>" name="index">
                                <input type="text" class="search_input" name="q" aria-label="Поиск">
                                <button>Найти</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</header>
<?
	$this->registerJs(
<<<JS
window.addEventListener("DOMContentLoaded",function () {
        let header = document.getElementById("js-header-bottom-id");
        let height = header.offsetHeight;
        header.parentNode.style.height = height+"px";
        let position = header.parentNode.offsetTop;
        $(window).scroll( function (){
            if(window.scrollY>=position){

                if(!header.classList.contains("fixed")) header.classList.add("fixed");
            } else {
                if(header.classList.contains("fixed"))  header.classList.remove("fixed");
            }
        });
});
JS
    ,
    $this::POS_END,
    'headerfixer'
	);
