{namespace ttaddr=FriendsOfTYPO3\TtAddress\ViewHelpers}

<f:section name="address">
    <ul class="infos">
        <f:if condition="{address.email}">
            <li>
                <svg id="contact-mail" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><rect id="ICONS_ALL_contact-mail_background" data-name="ICONS/ALL/contact-mail background" width="24" height="24" fill="none"></rect><path id="mail" d="M2.356,13.164A2.37,2.37,0,0,1,0,10.786V2.378A2.37,2.37,0,0,1,2.356,0h10.27a2.37,2.37,0,0,1,2.356,2.378v8.407a2.37,2.37,0,0,1-2.356,2.378ZM.8,2.378v8.407a1.569,1.569,0,0,0,1.556,1.578h10.27a1.569,1.569,0,0,0,1.556-1.578V2.378a1.586,1.586,0,0,0-.217-.8L7.758,7.127a.4.4,0,0,1-.5.029l-.036-.029L1.017,1.574A1.586,1.586,0,0,0,.8,2.378ZM7.491,6.292,13.4,1.008A1.529,1.529,0,0,0,12.626.8H2.356a1.53,1.53,0,0,0-.772.208Z" transform="translate(4.691 5.418)" fill="#000"></path></svg>
                <span><f:link.email email="{address.email}" /></span>
            </li>
        </f:if> 
        <f:if condition="{address.phone}">
            <li>
                <svg id="contact-telephone" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <rect id="ICONS_ALL_contact-telephone_background" data-name="ICONS/ALL/contact-telephone background" width="24" height="24" fill="none"/>
                    <path id="Path" d="M12.3,13.891a12.224,12.224,0,0,1-4.788-.967A12.26,12.26,0,0,1,3.6,10.288,12.262,12.262,0,0,1,0,1.59,1.592,1.592,0,0,1,1.59,0H4.14a.4.4,0,0,1,.333.178l1.87,2.805a.4.4,0,0,1-.05.5L4.815,4.966a.4.4,0,0,0-.1.448A7.318,7.318,0,0,0,6.287,7.591,9.442,9.442,0,0,0,8.467,9.147a.368.368,0,0,0,.17.041.441.441,0,0,0,.311-.136L10.4,7.6a.4.4,0,0,1,.5-.05l2.805,1.87a.4.4,0,0,1,.178.333V12.3A1.592,1.592,0,0,1,12.3,13.891ZM1.59.8a.791.791,0,0,0-.79.79,11.514,11.514,0,0,0,11.5,11.5.791.791,0,0,0,.79-.79V9.965l-2.354-1.57L9.514,9.618a1.236,1.236,0,0,1-.877.37,1.162,1.162,0,0,1-.473-.1L8.1,9.858A10.235,10.235,0,0,1,5.734,8.17,8.121,8.121,0,0,1,3.991,5.757,1.186,1.186,0,0,1,4.249,4.4L5.5,3.154,3.926.8Z" transform="translate(5.418 5.418)" fill="#fff"/>
                </svg>      
                <a href="tel:{address.cleanedPhone}">
                    <span itemprop="telephone">{address.phone}</span>
                </a>
            </li>
        </f:if>
        <f:if condition="{address.address}">
            <li class="address">
                <svg id="contact-adresse" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                    <rect id="ICONS_ALL_contact-adresse_background" data-name="ICONS/ALL/contact-adresse background" width="24" height="24" fill="none"/>
                    <path id="Combined_Shape" data-name="Combined Shape" d="M6.182,15.555l-.421-.306-.17-.129-.349-.273A23.318,23.318,0,0,1,3.186,13,14.567,14.567,0,0,1,1.05,10.328,7.25,7.25,0,0,1,.066,7.781,5.127,5.127,0,0,1,0,6.971a6.887,6.887,0,0,1,.548-2.7A7.036,7.036,0,0,1,2.034,2.057,6.95,6.95,0,0,1,4.226.553a6.692,6.692,0,0,1,5.329,0,6.952,6.952,0,0,1,2.192,1.5,7.036,7.036,0,0,1,1.486,2.218,6.887,6.887,0,0,1,.548,2.7,5.089,5.089,0,0,1-.066.809,7.243,7.243,0,0,1-.984,2.548A14.567,14.567,0,0,1,10.6,13a23.319,23.319,0,0,1-2.058,1.845l-.184.145-.338.259-.162.121-.268.192a1.211,1.211,0,0,1-.69.215A1.254,1.254,0,0,1,6.182,15.555ZM.8,6.971a4.32,4.32,0,0,0,.056.682,9.438,9.438,0,0,0,2.9,4.788,22.442,22.442,0,0,0,1.983,1.777l.341.267.159.121.405.3a.442.442,0,0,0,.251.079.4.4,0,0,0,.231-.071l.256-.184.153-.113.329-.252.178-.141a22.481,22.481,0,0,0,1.986-1.779,9.438,9.438,0,0,0,2.9-4.788,4.32,4.32,0,0,0,.056-.682A6.214,6.214,0,0,0,6.891.8,6.214,6.214,0,0,0,.8,6.971Zm3.409,0A2.683,2.683,0,1,1,6.891,9.683,2.7,2.7,0,0,1,4.208,6.972Zm.8,0A1.883,1.883,0,1,0,6.891,5.06,1.9,1.9,0,0,0,5.008,6.972Z" transform="translate(4.776 4.109)" fill="#fff"/>
                </svg>
                <address>
                    <span itemprop="streetAddress">{address.address} </span>
                    
                    <f:if condition="{address.cities}">
                        <f:for each="{address.cities}" as="addressCity">    
                            <span itemprop="postalCode">{addressCity.zip} </span><span itemprop="addressLocality">{addressCity.title}</span>
                        </f:for>
                    </f:if>
                    <f:if condition="{address.cedex}">
                        <span>{address.cedex}</span>
                    </f:if>
                </address>    
            </li>
        </f:if>
        <f:if condition="{address.linkmap}">
            <li class="linkmap">
                <f:link.typolink parameter="{address.linkmap}" class="btn btn-dark link-external">
                    Je m'y rends
                </f:link.typolink>
            </li>
        </f:if>
    </ul>
</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">
        <f:if condition="{address.phone}">
            <li>
                <i class="fas fa-phone"></i>
                {f:translate(key:'label.telephone')}: <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>
                {f:translate(key:'label.mobile')}: <a href="tel:{address.cleanedMobile}">
                <span itemprop="telephone">{address.mobile}</span>
            </a>
            </li>
        </f:if>

        <f:if condition="{address.email}">
            <li>
                <i class="fas fa-envelope"></i>
                {f:translate(key:'label.email')}:
                <span><f:link.email email="{address.email}" /></span>
            </li>
        </f:if>

        
        <f:if condition="{address.birthday}">
            <meta itemprop="birthDate" content="{address.birthday -> f:format.date(format:'%Y-%m-%d')}">
            <li>
                <i class="fas fa-birthday-cake"></i>
                {f:translate(key:'label.birthday')}: {address.birthday -> f:format.date(format:'%d.%m.%Y')}
            </li>
        </f:if>
    </ul>
</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>