{extends "index.tpl"}

{block "meta-description"}
   <meta name="description" content="{$body.article.lead}">
{/block}

{block "og-image"}
   {if !$body.article.image}
      {$og_image = "{get_photo photo=$body.article.image size='news_detail'}"}
      <meta property="og:image" content="{$cfg.Addr.full|trim:'/'}{$og_image}">
   {else}
      {$smarty.block.parent}
   {/if}
{/block}

{block "main-class"}main-article{/block}

{block "breadcrumbs"}{/block}

{block "content"}
   {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="http://www.facebook.com/sharer/sharer.php?u={$shareUrl}&title={$shareTitle}" target="_blank" rel="noopener noreferrer"
         class="fc icons_share_fb"></a><br>
      <a href="http://twitter.com/intent/tweet?status={$shareTitle}&url={$shareUrl}" rel="noopener noreferrer" target="_blank" class="fc icons_share_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_share_pinterest"></a>
   {/function}

   {foreach $body.article.tags as $tag}
      {if $tag.id == 1}
         {$old_layout = true}
      {/if}
      {if $tag.id == 2}
         {$show_main_image = true}
      {/if}
   {/foreach}

   <div class="container article-detail">
      <div class="row">
         <div class="col-xl-6 col-xl-offset-2 col-lg-10">
            {$article_section = $activeCategory.breadcrumb[($activeCategory.breadcrumb|count - 2)]}
            <a class="flag flag-article-section"
               href="{path('kupshop_content_articles_articles_1', ['IDb' => $article_section.IDb])}">
               {$article_section.text}
            </a>

            <h1 class="article-title">{$body.article.title}</h1>
            <p class="article-data">
               <span>{$body.article.date|date_format:"%d.%m.%y"}</span>
               <span>{$body.article.seen}x {t}přečteno{/t}</span>
               {* todo čas čtení *}
            </p>
            <p class="article-perex">{$body.article.lead}</p>
         </div>

         <div class="col-xl-2 col-lg-1 article-share article-share-top">
            <p class="lead">{t}Sdílet{/t}</p>
            {share_btns}
         </div>

         {if $show_main_image and $body.article.image}
            {$photo_dimensions = $cfg.Photo.types["news_detail"].size}
            <div class="col-xl-10 col-xl-offset-1 col-xxs-12">
               <div class="article-main-image">
                  <img src="{get_photo photo=$body.article.image size='news_detail'}" class="img-fluid" alt="{$body.article.title}"
                       width="{$photo_dimensions[0]}" height="{$photo_dimensions[1]}">
               </div>
            </div>
         {/if}
      </div>

      {if $old_layout}
         <div class="row">
            <div class="col-xxl-10 col-xxl-offset-1 col-xxs-12">
               {if $body.article.body}
                  <div class="article-detail-content">
                     {$body.article.body.body nofilter}
                  </div>
               {/if}
            </div>
         </div>
      {else}
         <div class="row">
            <div class="col-xl-6 col-xl-offset-2 col-lg-9 col-xxs-12">
               {if $body.article.body}
                  <div class="article-detail-content">
                     {$body.article.body.body nofilter}
                  </div>
               {/if}
            </div>

            {include 'components/block.articles-side.tpl' css_custom_class="col-xl-pull-1"}
         </div>
      {/if}

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

         {get_articles assign="articles" section='all' count=2}
         {if $articles.articles|count}
            <div class="col-xl-8 col-xl-offset-2 col-xxs-12">
               <h2 class="other-articles-title"><a href="{url s=articles IDb=$cfg.blog_section_id|default:7}">{t}Kam dále?{/t}</a></h2>
               <div class="row articles-row-detail">
                  {foreach $articles.articles as $article}
                     {include 'block.articles.large.tpl' article=$article}
                  {/foreach}
               </div>
            </div>
         {/if}
      </div>
   </div>
{/block}
