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


<div class="card-panel">
    <div class="row">
	{% if not journal_settings.article.disable_article_thumbnails %}
        <div class="col m2 hide-on-small-and-down">
            {% 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="responsive-img">
            {% elif request.journal.thumbnail_image %}
                <img src="{% url 'journal_cover_download' %}" class="responsive-img">
            {% else %}
                <img src="{% static 'common/img/icons/article.png' %}" alt="{{ article.title|striptags|escape }}"
                     class="responsive-img">
            {% endif %}
        </div>
	{% endif %}
	<div class="col m{% if not journal_settings.article.disable_article_thumbnails %}10{% else %}12{% endif %} s12">
            {% if article.is_remote %}
                <a href="{{ article.remote_url }}" target="_blank">
                    {% if level == "issuepage" %}
                        <h3 class="article-title">
                            {{ article.title|safe }}
                            {% include "elements/icons/link_external.html" %}
                        </h3>
                    {% elif level == "deep" %}
                        <h4 class="article-title">
                            {{ article.title|safe }}
                            {% include "elements/icons/link_external.html" %}
                        </h4>    
                    {% else %}
                        <h2 class="article-title">
                            {{ article.title|safe }}
                            {% include "elements/icons/link_external.html" %}
                        </h2>
                    {% endif %}
                </a>
            {% else %}
                <a href="{{ article.url }}">
                    {% if level == "issuepage" %}
                        <h3 class="article-title">{{ article.title|safe }}</h3>
                    {% elif level == "deep" %}
                        <h4 class="article-title">{{ article.title|safe }}</h4>    
                    {% else %}
                        <h2 class="article-title">{{ article.title|safe }}</h2>
                    {% endif %}
                </a>
            {% endif %}
            <p>{% for author in article.frozen_authors.all %}{% if forloop.last %}
            {% if article.frozen_authors.all|length > 1 %} {% trans "and" %}
                {% endif %}{% endif %}{{ author.full_name }}{% if not forloop.last %}{% if not forloop.counter == article.frozen_authors.all|length|add:-1 %}, {% endif %}{% endif %}{% endfor %}
            </p>
            <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>

                {% if article.issue %}
                    <i aria-hidden="true" class="fa fa-book"></i>
                    <a class="issue-link" href="{{ article.issue.url }}">
                        <span aria-label='{{ article.issue_title_a11y }}'>{{ article.issue_title }}</span>
                    </a>
                {% endif %}
                {% 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 %}
            </p>
        </div>
    </div>
</div>