{% load static %}
{% load i18n %}
{% load dates %}

<div class="box article">
    <a href="{% if article.is_remote %}{{ article.remote_url }}{% else %}{{ article.url }}{% endif %}"
       class="box-link"
       aria-labelledby="{{ article.id }}-box-details">
    </a>
       <div class="clearfix">
        {% if not journal_settings.article.disable_article_thumbnails %}
         <div class="large-2 columns show-for-large">
            {% if article.thumbnail_image_file %}
            <img src="{% url 'article_file_download' 'id' article.id article.thumbnail_image_file.id %}"
                 alt="{{ article.title|striptags|escape }}" class="article-thumbnail">
            {% elif request.journal.thumbnail_image %}
                <img src="{% url 'journal_cover_download' %}" class="article-thumbnail">
            {% else %}
            <img src="{% static 'common/img/icons/article.png' %}" alt="{{ article.title|striptags|escape }}"
                 class="article-thumbnail"> {% endif %}
        </div>
        {% endif %}
    <div id="{{ article.id }}-box-details" class="{% if not journal_settings.article.disable_article_thumbnails %}large-10{% endif %} columns end">
        {% if article.pinned %}
            <i aria-hidden="true" class="float-right fa fa-thumb-tack"></i>
            <span class="sr-only">{% trans 'Pinned' %}</span>
        {% endif %}

            {% if level == "deep" %}
                <h4>{{ article.title|safe }}
                    {% if article.is_remote %}
                        &nbsp;<i aria-hidden="true" class="fa fa-external-link small-icon-text"></i>
                        <span class="sr-only">, {% trans 'externally hosted article' %}.</span>
                    {% endif %}
                </h4>
            {% elif level == "shallow" %}
                <h3>{{ article.title|safe }}
                    {% if article.is_remote %}
                        &nbsp;<i aria-hidden="true" class="fa fa-external-link small-icon-text"></i>
                        <span class="sr-only">, {% trans 'externally hosted article' %}.</span>
                    {% endif %}
                </h3>
            {% else %}
                <h2>{{ article.title|safe }}
                    {% if article.is_remote %}
                        &nbsp;<i aria-hidden="true" class="fa fa-external-link small-icon-text"></i>
                        <span class="sr-only">, {% trans 'externally hosted article' %}.</span>
                    {% endif %}
                </h2>
            {% endif %}

           {% include "elements/journal/authors_block.html" %}
            <p>
                <span class="date">
                    <i aria-hidden="true" class="fa fa-calendar"></i>
                    <time datetime='{{ article.date_published|date:"Y-m-d" }}'>
                        <span role="time">{{ article.date_published|date_human}}</span>
                    </time>
                </span> 
                <i aria-hidden="true" class="fa fa-book"></i> 
                {% if article.issue.issue_type.code == 'issue' %}
                    <span aria-label='{{ article.issue_title_a11y }}'>{{ article.issue_title }}</span>
                {% else %}  
                    {{ article.issue.issue_title }}
                {% endif %}
            </p>
            {% if article.issues.count > 1 %}
              <p><strong><i aria-hidden="true" class="fa fa-info-circle"></i> {% trans 'Also a part of:'%}</strong></p>
              {% for other in article.issues.all %}
              {% if other != article.issue %}
              <p>
                <i aria-hidden="true" class="fa fa-book"></i>
                <a class="issue-link" href="{{ other.url }}">
                    {{other.issue_type.pretty_name}}: {{ other.display_title }}
                </a>
              </p>
              {% endif %}
              {% endfor %}
            {% endif %}
        </div>
    </div>
</div>