{namespace ttaddr=FriendsOfTYPO3\TtAddress\ViewHelpers}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
      xmlns:sms="http://typo3.org/ns/SMS/SmsResponsiveImages/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:section name="firstImage">
    <f:if condition="{address.image}">
        <f:then>
            <div class="contact-img">
                <sms:image image="{address.firstImage}" srcset="2x" width="100" alt="{img.originalResource.alt}" title="{address.title} {address.firstName} {address.middleName} {address.lastName}"/>
            </div>
        </f:then>
        <f:else>
            <div class="contact-img contact-img--placeholder">
                <f:if condition="{address.gender}=='f'">
                    <f:then>
                        <f:image src="fileadmin/icons/avatar-female.svg" width="100" alt=""/>
                    </f:then>
                    <f:else>
                        <f:image src="fileadmin/icons/avatar-male.svg" width="100" alt=""/>
                    </f:else>
                </f:if>
            </div>
        </f:else>
    </f:if>
</f:section>

<f:section name="address">
    <f:if condition="{address.address}">
        <div class="contact-address" itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
            <address>
                <span itemprop="name">{address.building}</span><br>
                <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}">
        <div class="contact-position" itemprop="jobTitle"><em>{address.position}</em></div>
    </f:if>
</f:section>


<f:section name="contact">
    <div class="contact-channels contact-channels--classic">
        <f:if condition="{address.phone}">
            <div class="contact-phone">
                <i class="icon icon-phone"></i>

                <a href="tel:{address.phone->ttaddr:removeSpaces()}"> <span itemprop="telephone">{address.phone}</span> </a>
            </div>
        </f:if>
        <f:if condition="{address.mobile}">
            <div class="contact-mobile">
                {f:translate(key:'label.mobile')}:

                <a href="tel:{address.mobile->ttaddr:removeSpaces()}"> <span itemprop="telephone">{address.mobile}</span> </a>
            </div>
        </f:if>
        <f:if condition="{address.fax}">
            <div class="contact-fax">
                {f:translate(key:'label.fax')}:

                <span itemprop="faxNumber">{address.fax}</span>
            </div>
        </f:if>
        <f:if condition="{address.email}">
            <div class="contact-email">
                <i class="icon icon-mail_outline"></i>

                <f:link.email email="{address.email}"
                              class="contact-email"
                              additionalAttributes="{data-toggle: 'tooltip', data-html: 'true'}"
                              title="<span class='contact-email-tooltip'>{address.email}</span>">E-Mail schreiben
                </f:link.email>


            </div>
        </f:if>
        <f:if condition="{address.www}">
            <div class="contact-www">
                {f:translate(key:'label.www')}:

                <meta itemprop="url" content="{f:uri.typolink(parameter:address.www)}"/>
                <f:link.typolink parameter="{address.www}">{address.www}</f:link.typolink>
            </div>
        </f:if>
        <f:if condition="{address.birthday}">
            <div class="contact-birthday">
                {f:translate(key:'label.birthday')}:

                {address.birthday -> f:format.date(format:'%d.%m.%Y')}
                <meta itemprop="birthDate" content="{address.birthday -> f:format.date(format:'%Y-%m-%d')}">
            </div>
        </f:if>
    </div>
</f:section>
<f:section name="social">
    <f:if condition="{address.skype} || {address.twitter} || {address.facebook} || {address.linkedin}">
        <dl class="contact-channels contact-channels--social">
            <f:if condition="{address.skype}">
                <div class="contact-skype">
                    {f:translate(key:'label.skype')}:

                    <a href="skype:{address.skype}?call">{address.skype}</a>
                    <meta itemprop="sameAs" content="skype:{address.skype}?call"/>
                </div>
            </f:if>
            <f:if condition="{address.twitter}">
                <div class="contact-twitter">
                    {f:translate(key:'label.twitter')}:

                    <meta itemprop="sameAs" content="https://twitter.com/{address.twitter}"/>
                    <a href="https://twitter.com/{address.twitter}" target="_blank">{address.twitter}</a>
                </div>
            </f:if>
            <f:if condition="{address.facebook}">
                <div class="contact facebook">
                    {f:translate(key:'label.facebook')}:

                    <meta itemprop="sameAs" content="https://www.facebook.com/{address.facebook}"/>
                    <a href="https://www.facebook.com/{address.facebook}" target="_blank">{address.facebook}</a>
                </div>
            </f:if>
            <f:if condition="{address.linkedin}">
                <div class="contact-linkedin">
                    {f:translate(key:'label.linkedin')}:

                    <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}"/>
                </div>
            </f:if>
        </dl>
    </f:if>
</f:section>
