{#
  Media Coverage Hub
  All content comes from the page editor. Nothing is pre-populated.
#}

{% set cat_labels = {
  "article": "Article",
  "podcast": "Podcast",
  "tv": "TV appearance",
  "radio": "Radio",
  "video": "Video",
  "press": "Press release"
} %}

{% set cta_labels = {
  "article": "Read article",
  "podcast": "Listen to episode",
  "tv": "Watch segment",
  "radio": "Listen to segment",
  "video": "Watch video",
  "press": "Read release"
} %}

{% macro icon(cat) %}
  {% if cat == "podcast" %}
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3M8.5 21h7"/></svg>
  {% elif cat == "tv" %}
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="5" width="18" height="12" rx="2"/><path d="M8 21h8M12 17v4"/></svg>
  {% elif cat == "radio" %}
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="2"/><path d="M8.5 8.5a5 5 0 0 0 0 7M15.5 8.5a5 5 0 0 1 0 7M5.6 5.6a9 9 0 0 0 0 12.8M18.4 5.6a9 9 0 0 1 0 12.8"/></svg>
  {% elif cat == "video" %}
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="12" r="9"/><path d="M10 8.5v7l6-3.5z"/></svg>
  {% elif cat == "press" %}
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 9v6h3l6 4V5L7 9zM17 9a4 4 0 0 1 0 6"/></svg>
  {% else %}
    <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M6 3h9l4 4v14H6z"/><path d="M15 3v4h4M9 12h7M9 16h7"/></svg>
  {% endif %}
{% endmacro %}

{# Only items with at least a title or a link are rendered #}
{% set items = [] %}
{% set used_cats = [] %}
{% for item in module.media_items %}
  {% if item.title or item.link.url.href %}
    {% do items.append(item) %}
    {% if item.category and item.category not in used_cats %}
      {% do used_cats.append(item.category) %}
    {% endif %}
  {% endif %}
{% endfor %}

<section class="mh{% if module.feature_latest %} mh--has-featured{% endif %}"
         data-mh
         data-page-size="">

  {% if items|length %}

    {% if used_cats|length > 1 %}
    <div class="mh__filters" role="group" aria-label="Filter by media type" data-mh-filters hidden>
      <button type="button" class="mh__filter" data-mh-filter="all" aria-pressed="true">All</button>
      {% for cat in used_cats %}
      <button type="button" class="mh__filter" data-mh-filter="" aria-pressed="false">
        <span class="mh__filter-icon"></span>
      </button>
      {% endfor %}
    </div>
    {% endif %}

    <div class="mh__grid">
      {% for item in items %}
        {% set href = item.link.url.href %}
        {% set cat = item.category %}
        <article class="mh-card{% if loop.first and module.feature_latest %} mh-card--featured{% endif %}"
                 data-category="">

          <div class="mh-card__media">
            {% if item.image.src %}
              <img src=""
                   alt=""
                   loading=""
                   {% if item.image.width %}width="" height=""{% endif %}>
            {% else %}
              <div class="mh-card__placeholder"></div>
            {% endif %}

            {% if cat %}
              <span class="mh-badge mh-badge--">
                <span class="mh-badge__icon"></span>
              </span>
            {% endif %}
          </div>

          <div class="mh-card__body">
            {% if item.title %}
              <h3 class="mh-card__title">
                {% if href %}
                  <a class="mh-card__link" href=""
                     {% if item.link.open_in_new_tab %}target="_blank"{% endif %}
                     rel="noopener{% if item.link.no_follow %} nofollow{% endif %}"></a>
                {% else %}
                  
                {% endif %}
              </h3>
            {% endif %}

            {% if item.summary %}
              <p class="mh-card__summary"></p>
            {% endif %}

            {% if href %}
              {% if item.title %}
                <span class="mh-card__cta" aria-hidden="true">
              {% else %}
                <a class="mh-card__cta mh-card__link" href=""
                   {% if item.link.open_in_new_tab %}target="_blank"{% endif %}
                   rel="noopener{% if item.link.no_follow %} nofollow{% endif %}">
              {% endif %}
                  
                  <svg class="mh-card__arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
              {% if item.title %}</span>{% else %}</a>{% endif %}
            {% endif %}
          </div>
        </article>
      {% endfor %}
    </div>

    <p class="mh__sr" aria-live="polite" data-mh-status></p>

    <div class="mh__more-wrap">
      <button type="button" class="mh__more" data-mh-more hidden>Show more coverage</button>
    </div>

  {% endif %}


</section>