<? global $lang, $lang_id, $page;?>
<?
$text = $this -> article['language']['text'];
$text = \front\factory\Articles::generateHeadersIds( $text );
?>
<?php if ( $this -> article['params']['realizacja'] == 'on' ) : ?>
<div class="article realizacja-article article-<?= $this -> article['id'];?>"
  id="article-<?= $this -> article['id'];?>">
  <header class="header_hero">
    <div class="container">
      <div class="header_hero__wrapper">
        <div class="header_hero__text">
          <h1><?= $this -> article['language']['title']; ?></h1>
        </div>
        <div class="header_hero__subText">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
  </header>

  <div class="container">
    <div class="article_data">
      <div class="article_data_wrapper">
        <div class="text">
          <?
            $text = $this -> article['language']['text'];

            $dom = new DomDocument('1.0', 'UTF-8');
            $dom -> loadHTML( '<?xml version="1.0" encoding="UTF-8"?>' . "\n" . $text );
          $elements = $dom -> getElementsByTagName( 'img' );
          foreach ( $elements as $element )
          {
          if ( strpos( $element -> getAttribute( 'class' ), 'zoom' ) !== false )
          {
          $element_tmp = $dom -> createElement( 'a', '' );
          $element_tmp -> setAttribute( 'href', $element -> getAttribute( 'src' ) );
          $element_tmp -> setAttribute( 'rel', 'article-' . $this -> article['id'] );
          $element_tmp -> setAttribute( 'class', 'fancybox' );
          $element_tmp_2 = $element -> cloneNode( false );
          $element_tmp -> appendChild( $element_tmp_2 );
          $element -> parentNode -> replaceChild( $element_tmp, $element );
          }
          }
          echo $dom -> saveHTML();
          ?>
        </div>
      </div>
    </div>
  </div>
</div>
<?php else : ?>
<div class="article blog-article article-<?= $this -> article['id'];?>">
  <? if ( $main_img = $this -> article['language']['main_image'] ): ?>
  <div class="main-image">
    <div class="main-image-data">
      <?php
          echo '<h3>' . $this -> article['language']['title'] . '</h3>';
          echo '<div class="article-attribute">';
          if ( $this -> article['show_date_add'] ){
            echo '<div class="date-add"> <img src="/images/icon/icon-date-white.svg" alt=""> ' . date("d/m/Y",strtotime($this -> article['date_add'])) . '</div>';
          }
          echo '</div>';
        ?>
    </div>
  </div>
  <? endif; ?>
  <div class="container">
    <div class="entry_title">
      <?= $this -> article['language']['entry']; ?>
    </div>
    <? $this -> article['language']['seo_link'] ? $url = $this -> article['language']['seo_link'] : $url = 'a-' . $this -> article['id'] . '-' . \S::seo( $this -> article['language']['title'] );?>
    <?
      if ( $this -> article['tags'] ):
        echo '<div class="article-tags">';
          echo '<ul>';
            foreach ( $this -> article['tags'] as $tag ):
              echo '<li>';
                echo '<a href="/tag,' . \S::seo( $tag ) . '">' . $tag . '</a>';
              echo '</li>';
            endforeach;
          echo '</ul>';
        echo '</div>';
      endif; ?>

    <? if ( $this -> article['repeat_entry'] ):?>
    <div class="entry">
      <?= $this -> article['language']['entry'];?>
    </div>
    <? endif;?>


    <div class="article_data">
      <!-- article sidebar -->
      <div class="article_data_sidebar">
        <div class="article_data_sidebar__wrapper">
          <? if ( $this -> article['show_table_of_contents'] ):?>
            <? if ( $this -> article['language']['table_of_contents'] ):?>
              <div class="table-of-contents">
                <div class="title">
                  <?= \S::lang( 'spis-tresci' );?>
                </div>
                <div class="spis_arr">
                  <?= $this -> article['language']['table_of_contents'];?>
                </div>
              </div>
            <? else:?>
              <div class="table-of-contents">
                <div class="title">
                  <?= \S::lang( 'spis-tresci' );?>
                </div>
                <div class="spis_arr">
                  <?= \front\factory\Articles::generateTableOfContents( $text );?>
                </div>
              </div>
            <? endif;?>
          <? endif;?>
          <div class="best_article">
            <h2 class="title">Najpopularniejsze artykuły</h2>
            [NAJPOULARNIEJSZE_ARTYKULY:7:3]
          </div>
        </div>
      </div>
      <div class="article_data_wrapper">
        <div class="text">
          <?

            $dom = new DomDocument('1.0', 'UTF-8');
            $dom -> loadHTML( '<?xml version="1.0" encoding="UTF-8"?>' . "\n" . $text );
            $elements = $dom -> getElementsByTagName( 'img' );
            foreach ( $elements as $element )
            {
              if ( strpos( $element -> getAttribute( 'class' ), 'zoom' ) !== false )
              {
                $element_tmp = $dom -> createElement( 'a', '' );
                $element_tmp -> setAttribute( 'href', $element -> getAttribute( 'src' ) );
                $element_tmp -> setAttribute( 'rel', 'article-' . $this -> article['id'] );
                $element_tmp -> setAttribute( 'class', 'fancybox' );
                $element_tmp_2 = $element -> cloneNode( false );
                $element_tmp -> appendChild( $element_tmp_2 );
                $element -> parentNode -> replaceChild( $element_tmp, $element );
              }
            }
            echo $dom -> saveHTML();

          //* Author

          if ( $this -> article['id_author'] ):
            $author = \front\factory\Authors::get_single_author( $this -> article['id_author'] );
          endif; ?>
          <div id="postAuthor">
            <div class="postAuthor__img">
              <? if ( $author['image'] ):?><img src="<?= $author['image'];?>" alt="<?= $author['author'];?>"><? endif;?>
            </div>
            <div class="postAuthor__text">
              <?= $author['languages'][ $lang_id ]['description'];?>
            </div>
          </div>
          <?
          // Social
          if ( $this -> article['social_icons'] ): ?>
          <div class="article__socialBox">
            <div class="article__socialBox__inner">
              <h2><?= $lang['share-this-article'];?></h2>
              <div class="social-icons">
                <a class="fb"
                  href="http://www.facebook.com/sharer.php?u=<?= \S::get_domain_url( $_SERVER['SERVER_NAME'] );?>/<?= $url;?>"
                  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;"
                  title="facebook" target="_blank" rel="nofollow">
                  <img src="/images/system/facebook-icon.svg" alt="facebook" />
                </a>
                <a class="twitter"
                  href="http://twitter.com/share?url=<?= \S::get_domain_url( $_SERVER['SERVER_NAME'] );?>/<?= $url;?>"
                  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=450,width=600');return false;"
                  title="twitter" target="_blank" rel="nofollow">
                  <img src="/images/system/twitter-icon.svg" alt="twitter" />
                </a>
                <a class="instagram"
                  href="https://www.instagram.com/shareArticle?mini=true&amp;url=<?= \S::get_domain_url( $_SERVER['SERVER_NAME'] );?>/<?= $url;?>"
                  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=850');return false;"
                  title="linked in" target="_blank" rel="nofollow">
                  <img src="/images/system/instagram-icon.svg" alt="instagram" />
                </a>
                <a class="linkedin"
                  href="http://www.linkedin.com/shareArticle?mini=true&amp;url=<?= \S::get_domain_url( $_SERVER['SERVER_NAME'] );?>/<?= $url;?>"
                  onclick="javascript:window.open(this.href, '', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=500,width=850');return false;"
                  title="linked in" target="_blank" rel="nofollow">
                  <img src="/images/system/linkedin-icon.svg" alt="linkedin" />
                </a>
              </div>
            </div>
          </div>
          <?php endif; ?>
        </div>
        <div class="article__backBtn">
          <a href="javascript:history.go(-1);" class="btn-2 btn-success"><?= $lang['wstecz'];?></a>
        </div>
      </div>
    </div>
  </div>
</div>
<?php endif; ?>



<script class="footer" type="text/javascript"
  src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
<script class="footer" type="text/javascript">
$(document).ready(function() {
  $('.spis_arr li a').on('click', function() {
    $('html, body').animate({
      scrollTop: $(this.hash).offset().top - $("#page_nav_panel").height() - 40
    }, 0);
    return false;
  });

  //* Fixed box when you scroll
  const postDetails = document.querySelector(".article_data_wrapper") //* Blok statyczny.
  const postSidebar = document.querySelector(".article_data_sidebar__wrapper") //* Blok jaki powinien być zafiksowany
  const headerHeight = document.querySelector(".nav_menu__inner") //* Header
  const socialBox = document.querySelector(".article__socialBox")

  const controller = new ScrollMagic.Controller()
  const scene = new ScrollMagic.Scene({
    triggerElement: postSidebar,
    triggerHook: 0,
    offset: -headerHeight.offsetHeight - 40,
    duration: getDuration,
  }).addTo(controller)

  if (window.matchMedia("(min-width: 991px)").matches) {
    scene.setPin(postSidebar, {
      pushFollowers: false
    })
  }

  window.addEventListener("resize", () => {
    if (window.matchMedia("(min-width: 991px)").matches) {
      scene.setPin(postSidebar, {
        pushFollowers: false
      })
    } else {
      scene.removePin(postSidebar, true)
    }
  })

  function getDuration() {
    return (
      postDetails.offsetHeight -
      postSidebar.offsetHeight - socialBox.offsetHeight - 100
    )
  }
});
</script>