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

{% block body %}

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

    <section class="container-fluid blue-bg blog">
        <div class="container">
            <h3 class="text-white text-center pb-4">Follow our blog for latest LED and other display technology trends and insights</h3>
            <div class="row">

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

                </div>

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

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

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

                </div>

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

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

{% endblock %}