{extends_parent}

{block "css-entry" append}
   {encore_entry_link_tags entry='articles'}
{/block}

{block "og-image"}
   {$og_image = "{$cfg.Addr.full}templates/images/share/fb-share-image.png"}
   {if $body.article.image}
      {$og_image = "{get_photo photo=$body.article.image absolute=1 size='article_thumb'}"}
   {/if}
   <meta property="og:image" content="{$og_image}">
{/block}

{block "main"}
   {url s=article IDa=$body.article.id absolute=1 assign="shareUrl"}
   {get_photo photo=$body.article.image size=4 absolute=1 assign="shareImage"}
   {$shareTitle = $body.article.title|replace:' ':'%20'}

   {function share_btns}
      <a href="https://www.facebook.com/sharer/sharer.php?u={$shareUrl}&title={$shareTitle}" target="_blank" rel="noopener noreferrer"
         class="fc icons_fb"></a>
      <br>
      <a href="http://twitter.com/intent/tweet?status={$shareTitle}&url={$shareUrl}" rel="noopener noreferrer" target="_blank"
         class="fc icons_twitter"></a>
      <br>
      <a href="http://pinterest.com/pin/create/bookmarklet/?media={$shareImage}&url={$shareUrl}&is_video=false&description={$shareTitle}"
         rel="noopener noreferrer" target="_blank" class="fc icons_pinterest"></a>
   {/function}
   <main class="main main-article container-wide">
      <progress value="0" max="0" class="article-progress-reading" data-progress-reading></progress>

      {include "components/breadcrumbs.tpl"}

      <div class="article-detail">
         <div class="article-header">
            <h1>{$body.article.title}</h1>
            <p class="article-data article-data-top">
               <span>{$body.article.date|date_format:"%e.%-m.%Y"}</span>
               {if $body.article.data['author']}<span>{$body.article.data['author']}</span>{/if}
               {if $body.article.data.readTime}
                  <span>{$body.article.data.readTime} {t}čtení{/t}</span>
               {/if}
            </p>
            <p class="article-perex">{$body.article.lead}</p>
            {$photo_dimensions = $cfg.Photo.types.slider_lg.size}
            {if $image@iteration == 1}
               <link rel="preload" href="{get_photo photo=$body.article.photos[0].img size='slider_sm' version="mobile"}" as="image" media="(max-width: 543px)">
               <link rel="preload" href="{get_photo photo=$body.article.photos[0].img size='slider_md' version="tablet"}" as="image" media="(min-width: 544px) and (max-width: 991px)">
               <link rel="preload" href="{get_photo photo=$body.article.photos[0].img size='slider_lg' version="desktop"}" as="image" media="(min-width: 992px)">
            {/if}
            <picture>
               <source srcset="{get_photo photo=$body.article.photos[0].img size='slider_sm' version="mobile"}" media="(max-width: 543px)">
               <source srcset="{get_photo photo=$body.article.photos[0].img size='slider_md' version="tablet"}" media="(max-width: 991px)">
               <img src="{get_photo photo=$body.article.photos[0].img size='slider_lg' version="desktop"}" alt="" width="{$photo_dimensions[0]}"
                    height="{$photo_dimensions[1]}"{if $image@iteration > 1} loading="lazy"{/if}>
            </picture>
         </div>

         <div class="col-left article-content">
            {$body.article.body.body nofilter}
         </div>

         <div class="col-right articles-side">
            <div class="article-share article-share-top">
               <h4>{t}Sdílet{/t}</h4>
               {share_btns}
            </div>

            <div class="articles-alsoread">
               {insert_cached key="articles-side-detail"}
               {get_articles section=all assign='top_articles' count=2 order_by='seen' order='DESC'}
               {if $top_articles.articles}
                  <h4>{t}Čtěte také{/t}</h4>
                  {include "articles/block.articles.small.tpl" articles=$top_articles.articles}
               {/if}
               {/insert_cached}
            </div>

            {get_articles_tags id_article=$body.article.id only_active=1 assign='tags'}
            {if $tags|count > 0}
               <div class="article-tags-wrapper">
                  <h4>{t}Štítky{/t}</h4>
                  <p class="article-tags">
                     {foreach $tags as $tag}
                        <a href="{url s='articles_tags' ID=$tag.id TITLE=$tag.tag}">{$tag.tag}</a>{if !$tag@last}, {/if}
                     {/foreach}
                  </p>
               </div>
            {/if}

            {foreach $body.article.authors as $author}
               {if $author@first && $author.active == "Y"}
                  <div class="article-author">
                     {$photo_dimensions = $cfg.Photo.types["articles_authors"].size}
                     <img src="{get_photo id=$author.id image='articles_authors'}" alt="{$author.nick}" class="img-responsive"
                          width="{$photo_dimensions[0]}" height="{$photo_dimensions[1]}"
                          loading="lazy">
                     <p class="subtitle">{t}Autor článku{/t}</p>
                     <h4>{$author.name} {$author.surname}</h4>
                     <p class="author-note">{$author.note nofilter}</p>
                  </div>
               {/if}
            {/foreach}
         </div>

         <div class="article-share article-share-bottom">
            <p>{t}Líbil se vám tento příspěvek? Pošlete ho dál...{/t}</p>
            <div>
               {share_btns}
            </div>
         </div>

         {insert_cached key="articles-read-more"}
         {get_articles assign="articles" section='all' count=2}
         {if $articles.articles|count}
            <div class="articles-related">
               <h2>{t}Kam dále?{/t}</h2>
               {foreach $articles.articles as $article}
                  {include "articles/block.articles.tpl" article=$article}
               {/foreach}
            </div>
         {/if}
         {/insert_cached}
      </div>
   </main>
{/block}

<script>
   {block onready}
   var $progress = $('[data-progress-reading]');

   var winHeight = $(window).height(),
           docHeight,
           max,
           value = $(window).scrollTop();

   $progress.attr('max', winHeight);

   setTimeout(function (e) {
      docHeight = $('.article-detail').height() /*- $('.articles-row-detail').height()*/ + 350,
              max = docHeight - winHeight;

      $progress.attr('max', max);
      $progress.attr('value', value);
   }, 1500);

   $(document).on('scroll', function () {
      value = $(window).scrollTop();
      $progress.attr('value', value);
   });

   $('body').on('click', 'a', function (e) {
      var target = $(this).attr('href');
      if (target.startsWith('#') && $(target).length) {
         wpj.domUtils.scrollTo($(target));
      }
   });

   var hash = '#' + location.href.split('#')[1] || '';
   if (hash.length > 1 && $(hash).length) {
      wpj.domUtils.scrollTo($(hash));
   }

   {/block}
</script>

{block "js-entry" append}
   {encore_entry_script_tags entry='articles'}
{/block}
