{namespace v=FluidTYPO3\Vhs\ViewHelpers}
{namespace ot=Opentalent\OtTemplating\ViewHelpers}

<f:comment><!-- Special layout for the Members page --></f:comment>
<f:layout name="Members" />

<section class="t-container st-effect-3">
    <div class="wrapper">
        <f:comment><!-- Render the header defined in partial/header.html--></f:comment>
        <f:render partial="Modern/Header" arguments="{_all}" />

        <section class="page-section-ptb data-table mb-50 mt-50">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12 col-md-12">
                        <h1 class="text-center">Liste des adhérents</h1>

                        <ot:members.getAll as="members"
                                           organizationId="{settings.organizationId}">

                            <f:if condition="{members -> f:count()} > 0">
                                <f:then>
                                    <f:for each="{members}" as="member" iteration="i">

                                        <f:if condition="{i.index -> v:math.modulo(b: 4)}===0">
                                            <if condition="i>1">
                                        </div>
                                            </div>
                                            </if>

                                        <div class="team-3 mb-50 mt-70">
                                            <div class="row">
                                        </f:if>

                                                <div class="col-lg-3 col-sm-6 sm-mb-30">
                                                    <div class="team team-round full-border">
                                                        <div class="team-photo">
                                                            <f:if condition="{member.image}">
                                                                <f:then>
                                                                    <img class="img-fluid mx-auto"
                                                                         src="{member.image}/160x0"
                                                                         alt="{member.fullName}"/>
                                                                </f:then>
                                                                <f:else>
                                                                    <f:image class="img-fluid mx-auto"
                                                                             src="EXT:ot_templating/Resources/Public/media/unknown_user.jpg"
                                                                             alt="{member.fullName}"/>
                                                                </f:else>
                                                            </f:if>
                                                        </div>

                                                        <div class="team-description">
                                                            <div class="team-info">
                                                                <h5><a href="team-single.html">{member.fullName}</a></h5>
                                                                <span>{f:translate(key: member.instrument)}</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                        <f:if condition="{i.index} === {total}">
                                            </div>
                                        </div>
                                        </f:if>

                                    </f:for>
                                </f:then>
                                <f:else>
                                    <h5>Aucun adhérent</h5>
                                </f:else>
                            </f:if>

                        </ot:members.getAll>
                    </div>
                </div>
            </div>
        </section>

        <f:comment><!-- Render the footer defined in partial/footer.html--></f:comment>
        <f:render partial="Modern/Footer" />
    </div>
</section>