{% load betty humanize ads static content %}

<div class="sc-hero">
  <figure class="hero-img">
    {% cropped special_coverage.image %}
  </figure>
  <div class="sc-label">Special Coverage</div>
  <div class="billboard">
    <h1>{{ special_coverage.name }}</h1>
    {% if special_coverage.description %}
      <p>{{ special_coverage.description }}</p>
    {% endif %}
    {% if special_coverage.tunic_campaign_id %}
      {% comment %}
        TODO bulbs-elements dependency should be explicitly set by this repo.
        At this point, we are pushing this responsibility downstream.
      {% endcomment %}
      <campaign-display
        data-track-category="Special Coverage Landing"
        data-track-action="Sponsor Logo"
        placement="detail"
        preamble-text="Presented by"
        src="{% content_tunic_campaign_url special_coverage.tunic_campaign_id %}">
      </campaign-display>
    {% endif %}
  </div>
</div>

<ul class="sc-grid two-up">
  {% for content in content_list  %}
    <li class="sc-item {% if forloop.counter|divisibleby:"5" %}large{% endif %}">
      <a href="{{ content.get_absolute_url }}">
        <figure class="thumb">
          {% cropped content.thumbnail %}
        </figure>
        <div class="meta">
          <span class="feature-type">{{ content.feature_type }}</span>
          <h2>{{ content.title }}</h2>
          <span class="pub">{{ content.published|naturalday|capfirst }}</span>
        </div>
      </a>
    </li>
    {% if forloop.counter == 4 %}
      {% dfp_ad "special-coverage-square" %}
    {% endif %}
  {% endfor %}
</ul>
