{namespace ttaddr=FriendsOfTYPO3\TtAddress\ViewHelpers}

<f:section name="address">
  <f:if condition="{address.address}">
    <div class="address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
      <address>
        <span itemprop="streetAddress">{address.address}</span><br>
        <span itemprop="postalCode">{address.zip}</span>&nbsp;<span
          itemprop="addressLocality">{address.city}</span><br>
        <span itemprop="addressCountry">{address.country}</span>
      </address>
    </div>
  </f:if>
</f:section>

<f:section name="position">
  <f:if condition="{address.position}">
    <p class="jobTitle" itemprop="jobTitle"><em>{address.position}</em></p>
  </f:if>
</f:section>

<f:section name="contact">
  <ul class="list-unstyled mb-3 text-break">
    <f:if condition="{address.phone}">
      <li>
        <i class="fas fa-phone"></i>
        <a href="tel:{address.cleanedPhone}">
          <span itemprop="telephone">{address.phone}</span>
        </a>
      </li>
    </f:if>

    <f:if condition="{address.mobile}">
      <li>
        <i class="fas fa-mobile-alt"></i>
        <a href="tel:{address.cleanedMobile}">
          <span itemprop="telephone">{address.mobile}</span>
        </a>
      </li>
    </f:if>

    <f:if condition="{address.fax}">
      <li>
        <i class="fas fa-fax"></i>
        <span itemprop="faxNumber">{address.fax}</span>
      </li>
    </f:if>

    <f:if condition="{address.email}">
      <li>
        <i class="fas fa-envelope"></i>
        <span><f:link.email email="{address.email}" /></span>
      </li>
    </f:if>
  </ul>
  <f:if condition="{address.www}">
      <meta itemprop="url" content="{f:uri.typolink(parameter:address.www)}"/>
      <f:link.typolink parameter="{address.www}" class="btn btn-sm btn-dark">Voir le site web</f:link.typolink>
    </f:if>
</f:section>

<f:section name="social">
    <f:if condition="{address.skype} || {address.twitter} || {address.facebook} || {address.linkedin}">
        <ul class="list-inline">
            <f:if condition="{address.skype}">
                <li class="list-inline-item">
                    <i class="fab fa-skype" aria-hidden title="{f:translate(key:'label.skype')}"></i>
                    <span class="sr-only">{f:translate(key:'label.skype')}:</span>
                    <a href="skype:{address.skype}?call">{address.skype}</a>
                    <meta itemprop="sameAs" content="skype:{address.skype}?call"/>
                </li>
            </f:if>
            <f:if condition="{address.twitter}">
                <li class="list-inline-item">
                    <i class="fab fa-twitter" aria-hidden title="{f:translate(key:'label.twitter')}"></i>
                    <span class="sr-only">{f:translate(key:'label.twitter')}:</span>
                    <a href="https://twitter.com/{address.twitter}" target="_blank">{address.twitter}</a>
                    <meta itemprop="sameAs" content="https://twitter.com/{address.twitter}"/>
                </li>
            </f:if>
            <f:if condition="{address.facebook}">
                <li class="list-inline-item">
                    <i class="fab fa-facebook" aria-hidden title="{f:translate(key:'label.facebook')}"></i>
                    <span class="sr-only">{f:translate(key:'label.facebook')}:</span>
                    <a href="https://www.facebook.com/{address.facebook}" target="_blank">{address.facebook}</a>
                    <meta itemprop="sameAs" content="https://www.facebook.com/{address.facebook}"/>
                </li>
            </f:if>
            <f:if condition="{address.linkedin}">
                <li class="list-inline-item">
                    <i class="fab fa-linkedin" aria-hidden title="{f:translate(key:'label.linkedin')}"></i>
                    <span class="sr-only">{f:translate(key:'label.linkedin')}:</span>
                    <a href="https://www.linkedin.com/in/{address.linkedin}" target="_blank">{address.linkedin}</a>
                    <meta itemprop="sameAs" content="https://www.linkedin.com/in/{address.linkedin}"/>
                </li>
            </f:if>
        </ul>
    </f:if>
</f:section>