{% extends request.ajax ? "layout_blank.html.twig" : "layout_default.html.twig" %}

{% block meta_title %}{{ 'News'|trans }}{% endblock %}

{% block body_class %}news-index{% endblock %}
{% block breadcrumb %}
    <li class="breadcrumb-item active" aria-current="page">{{ 'News'|trans }}</li>{% endblock %}

{% block content %}
    <div class="row">
        <div class="col-md-12">
            <div class="card mb-4">
                <div class="card-header py-3 py-3">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h5 class="mb-1">{{ 'News & Announcements'|trans }}</h5>
                            <span class="small text-muted">{{ 'Track our latest information.'|trans }}</span>
                        </div>
                    </div>
                </div>
                <div class="card-body pb-0">
                    {% set posts = guest.news_get_list({ "page": request.page, "per_page": 5 }) %}
                    {% for i, post in posts.list %}
                        <div class="card mb-3">
                            <div class="card-body">
                                <h3 class="link-body-emphasis mb-1">{{ post.title }}</h3>
                                <span class="text-muted">{{ post.updated_at|format_datetime }}</span>
                                <p>
                                    {% if post.excerpt %}
                                        {{ post.excerpt|truncate(200)|markdown }}
                                    {% else %}
                                        {{ post.content|truncate(200)|markdown }}
                                    {% endif %}
                                </p>
                                <a class="link-offset-2 link-underline"
                                   href="{{ '/news'|link }}/{{ post.slug }}">{{ 'Continue reading'|trans }}
                                    <svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                        <path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/>
                                    </svg>
                                </a>
                            </div>
                        </div>
                    {% else %}
                        {{ 'No news or announcements'|trans }}
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}
