{namespace bk2k = BK2K\BootstrapPackage\ViewHelpers}
<f:switch expression="{data.section_frame}">
  <f:case value="100"><f:variable name="sectionClass" value="frame-no-margin" /></f:case>
  <f:case value="101"><f:variable name="sectionClass" value="frame-no-margin-top" /></f:case>
  <f:case value="102"><f:variable name="sectionClass" value="frame-no-margin-bottom" /></f:case>
  <f:defaultCase><f:variable name="sectionClass" value="" /></f:defaultCase>
</f:switch>

<div class="trombinoscopeExterne trombinoscope frame default {sectionClass} {data.tx_mask_trombinoscope_type}">
  <div class="panel list-group">
    <f:if condition="{data.header}">
      <f:if condition="{data.tx_mask_trombinoscope_header_layout}">
        <f:then>
          <f:switch expression="{data.tx_mask_trombinoscope_header_layout}">
            <f:case value="2">
              <h2><f:format.nl2br>{data.header}</f:format.nl2br></h2>
            </f:case>
            <f:case value="3">
              <h3><f:format.nl2br>{data.header}</f:format.nl2br></h3>
            </f:case>
            <f:case value="4">
              <h4><f:format.nl2br>{data.header}</f:format.nl2br></h4>
            </f:case>
          </f:switch>
        </f:then>
        <f:else>
          <h2><f:format.nl2br>{data.header}</f:format.nl2br></h2>
        </f:else>
      </f:if>
    </f:if>
    <f:if condition="{data.tx_mask_trombinoscope_externe_repeater}">
      <f:for each="{data.tx_mask_trombinoscope_externe_repeater}" as="data_item">
        <div class="list-group-item">
          <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_picture}">
            <f:then>
              <f:for each="{data_item.tx_mask_trombinoscope_externe_member_picture}" as="file">
                <div class="media-left pos-rel usr-avatar">
                  <f:image image="{file}" alt="{file.alternative}" title="{file.title}" width="200" class="img-circle img-lg" />
                </div>
              </f:for>
            </f:then>
            <f:else>
              <div class="media-left pos-rel usr-avatar">
                <img class="img-circle img-lg" src="{f:uri.resource(path: 'EXT:wseils/Resources/Public/Images/Annuaire/profil.png')}" alt="Profile Picture" width="200">
              </div>
            </f:else>
          </f:if>
          <div class="media-body">
            <h3 class="mar-no">
              {data_item.tx_mask_trombinoscope_externe_member_prenom}
              <span class="text-uppercase trombinoscope_nom">
                  {data_item.tx_mask_trombinoscope_externe_member_nom}
              </span>
            </h3>
            <p>
              <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_mail}">
                  <span class="trombinoscope_email">
                    {data_item.tx_mask_trombinoscope_externe_member_mail}<br>
                  </span>
              </f:if>
              <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_fonction}">
              <span class="trombinoscope_fonction">
                Fonction : <span class="texteGris">{data_item.tx_mask_trombinoscope_externe_member_fonction}</span>
                <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_localisation} || {data_item.tx_mask_trombinoscope_externe_member_telephone} || {data_item.tx_mask_trombinoscope_externe_member_mobile}">
                  &nbsp;|&nbsp;
                </f:if>
              </span>
              </f:if>
              <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_localisation} || {data_item.tx_mask_trombinoscope_externe_member_telephone} || {data_item.tx_mask_trombinoscope_externe_member_mobile}">
                  <span class="trombinoscope_site_tel">
              </f:if>
              <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_localisation}">
                Site :&nbsp;<span>{data_item.tx_mask_trombinoscope_externe_member_localisation}</span>
              </f:if>
              <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_telephone}">
                Tel : <span>{data_item.tx_mask_trombinoscope_externe_member_telephone}</span>
              </f:if>
              <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_mobile}">
                Mobile : <span>{data_item.tx_mask_trombinoscope_externe_member_mobile}</span>
              </f:if>
              <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_localisation} || {data_item.tx_mask_trombinoscope_externe_member_telephone} || {data_item.tx_mask_trombinoscope_externe_member_mobile}">
                </span>
              </f:if>
              <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_organisme}">
                <span class="trombinoscope_bureau">
                  <f:if condition="{data_item.tx_mask_trombinoscope_externe_member_fonction} || {data_item.tx_mask_trombinoscope_externe_member_localisation} || {data_item.tx_mask_trombinoscope_externe_member_telephone} || {data_item.tx_mask_trombinoscope_externe_member_mobile}">
                    &nbsp;|&nbsp;
                  </f:if>
                  Org : {data_item.tx_mask_trombinoscope_externe_member_organisme}
                </span>
              </f:if>
            </p>
          </div>
        </div>
      </f:for>
    </f:if>
  </div>
</div>