{% extends "base.html" %}

{% load i18n static wagtailcore_tags wagtailimages_tags %}
{% load wagtailroutablepage_tags %}

{% block extra_css %}
    <link rel="stylesheet" href="{% static 'wagtailpress/css/common.css' %}" type="text/css"/>
    <link rel="stylesheet" href="{% static 'wagtailpress/css/index.css' %}" type="text/css"/>
    <link rel="stylesheet" href="{% static 'wagtailpress/Fork-Awesome/css/fork-awesome.min.css' %}">
{% endblock %}

{% block body_class %}template-blogindexpage{% endblock %}

{% block content %}

    <div class="index_header">
        <h1>{{ page.title }}</h1>


        {% if tag %}
            <p class="filter_selection">
                {% blocktrans %}Article corresiponding to tag{% endblocktrans %}:
                <span class="tag">
                    {{ tag }} <a href="{% pageurl page %}"><i class="fa fa-times" aria-hidden="true"></i></a>
                </span>
            </p>
        {% else %}
            
            <div class="intro">
                {{ page.intro|richtext }}
            </div>

        {% endif %}
    </div>

    <div class="main">
        
        <div class="index_content all_articles">

            <h2>{% blocktrans %}Latest articles{% endblocktrans %}</h2>
            
            {% for article in articles %}
                <article>
                    <div class="card">
                        <div class="header_image">
                            {% image article.header_image fill-1024x300 class="card-img-top" %}
                        </div>

                        <div class="card-body">
                            
                            <h3>{{ article.title }}</h3>
                            
                            <p class="intro">
                                {{ article.intro }}
                            </p>

                            <a class="read_more" href="{% pageurl article %}">
                                {% blocktrans %}Read More{% endblocktrans %}
                            </a>

                        </div>

                        <div class="cart-footer"">
                            <div class="meta">
                                <div class="date">{{ article.date }}</div>
                                <div class="authors_list">
                                    <div>{% blocktrans %}By{% endblocktrans %}</div>
                                    <ul>
                                        {% for article_author in article.authors.all %}
                                            {% with author=article_author.author %}
                                                <li>{{ author.name }}</li>
                                            {% endwith %}   
                                        {% endfor %}
                                    </ul>
                                </div>
                                <div class="tags">
                                    <div class="tags_label">
                                        {% blocktrans %}Tags{% endblocktrans %}:
                                    </div>
                                    <ul>
                                        {% for tag in article.tags.all %}
                                            <li>
                                                <a class="tag" href="{% routablepageurl page "articles_tagged_as" tag %}">
                                                    {{ tag }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                        {% if not article.tags.all %}
                                            <li>{% blocktrans %}No tags{% endblocktrans %}</li>
                                        {% endif %}
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            {% endfor %}
        </div>

        <aside class="index_extra">
            <div class="tags">
                <div class="tags_label">
                    {% blocktrans %}Tags{% endblocktrans %}:
                </div>
                <ul>
                    {% for tag in page.all_articles_tags %}
                        <li>
                            <a class="tag" href="{% routablepageurl page "articles_tagged_as" tag %}">
                                {{ tag }}
                            </a>
                        </li>
                    {% endfor %}
                    {% if not page.all_articles_tags %}
                        <li>{% blocktrans %}No tags{% endblocktrans %}</li>
                    {% endif %}
                </ul>
            </div>
            <div class="feeds">
                <div class="feeds_label">
                    <a href="{% routablepageurl page "feed" %}">
                        <span>
                            <i class="fa fa-rss-square" aria-hidden="true"></i>
                        </span>
                        <span>                        
                            {% blocktrans %}RSS Feed{% endblocktrans %}
                            {% blocktrans %}of{% endblocktrans %} {{ page.title }}
                        </span>
                    </a>
                </div>
            </div>
        </aside>

    </div>
    
    <div class="index_footer">
        {% if articles.paginator.num_pages > 1 %}
            <ul class="card pagination">
                
                {% if articles.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ articles.previous_page_number }}">
                            &lt; {% blocktrans %}Previous{% endblocktrans %}
                        </a>
                    </li>
                {% endif %}

                {% for page_num in articles.paginator.page_range %}
                    <li class="page-item {% if page_num == articles.number %}active{% endif %}">
                        <a class="page-link" href="?page={{ page_num }}">
                            {{ page_num }}
                        </a>
                    </li>
                {% endfor %}

                {% if articles.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ articles.next_page_number }}">
                            {% blocktrans %}Next{% endblocktrans %} &gt;
                        </a>
                    </li>
                {% endif %}
            </ul>
        {% endif %}
    </div>

{% endblock %}
