<div class="bg-grey-180">
  <ul class="candidate-secondary-list pt-14 pb-16">
    <div class="container--wide">
      <h2 class="head-7xl mb-3">{{ heading }}</h2>
    </div>

    {% for candidate in candidates %}
      <li class="candidate-secondary-box container--wide">
        <a
          href="{{ candidate.url }}"
          class="
            py-2 flex gap-6 items-center underline-offset-2
          "
        >
          <div class="font-bold text-xl w-8">
            {{ candidate.number }}
          </div>

          <div
            class="
              flex font-bold justify-center items-center rounded-full
            "
          >
            <img
              class="w-12 object-cover"
              src="{{ candidate.image_source }}"
            >
          </div>

          <h4
            class="text-xl font-bold w-64"
          >{{ candidate.name }}</h4>

          {% if candidate.position %}
            <p class="ml-6">
              {{ candidate.position }}
            </p>
          {% endif %}

          {% if candidate.party_membership %}
            <div class="ml-auto font-bold flex items-center gap-1">
              {% if candidate.party_membership == "Pirátská strana" %}
                <img
                  class="w-8"
                  src="../../../../../static/images/logo-round-black.svg"
                >
              {% endif %}

              {{ candidate.party_membership }}
            </div>
          {% endif %}
        </a>
      </li>
    {% endfor %}
  </ul>
</div>
