{% extends "core/base.html" %}
{% load truncate %}
{% load escaping %}
{% load i18n %}
{% load dates %}

{% block title %}{{ journal_settings.news.news_title }}{% endblock title %}

{% block body %}
    <div class="row">
        <div class="col m12">
            <h1>{{ journal_settings.news.news_title }}</h1>
            {% if tag %} <h2>{% trans "Filtering tag" %}: {{ tag }}</h2>{% endif %}
        </div>
        {% for item in news_items %}
            <div class="col m12">
                <div class="card">
                    {% if item.large_image_file or request.journal and request.journal.default_large_image or request.press.default_carousel_image %}
                    <div class="card-image">
                        <img src="{{ item.best_image_url }}" alt="{{ item.title|striptags|unescape }}"/>
                        <span class="card-title">
                          <div class="carousel-text-wrapper">
                            {{ item.title|safe }}
                          </div>
                        </span>
                    </div>
                    {% endif %}
                    <div class="card-content">
                        {% if not item.large_image_file or request.journal and not request.journal.default_large_image or not request.press.default_carousel_image %}
                            <h2 id="news-{{ item.id }}" class="no-top-margin">{{ item.title|safe }}</h2>
                        {% endif %}
                        <p class="byline">{{ item.byline }} {% trans "on" %} {{ item.posted|date_human }}</p>
                        <p>{{ item.body|truncatewords_html:50|safe }}</p>
                    </div>
                    <div class="card-action">
                        <a href="{% url 'core_news_item' item.pk %}" aria-describedby="news-{{ item.id }}">{% trans "Read More" %}</a>
                    </div>
                </div>
            </div>
            {% empty %}
            <h2>{% trans "This journal currently has no items to display." %}</h2>
        {% endfor %}
    </div>
    <div class="pagination-block">
        <ul class="d-flex justify-content-center">
            {% if news_items.has_previous %}
                <a href="?page={{ news_items.previous_page_number }}" class="btn btn-outline-primary">
                    {% include "elements/icons/page_previous.html" %}
                </a>
                &nbsp;{% endif %}
            {{ news_items.page.page_range }}
            {% for page in news_items.paginator.page_range %}
                <a href="?page={{ page }}"
                   class="btn {% if news_items.number == page %}btn-primary{% else %}btn-outline-primary{% endif %}">{{ page }}</a>
                &nbsp;
            {% endfor %}
            {% if news_items.has_next %}
                <a href="?page={{ news_items.next_page_number }}" class="btn btn-outline-primary">
                    {% include "elements/icons/page_next.html" %}
                </a>
            {% endif %}
        </ul>
    </div>
{% endblock %}