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

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

<f:comment><!-- Render the header defined in partial/header.html--></f:comment>
<f:render partial="Classic/Header" arguments="{_all}" />

<div class="main">
    <f:comment><!-- Central column --></f:comment>
    <div class="content">
        <f:comment><!-- All members --></f:comment>
        <div class="ot-structures map-view">

            <ot:organizations.getFederationStructures as="structuresCollection"
                                                      parentId="{settings.organizationId}">

                <div class="structure-col structure-col-map">
                    <ot:organizations.getFederationStructures as="allStructuresCollection"
                                                              parentId="{settings.organizationId}"
                                                              itemsPerPage="all">
                        <div id="structure-map-wrapper">
                            <div id="structure-map"
                                 data-all-structures="{ot:organizations.asGeoMarkersArray(structures:allStructuresCollection.members)}"
                                 data-selected-structures="{ot:organizations.asGeoMarkersArray(structures:structuresCollection.members)}"
                            >
                            </div>
                        </div>
                    </ot:organizations.getFederationStructures>

                    <div id="structure-map-bar">
                        <div class="btn">{f:translate(key: 'click-on-land-to-go-there')}</div>
                        <ul id="overseas-provinces-list">
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/metropole.png" alt="Metropole" data="{map-fit: '51.03,-5.78;41.2,9.70'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/guadeloupe.png" alt="Guadeloupe" data="{map-fit: '16.62,-62.03;15.74,-60.97'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/martinique.png" alt="Martinique" data="{map-fit: '14.95,-61.43;14.28,-60.60'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/mayotte.png" alt="Mayotte" data="{map-fit: '-12.51,44.86;-13.19,45.45'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/la_reunion.png" alt="La Réunion" data="{map-fit: '-20.65,54.92;-21.65,56.15'}"/></li>
                            <li><f:image src="EXT:ot_templating/Resources/Public/media/guyane.png" alt="Guyane" data="{map-fit: '6.24,-54.62;1.87,-50.59'}"/></li>
                        </ul>
                    </div>
                </div>

                <div class="structure-col structure-col-results">
                    <header>
                        <h2><f:translate key="member-companies"/></h2>
                        <a href="#" class="activate-map-view"><f:translate key="map"/></a>
                        <a href="#" class="activate-list-view"><f:translate key="list"/></a>
                    </header>
                    <div class="structure-search">
                        <form>
                            <div class="search-loc-wrapper">
                                <input type="text"
                                       name="search-loc"
                                       value="{ot:request.getArgument(argument: 'search-loc')}"/>
                                <button type="submit" class="search-submit">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>

                            <div class="filters">
                                <select class="search-type">
                                    <option value="-1">Type</option>
                                    <option value="0">Harmonie</option>
                                    <option value="0">Orchestre</option>
                                    <option value="0">Chorale</option>
                                    <option value="0">Ecole de musique</option>
                                </select>
                                <select class="search-province">
                                    <option value="-1">Région</option>
                                    <option value="0">Alsace</option>
                                </select>
                                <select class="search-federation">
                                    <option value="-1">Fédération</option>
                                    <option value="0">CMF</option>
                                </select>
                                <select class="search-distance-max">
                                    <option value="-1">Distance</option>
                                    <option value="0">100</option>
                                </select>

                                <button class="reset-search">Réinitialiser</button>
                            </div>

                            <f:comment><!--
                            Important: if the cache is not disabled,
                             then the results won't be updated even after submitting this form
                             --></f:comment>
                            <input type="hidden" name="no_cache" value="1">
                        </form>
                    </div>

                    <div class="structure-results">
                        <f:if condition="{structuresCollection.totalItems} == 0">
                            <span><f:translate key="no-result"/></span>
                        </f:if>

                        <f:for each="{structuresCollection.members}" as="structure" iteration="it">

                            <div class="structure-card" data-id="{structure.id}">

                                <div class="structure-poster">
                                    <f:if condition="{structure.logoId}">
                                        <f:then>
                                            <img src='{structure.logoId}' alt="poster" />
                                        </f:then>
                                        <f:else>
                                            <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
                                        </f:else>
                                    </f:if>
                                </div>

                                <div class="structure-details">
                                    <f:comment>
                                        <!--                                    <div class="structure-categories">-->
<!--                                        <f:for each="{structure.categories}" as="category">-->
<!--                                            <span class="structure-category">-->
<!--                                                <f:translate key="{category}"/>-->
<!--                                            </span>-->
<!--                                        </f:for>-->
<!--                                    </div>--></f:comment>

                                    <div class="structure-name">
                                        {structure.name}
                                    </div>
                                    <table class="structure-details-table">
                                        <tr class="structure-details-entry structure-address">
                                            <td><i class="fas fa-map-marker-alt"></i></td>
                                            <td>
                                                <f:if condition="{structure.streetAddress}">
                                                    {structure.streetAddress} -
                                                </f:if>
                                                {structure.postalCode} {structure.addressCity}
                                            </td>
                                        </tr>
                                        <tr class="structure-details-entry structure-federation">
                                            <td><i class="fas fa-project-diagram"></i></td>
                                            <td>{structure.parentName}</td>
                                        </tr>
                                    </table>
                                </div>

                                <div class="spacer"></div>

                                <a target="_blank" class="btn structure-see" href="https://{structure.subdomain}.opentalent.fr">
                                    <span><f:translate key="see-more"/></span>
                                    <i class="fa fa-caret-right" style="margin-left: 5px;"></i>
                                </a>
                            </div>
                        </f:for>

                        {ot:pagination(collection: structuresCollection)}

                    </div>
                </div>
            </ot:organizations.getFederationStructures>

        </div>
    </div>
</div>

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