{% load static %}
{% for issue in issues %}
    <div class="col m12 l6 xl4">
        <div class="card horizontal">
            <div class="card-image">
                {% if level == "deep" %}
                    <h3 id="issue-{{ issue.id }}" class="sr-only">{{ issue.display_title }}</h3>
                {% else %}
                    <h2 id="issue-{{ issue.id }}" class="sr-only">{{ issue.display_title }}</h2>
                {% endif %}
                <a href="{% url 'journal_issue' issue.id %}"><img
                        class="issue_image" src="
                        {% if issue.cover_image %}{{ issue.cover_image.url }}{% elif journal.default_cover_image %}{{ journal.default_cover_image.url }}{% else %}{% static "common/img/sample/issue_cover.png" %}{% endif %}"
                        alt="{{ issue.display_title }}"
                        class="img-fluid"></a>
            </div>
            <div class="card-stacked card">
                <div class="card-content">
                    {% if issue.pretty_issue_identifier and issue.issue_title and journal.display_issue_title %}
                        <p>{{ issue.pretty_issue_identifier }}
                            <br/> {{ issue.get_sorted_articles.count }} {% trans "items" %}
                        </p>
                    {% else %}
                        <p> <span aria-label='{{ issue.display_title_a11y }}'>{{ issue.display_title }}</span>
                            <br/> {{ issue.get_sorted_articles.count }} {% trans "items" %}
                        </p>
                    {% endif %}
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">
                        <i aria-hidden="true" class="fa fa-xmark" ></i>
                        <span class="sr-only">{% trans 'Close.' %}</span>
                    </span>
                    <span class="grey-text text-darken-4">{{ issue.issue_title }}</span>
                </div>
                <div class="card-action">
                    <a href="{% url 'journal_issue' issue.id %}"
                        aria-describedby="issue-{{ issue.id }}"
                        >
                        {% trans "View Issue" %}
                    </a>
                    {% if request.user and request.user.is_staff or user_is_editor %}
                        <a href="{% url 'manage_issues_id' issue.pk %}"
                            aria-describedby="issue-{{ issue.id }}"
                            >
                            <i aria-hidden="true" class="fa fa-edit">&nbsp;</i>
                            <span class="sr-only">{% trans "Edit Issue" %}</span>
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% empty %}

{% endfor %}