{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">

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

                <div class="structure-col">
                    <div id="structure-map-wrapper">
                        <div id="structure-map">
                            <f:for each="{structuresCollection.members}" as="structure" iteration="it">
                                <f:if condition="{structure.longitude}">
                                    <i class="item-geodata" style="display: none;"
                                       data-id="{structure.id}"
                                       data-long="{structure.longitude}"
                                       data-lat="{structure.latitude}"
                                       data-label="<b>{structure.name}</b><br/>{structure.streetAdress}<br/>{structure.postalCode} {structure.addressCity}">
                                    </i>
                                </f:if>
                            </f:for>
                        </div>
                    </div>
                    <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">
                    <h2><f:translate key="member-companies"/></h2>

                    <div class="structure-search">
                        <form>
                            <input type="text"
                                   name="search-loc"
                                   placeholder="{f:translate(key: 'where')}?"
                                   value="{ot:request.getArgument(argument: 'search-loc')}"/>

                            <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">

                            <button name="search-submit"><f:translate key="find"/></button>
                        </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">
                            <div class="structure" data-id="{structure.id}">
                                <div class="structure-preview">

                                    <div class="structure-poster">
                                        <f:if condition="{structure.logo}">
                                            <f:then>
                                                <img src='{structure.logo}' 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-summary">
                                        <span class="structure-name">
                                            {structure.name}
                                        </span>
                                        <span class="structure-adress">
                                            {structure.streetAdress}<br/>
                                            {structure.postalCode} {structure.addressCity}
                                        </span>
                                    </div>
                                </div>

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

                        <f:render partial="Classic/Pagination" arguments="{collection: structuresCollection}"/>


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

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

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