{% extends "fm/base.twig" %}

{% block content %}

{% if post.thumbnail %}
<div class="hero hero-interno" style="background-image: url('{{ Image(post.thumbnail).src }}');"> 
{% else %}
<div class="hero hero-interno" style="background-image: url('{{ site_options.default_images.magazine_post.hero.url }}');">
{% endif %}

  <div class="hero--navigation col-lg-3 p-0">     
    <style media="screen">
    .bk-primary{
      background-color: {{site_options.current_color}};
    }
    .txt-primary{
      color: {{site_options.current_color}};
    }
    </style>

    <div class="hero--navigation--header col-lg-12 bk-primary px-0">
    <img src="{{ theme.path }}/assets/images/fmlogo.svg" alt="" class="w-100">
    </div>

    <div class="hero--navigation--mobile d-block d-lg-none">
      <div class="hero--navigation--mobile--burger">
        <a href="javascript:void(0);" class="open-menu">
          <img src="{{ theme.path }}/assets/images/burger-menu.svg" alt="">
        </a>
      </div>
      <div class="hero--navigation--mobile--login">
        {% if user %}
          {% include 'fm/partials/elements/box-logged.twig' %}
        {% else %}
          {% include 'fm/partials/elements/box-not-logged-header.twig' %}
        {% endif %}
      </div>
    </div>
    <div class="hero--navigation--menu d-none d-lg-block">
      {% include 'fm/partials/elements/navigation.twig' %}
    </div>

    <!-- NAV MOBILE -->
    <div class="d-block d-lg-none">
      <div class="hero--navigation--menu animated bk-primary">
        <div class="hero--navigation--menu--closed">
          <button type="button" name="button" class="close-menu"><img src="{{ theme.path }}/assets/images/btn-closed.svg" alt=""></button>
        </div>
        {% include 'fm/partials/elements/navigation.twig' %}
      </div>
    </div>
  </div>

  <div class="hero--text col-xl-4 col-lg-6 text-right">
    <span>{{post.date}}</span>
    <h1 class="text-uppercase heading-2">{{post.title}}</h1> 
    <p>{{post.category}}</p> 
  </div>
</div>

<div class="container">
  <div class="single-txt row"> 

  <!-- #hc Banners Sidebar Top -->
  <div id="bannersSidebarTop">
    {% filter shortcodes %} 
      [banner group="sidebar" count="2"]
    {% endfilter %}
  </div>

  <style>  
    @media (max-width:991px) {
      #bannersSidebarTop {
        display: flex; 
        flex-wrap: wrap;
        justify-content: space-evenly;
        width: 100%;
        margin:0 10px 50px;
      }
      #bannersSidebarTop .banner_wrapper { 
        flex-basis: calc(50% - 16px);
        margin: 0;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #eee;
        margin: 0;
      }
      #bannersSidebarTop .banner_wrapper .banner img {  
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
        -webkit-filter: contrast(1.1);
        filter: contrast(1.1);
      }  
    }  

    #bannersSidebarTop {
      display: none;  
    }
  </style>  

  <div class="col-lg-9">        
    <div class="single">
      <div class="single--detail">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb list-unstyled"> 
            <li class="breadcrumb-item active" aria-current="page">{{post.title}}</li>
          </ol>
        </nav>
        {% if post.author_name %}
        <h3 class="heading-3">Por {{post.author_name}}</h3>
        {% endif %}
        <hr class="hr-primary bk-primary">
      </div>
      <div class="single--txt">
        {{post.content}}
      </div>
    </div>
 
    {% include 'fm/partials/elements/subscription-banner.twig' %}
  </div>

  <div class="col-lg-3">
    {{ function(
        [ 'CDController', 'init_controller'],
        'module',
        {
          template: 'fm_advertising',
          args: {
            direction: 'vertical',
          }
        }
    ) }}
  </div> 

  </div>
</div>

{% endblock %}