{% extends "base.twig" %}

{% block content %}
  <section class="hero">
    <div class="hero__img-wrap">
      <div class="hero__img-overlay"></div>      
      {% set hero_image = Image(main_hero_bg_image) %}
      <img src="{{ hero_image.src }}" alt="{{ hero_image.alt }}" class="hero__img">
    </div>
    <div class="container hero__content">
      <div class="row">
        <div class="col-12 offset-md-2 col-md-10">
          <div class="hero__text">
            <h2>{{ main_hero_headline }}</h2>
            {{ main_hero_subheadline }}
            <div class="btn-left">
              <a href="{{ main_hero_button.url }}" target="{{ main_hero_button.target}}" class="btn btn--uppercase">{{ main_hero_button.title }}</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
 <section class="news-home">
    <div class="container">
      <h1 class="h3">Novosti</h1>
      <div class="row">
        <div class="col-12 offset-xxl-2 col-xxl-8">
          <div class="news-page__list owl-carousel">
            {% for featuredPost in posts %}          
                {% include "templates/partials/article_card.twig" with {
                  'article_image': featuredPost.thumbnail,
                  'card_title':  featuredPost.post_title,
                  'card_url':  featuredPost.link }
                %} 
            {% endfor %}
          </div>
          <div class="btn-center">
            <a href="{{ posts_page_link }}" class="btn">Vidi sve novosti</a>
          </div>
        </div>
      </div>
    </div>
  </section>
{% endblock %}