ot_typo3/ot_templating/Resources/Private/Layouts/Classic/StructuresFrame.html

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

<f:comment>
    <!--
    Special layout for the federation members page

    This page is designed to be embedded in an iframe
    -->
</f:comment>
<f:layout name="StructuresFrame" />

<f:render partial="Classic/Assets" />
<f:render partial="Classic/NoScriptWarning"/>

<v:asset.script name="classic-structures"
                path="EXT:ot_templating/Resources/Public/assets/Classic/script/structures.js"
                dependencies="classic-jquery,classic-datepicker,classic-slick,classic-leaflet,classic-main"
                standalone="1"
                defer="1"/>

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

        <f:comment><!-- The data is stored as an attribute, then templated with JS for performance reasons --></f:comment>
        <div class="ot-structures-frame map-view"
             data-organization-id="{settings.organizationId}">

            <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-col structure-col-map">
                <div id="structure-map-wrapper">
                    <div id="structure-map">
                    </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 structure-col-results">
                <div class="structure-search">
                    <form method="get" id="structure-search-form">
                        <div class="structure-search-row">
                            <div class="search-bar-wrapper">
                                <input type="text"
                                       class="search-bar"
                                       name="search-query"
                                       placeholder="{f:translate(key: 'what')}?"/>
                                <button class="search-bar-btn"
                                        name="submit-search"
                                >
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                            <div class="search-bar-wrapper">
                                <input type="text"
                                       name="search-city"
                                       class="search-bar"
                                       placeholder="{f:translate(key: 'where')}?"
                                       autocomplete="off"/>
                                <button class="search-bar-btn"
                                        name="search-localize">
                                    <i class="fas fa-crosshairs"></i>
                                </button>
                                <div class="city-search-dropdown" style="display: none;">
                                    <div class="city-search-loading">
                                        <f:image src="EXT:ot_templating/Resources/Public/media/gear.gif"
                                                 alt="{f:translate(key: 'please-wait')}"/>
                                    </div>
                                    <div class="city-search-no-result"><f:translate key="no-result"/></div>
                                    <div class="city-search-results"></div>
                                </div>
                                <input type="hidden" name="lat" value="{ot:request.getArgument(argument: 'lat')}">
                                <input type="hidden" name="long" value="{ot:request.getArgument(argument: 'long')}">
                            </div>
                        </div>
                        <div class="structure-search-row filters">
                            <select name="search-category">
                                <option value="">Type</option>
                                <option value="1MC">{f:translate(key: '1MC')}</option>
                                <option value="2TH">{f:translate(key: '2TH')}</option>
                                <option value="3DA">{f:translate(key: '3DA')}</option>
                                <option value="5FA">{f:translate(key: '5FA')}</option>
                                <option value="OTAR">{f:translate(key: 'OTAR')}</option>
                                <option value="OTCI">{f:translate(key: 'OTCI')}</option>
                                <option value="6AR">{f:translate(key: '6AR')}</option>
                                <option value="8CI">{f:translate(key: '8CI')}</option>
                                <option value="OTAU">{f:translate(key: 'OTAU')}</option>
                            </select>
                            <select name="search-province">
                                <option value="">Département</option>
                                <f:comment><!-- The leading '_' is used to prevent the '0' from being stripped by fluid --></f:comment>
                                <option value="_01">01 - Ain</option><option value="_02">02 - Aisne</option><option value="_03">03 - Allier</option><option value="_04">04 - Alpes-de-Haute-Provence</option><option value="_05">05 - Hautes-Alpes</option><option value="_06">06 - Alpes-Maritimes</option><option value="_07">07 - Ardèche</option><option value="_08">08 - Ardennes</option><option value="_09">09 - Ariège</option><option value="10">10 - Aube</option><option value="11">11 - Aude</option><option value="12">12 - Aveyron</option><option value="13">13 - Bouches-du-Rhône</option><option value="14">14 - Calvados</option><option value="15">15 - Cantal</option><option value="16">16 - Charente</option><option value="17">17 - Charente-Maritime</option><option value="18">18 - Cher</option><option value="19">19 - Corrèze</option><option value="21">21 - Côte-d'Or</option><option value="22">22 - Côtes-d'Armor</option><option value="23">23 - Creuse</option><option value="24">24 - Dordogne</option><option value="25">25 - Doubs</option><option value="26">26 - Drôme</option><option value="27">27 - Eure</option><option value="28">28 - Eure-et-Loir</option><option value="29">29 - Finistère</option><option value="2A">2A - Corse-du-Sud</option><option value="2B">2B - Haute-Corse</option><option value="30">30 - Gard</option><option value="31">31 - Haute-Garonne</option><option value="32">32 - Gers</option><option value="33">33 - Gironde</option><option value="34">34 - Hérault</option><option value="35">35 - Ille-et-Vilaine</option><option value="36">36 - Indre</option><option value="37">37 - Indre-et-Loire</option><option value="38">38 - Isère</option><option value="39">39 - Jura</option><option value="40">40 - Landes</option><option value="41">41 - Loir-et-Cher</option><option value="42">42 - Loire</option><option value="43">43 - Haute-Loire</option><option value="44">44 - Loire-Atlantique</option><option value="45">45 - Loiret</option><option value="46">46 - Lot</option><option value="47">47 - Lot-et-Garonne</option><option value="48">48 - Lozère</option><option value="49">49 - Maine-et-Loire</option><option value="50">50 - Manche</option><option value="51">51 - Marne</option><option value="52">52 - Haute-Marne</option><option value="53">53 - Mayenne</option><option value="54">54 - Meurthe-et-Moselle</option><option value="55">55 - Meuse</option><option value="56">56 - Morbihan</option><option value="57">57 - Moselle</option><option value="58">58 - Nièvre</option><option value="59">59 - Nord</option><option value="60">60 - Oise</option><option value="61">61 - Orne</option><option value="62">62 - Pas-de-Calais</option><option value="63">63 - Puy-de-Dôme</option><option value="64">64 - Pyrénées-Atlantiques</option><option value="65">65 - Hautes-Pyrénées</option><option value="66">66 - Pyrénées-Orientales</option><option value="67">67 - Bas-Rhin</option><option value="68">68 - Haut-Rhin</option><option value="69">69 - Rhône</option><option value="70">70 - Haute-Saône</option><option value="71">71 - Saône-et-Loire</option><option value="72">72 - Sarthe</option><option value="73">73 - Savoie</option><option value="74">74 - Haute-Savoie</option><option value="75">75 - Paris</option><option value="76">76 - Seine-Maritime</option><option value="77">77 - Seine-et-Marne</option><option value="78">78 - Yvelines</option><option value="79">79 - Deux-Sèvres</option><option value="80">80 - Somme</option><option value="81">81 - Tarn</option><option value="82">82 - Tarn-et-Garonne</option><option value="83">83 - Var</option><option value="84">84 - Vaucluse</option><option value="85">85 - Vendée</option><option value="86">86 - Vienne</option><option value="87">87 - Haute-Vienne</option><option value="88">88 - Vosges</option><option value="89">89 - Yonne</option><option value="90">90 - Territoire de Belfort</option><option value="91">91 - Essonne</option><option value="92">92 - Hauts-de-Seine</option><option value="93">93 - Seine-Saint-Denis</option><option value="94">94 - Val-de-Marne</option><option value="95">95 - Val-d'Oise</option><option value="971">971 - Guadeloupe</option><option value="972">972 - Martinique</option><option value="973">973 - Guyane</option><option value="974">974 - La Réunion</option><option value="976">976 - Mayotte</option>
                            </select>

                            <select name="search-federation" disabled>
                                <option value="">Fédération</option>
                                <option value="-1"></option>
                            </select>

                            <select name="search-radius">
                                <option value="">Distance</option>
                                <option value="10">10km</option>
                                <option value="30">30km</option>
                                <option value="50">50km</option>
                                <option value="100">100km</option>
                                <option value="200">200km</option>
                            </select>
                        </div>
                        <div class="structure-search-row search-buttons">
                            <button class="reset-search">Réinitialiser</button>
                            <span class="spacer"></span>
                            <button class="submit-search" name="submit-search">Rechercher</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">
                    <span class="please-wait">
                        <f:image src="EXT:ot_templating/Resources/Public/media/gear.gif"
                                 alt="{f:translate(key: 'please-wait')}"
                                 style="margin-top:100px; width:70px"
                        />
                    </span>
                    <span class="no-result" style="display: none"><f:translate key="no-result"/></span>
                    <span class="error-message" style="display: none"><f:translate key="an_error_occured"/></span>

                    <div class="structures-page">
                        <div class="structure-card-model" data-id="" style="display: none">

                            <div class="structure-poster">
                                <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" alt="poster" />
                            </div>

                            <div class="structure-details">
                                 <div class="structure-categories">
                                    <span class="structure-category-model" style="display: none"></span>
                                 </div>

                                <div class="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 class="structure-details-address">
                                        </td>
                                    </tr>
                                    <tr class="structure-details-entry structure-federation">
                                        <td><i class="fas fa-project-diagram"></i></td>
                                        <td class="structure-details-federation"></td>
                                    </tr>
                                </table>
                            </div>

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

                            <a class="btn structure-see" data-organization-id="" href="#">
                                <span><f:translate key="see-more"/></span>
                                <i class="fa fa-caret-right" style="margin-left: 5px;"></i>
                            </a>
                        </div>
                    </div>

                    <div class="pagination-bar" style="display:none;">
                        <a class="goto-page goto-first-page" data-page="1" href="#" title="{f:translate(key:'go-to-first-page')}">
                            <i class="fa fa-angle-double-left"></i>
                        </a>

                        <ul class="pagination-list">
                            <li class="goto-page-li-model" style="display: none;">
                                <a class="goto-page" data-page="1" href="#" title="{f:translate(key:'go-to-page')}">
                                    1
                                </a>
                            </li>
                        </ul>

                        <a class="goto-page goto-last-page" data-page="-1" href="#" title="{f:translate(key:'go-to-last-page')}">
                            <i class="fa fa-angle-double-right"></i>
                        </a>
                    </div>

                </div>
            </div>

            <span id="labels" style="display: none">
                <span id="around-me" style="display: none"><f:translate key="around-me"/></span>
                <span id="geoloc-unavailable" style="display: none"><f:translate key="geoloc-unavailable"/></span>
                <span id="geoloc-unsupported" style="display: none"><f:translate key="geoloc-unsupported"/></span>

                <span id="1MC"><f:translate key="1MC"/></span>
                <span id="2TH"><f:translate key="2TH"/></span>
                <span id="3DA"><f:translate key="3DA"/></span>
                <span id="5FA"><f:translate key="5FA"/></span>
                <span id="OTAR"><f:translate key="OTAR"/></span>
                <span id="OTCI"><f:translate key="OTCI"/></span>
                <span id="6AR"><f:translate key="6AR"/></span>
                <span id="8CI"><f:translate key="8CI"/></span>
                <span id="OTAU"><f:translate key="OTAU"/></span>
            </span>
        </div>

        <div class="ot-structures-frame-details" style="display: none">
            <header>
                <a class="btn go-back" href="#"><f:translate key="go-back"/></a>
                <h2><f:translate key="member-companies"/></h2>

                <div class="structure-header">
                    <img src="" alt="logo" class="logo" />
                    <h3 class="name"></h3>
                    <span class="social">
                        <a href="" class="facebook" style="display: none">
                            <i class="fab fa-facebook" style="color: #129af6"></i>
                        </a>
                        <a href="" class="instagram" style="display: none">
                            <i class="fab fa-instagram-square" style="color: #f2f2f2"></i>
                        </a>
                        <a href="" class="twitter" style="display: none">
                            <i class="fab fa-twitter" style="color: #1da1f2"></i>
                        </a>
                    </span>
                </div>
                <div class="illustration-container">

                </div>
                <div class="categories-tags">

                </div>
                <div class="details">
                    <div class="description">

                    </div>
                    <div class="contact">

                    </div>
                </div>

                <div class="spot-on-bar">
                    <a href="" class="btn"><f:translate key="spot-on-from"/></a>
                </div>

                <div id="structure-details-map">
                </div>
            </header>
        </div>
    </div>
</div>