{% extends 'base.html.twig' %}

{% block title %}{% if News.title is not empty %}{{ News.title }}{% endif %}{% endblock %}

{% block body %}

    {% include('elements/_navigation.html.twig') %}

    <section class="blog-heading" style="background-image: url({{ asset('uploads/images/' ~ News.image) }})">
        <div class="container-fluid">
            <div class="container" style="position: relative; z-index: 1;">
                <div class="row pt-5">
                    <div class="col-12 col-sm-12 col-md-3 col-lg-3 col-xl-3">
                        <h3 class="text-white">Blog</h3>
                    </div>
                    <div class="col-12 col-sm-12 col-md-9 col-lg-9 col-xl-9">
                        <h1 class="text-white">{{ News.title }}</h1>
                        <h4 class="text-white">{{  News.published|date("M d, Y.")}}</h4>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="blog-body">
        <div class="container-fluid">
            <div class="container" style="position: relative">
                <div class="row pt-5">

                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                        <h1 class="blue-text-color">{{ News.title }}</h1>
                        {{ News.text|raw }}
                        {% if News.video %}
                            <p class="pt-3 pb-3"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/{{ News.video }}?rel=0" allowfullscreen width="100%" height="500"></iframe></p>
                        {% endif %}

                    </div>

                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 col-xxl-6">
                        <div class="news-images row">
                            {% for photo in Photos %}
                                <div class="col-sm-6 col-lg-3 mb-4">
                                    <div class="card">
                                        <a href="{{ asset('uploads/images/' ~ photo.path) }}" data-fancybox="gallery">
                                            <img src="{{ asset('uploads/images/' ~ photo.path) }}" alt="{{ News.title }}" class="img-fluid"/>
                                        </a>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </section>

    <section class="container-fluid news-homepage-section news">
        <div class="container">
            <h3 class="blue-text-color text-center pb-4">News, events and more</h3>
            <div class="row">

                <div class="row row-cols-1 row-cols-md-4">
                    {% for rel in RelatedNews %}
                        <div class="col mb-3">
                            <div class="card h-100 text-white bg-dark">
                                <a href="{{ path('news_details_page', {'slug': rel.slug}) }}"><img src="{{ asset('uploads/images/' ~ rel.image) }}" class="card-img-top" alt="{{ rel.title }}"/></a>
                                <div class="card-body">
                                    <h5 class="card-title blue-text-color"><a href="{{ path('news_details_page', {'slug': rel.slug}) }}">{{ rel.title }}</a></h5>
                                    <p class="card-text">
                                        {{ rel.metaDescription }}
                                    </p>
                                </div>
                                <div class="card-footer">
                                    <small class="text-muted">{{  rel.published|date("M d, Y.")}}</small>
                                </div>
                            </div>
                        </div>
                    {% endfor %}

                </div>

            </div>
        </div>
    </section>

    <section class="blue-transition text-center">

        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <h3 class="text-white">BUY OUR LED SCREENS OR LEASE THEM, FOR A PERIOD FROM ONE DAY TO
                        ONE YEAR!<br/> CONTACT US OR CALL US TODAY AT +385 1 3385 771!</h3>
                </div>
            </div>
        </div>

    </section>

    {% include('elements/_footer.html.twig') %}

{% endblock %}