full_candidate_snippet.html

{% load static wagtailimages_tags %}

<div class="candidate-card container-padding--zero sm:container-padding--auto ">
  <div
    class="candidate-card__wrapper candidate-card__wrapper sm:candidate-card-list__item-wrapper md:candidate-card-list__item-wrapper--border"
  >
    <div class="card candidate-card__body elevation-0 hover:elevation-10 transition duration-200">
      <div class="candidate-card__avatar">
        <div class="candidate-card__position">
          {{ forloop.counter }}
        </div>
        <a href="{{ person_page.url }}" class="avatar avatar--sm sm:avatar--lg">
          {% if person_page.profile_photo %}
            {# Match sizing of person page to keep the image version count low #}
            {% image person_page.profile_photo fill-416x416 as profile_img %}
            <img src="{{ profile_img.url }}" alt="{{ person_page.title }}"/>
          {% else %}
            <img src="{% static "shared/img/unknown_pirate_416x416.jpg" %}" alt="{{ person_page.title }}"/>
          {% endif %}
        </a>
      </div>
      <div class="candidate-card__bio">
        <h1 class="head-heavy-xs">
          <a href="{{ person_page.url }}">
            {{ person_page.title }}
          </a>
        </h1>
        {% if person_page.email and person_page.show_email %}
          <a href="mailto:{{ person_page.email }}" class="block candidate-card__bio-item mb-4">
            {{ person_page.email }}
          </a>
        {% endif %}
        {% if person_page.job %}
          <h2 class="candidate-card__bio-item">
            {{ person_page.job }}
          </h2>
        {% endif %}
        {% if person_page.city %}
          <h2 class="head-allcaps-4xs mt-4">
            {{ person_page.city }}
          </h2>
        {% endif %}
      </div>
      <div class="candidate-card__affiliation">
        {% if person_page.age %}<div>{{ person_page.age }} let</div>{% endif %}
        <div class="flex items-center">
          {% if person_page.is_pirate %}
            <div class="avatar w-6 mr-2">
              <img src="{% static "shared/img/logo_black.svg" %}" alt="Pirátská strana">
            </div>
            <span class="font-bold font-condensed">Pirátská strana</span>
          {% endif %}

          {% if not person_page.is_pirate and person_page.other_party %}
            {% if person_page.other_party_logo %}
              {% image person_page.other_party_logo width-48 as logo_img %}
              <div class="avatar w-6 mr-2">
                <img src="{{ logo_img.url }}" alt="{{ person_page.other_party }}">
              </div>
            {% endif %}

            <span class="font-bold font-condensed">{{ person_page.other_party }}</span>
          {% endif %}
        </div>
      </div>
      <div class="card__body candidate-card__social">
        <div class="social-icon-group space-x-2">
          {% if person_page.facebook_url %}
            <a href="{{ person_page.facebook_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
              <i class="ico--facebook"></i>
            </a>
          {% endif %}
          {% if person_page.instagram_url %}
            <a href="{{ person_page.instagram_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
              <i class="ico--instagram"></i></a>
          {% endif %}
          {% if person_page.twitter_url %}
            <a href="{{ person_page.twitter_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
              <i class="ico--twitter"></i>
            </a>
          {% endif %}
          {% if person_page.youtube_url %}
            <a href="{{ person_page.youtube_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
              <i class="ico--youtube"></i>
            </a>
          {% endif %}
          {% if person_page.flickr_url %}
            <a href="{{ person_page.flickr_url }}" target="_blank" class="social-icon" rel="noreferrer noopener">
              <i class="ico--flickr"></i>
            </a>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</div>