{% load indieweb_tags %}
<div class="h-card{% if extra_classes %} {{ extra_classes }}{% endif %}">
  {% if h_card.photo %}
    {% for photo in h_card.photo %}
      {% if photo.value %}
        {% with safe_photo=photo.value|h_card_safe_url %}
          {% if safe_photo %}
            <img class="u-photo" src="{{ safe_photo }}" alt="{{ photo.alt|default:profile.name|default:user.username }}" referrerpolicy="no-referrer">
          {% endif %}
        {% endwith %}
      {% else %}
        {% with safe_photo=photo|h_card_safe_url %}
          {% if safe_photo %}
            <img class="u-photo" src="{{ safe_photo }}" alt="{{ profile.name|default:user.username }}" referrerpolicy="no-referrer">
          {% endif %}
        {% endwith %}
      {% endif %}
    {% endfor %}
  {% elif profile and profile.photo_url %}
    {% with safe_photo=profile.photo_url|h_card_safe_url %}
      {% if safe_photo %}
        <img class="u-photo" src="{{ safe_photo }}" alt="{{ profile.name|default:user.username }}" referrerpolicy="no-referrer">
      {% endif %}
    {% endwith %}
  {% endif %}

  <div class="p-name">
    {{ profile.name|default:user.username }}
  </div>

  {% if h_card.url %}
    {% for safe_url in h_card.url|h_card_safe_urls %}
      {% if forloop.first %}
        <a class="u-url" href="{{ safe_url }}" rel="me noopener" referrerpolicy="no-referrer">Profile</a>
      {% else %}
        <a class="u-url" href="{{ safe_url }}" rel="nofollow noopener" referrerpolicy="no-referrer">{{ safe_url }}</a>
      {% endif %}
    {% endfor %}
  {% elif profile.url %}
    {% with safe_url=profile.url|h_card_safe_url %}
      {% if safe_url %}
        <a class="u-url" href="{{ safe_url }}" rel="me noopener" referrerpolicy="no-referrer">Profile</a>
      {% endif %}
    {% endwith %}
  {% endif %}

  {% if h_card.email %}
    {% for email in h_card.email %}
      <a class="u-email" href="mailto:{{ email|urlencode }}">{{ email }}</a>
    {% endfor %}
  {% endif %}

  {% if h_card.tel %}
    {% for tel in h_card.tel %}
      <span class="p-tel">{{ tel }}</span>
    {% endfor %}
  {% endif %}

  {% if h_card.note %}
    {% for note in h_card.note %}
      <p class="p-note">{{ note }}</p>
    {% endfor %}
  {% endif %}

  {% if h_card.adr %}
    {% for adr in h_card.adr %}
      <div class="p-adr h-adr">
        {% if adr.locality %}<span class="p-locality">{{ adr.locality }}</span>{% endif %}
        {% if adr.region %}<span class="p-region">{{ adr.region }}</span>{% endif %}
        {% if adr.country_name %}<span class="p-country-name">{{ adr.country_name }}</span>{% endif %}
      </div>
    {% endfor %}
  {% endif %}

  {% if h_card.org %}
    {% for org in h_card.org %}
      <div class="p-org h-card">
        {% if org.name %}<span class="p-name">{{ org.name }}</span>{% endif %}
        {% if org.url %}
          {% with safe_org_url=org.url|h_card_safe_url %}
            {% if safe_org_url %}<a class="u-url" href="{{ safe_org_url }}" rel="nofollow noopener ugc" referrerpolicy="no-referrer">{{ safe_org_url }}</a>{% endif %}
          {% endwith %}
        {% endif %}
      </div>
    {% endfor %}
  {% endif %}
</div>