{% load i18n %}

{% if issue.hero_image_url %}
    {% if level == "issuepage" %}
        <h1 class="sr-only">{{ issue.display_title }}</h1>
    {% else %}
        <h2 class="sr-only">{{ issue.display_title }}</h2>
    {% endif %}
    <div class="card">
      <div class="material-banner">
        <img class="activator material-banner-image" src="{{ issue.hero_image_url }}" alt="{{ issue.display_title_a11y }} hero image.">
        <div class="material-banner-heading">
          <div class="carousel-text-wrapper ">
            {{ issue.display_title }}
          </div>
        </div>
      </div>
        {% if issue.issue_description %}
            <div class="card-content">
                {{ issue.issue_description|safe }}
            </div>
        {% endif %}
    </div>
{% else %}
    {% if level == "issuepage" %}
        <h1 aria-label='{{ issue.display_title_a11y }}'>{{ issue.display_title }}</h1>
    {% else %}
        <h2 aria-label='{{ issue.display_title_a11y }}'>{{ issue.display_title }}</h2>
    {% endif %}
    {% if issue.issue_description %}<p>{{ issue.issue_description|safe }}</p>{% endif %}
{% endif %}

{% if issue.journal.display_issue_doi and issue.doi_url %}

<p>
    {% include "elements/doi_display.html" with doi=issue.doi_url title=issue.display_title %}
</p>
{% endif %}

{% include "common/elements/guest_editors.html" with level=level %}
<br/>