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

<v:page.header.link rel="icon" href="EXT:ot_templating/Resources/Public/Icons/favicon.ico" />

<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="advice">{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="2A">2A - Corse-du-Sud</option><option value="2B">2B - Haute-Corse</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>
                    <span class="results-count-message" style="display: none">
                        <i class="count"></i>&nbsp;<i><f:translate key="results"/></i>
                    </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>
            </header>
            <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>
            <div class="content" style="display: none">
                <div class="structure-header">
                    <f:image src="EXT:ot_templating/Resources/Public/media/event-default.jpg" 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">
                    <f:image src="EXT:ot_templating/Resources/Public/media/event-default-modern.jpg" alt=""/>
                </div>
                <div class="categories-tags">

                </div>
                <div class="details">
                    <div class="description">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                        eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                        deserunt mollit anim id est laborum.
                    </div>
                    <div class="contact">
                        <table>
                            <tr>
                                <td><i class="fas fa-map-marker-alt"></i></td>
                                <td class="address"></td>
                            </tr>
                            <tr>
                                <td><i class="fas fa-phone-alt"></i></td>
                                <td class="phone"></td>
                            </tr>
                            <tr>
                                <td><i class="fas fa-envelope"></i></td>
                                <td class="mail"></td>
                            </tr>
                            <tr>
                                <td><i class="fas fa-globe-europe"></i></td>
                                <td class="website"></td>
                            </tr>
                            <f:comment>
                                <!-- <tr> -->
                                <!--   <td><i class="fas fa-flag"></i></td> -->
                                <!--   <td class="province"></td> -->
                                <!-- </tr> -->
                            </f:comment>
                            <tr>
                                <td><i class="fas fa-project-diagram"></i></td>
                                <td class="network"></td>
                            </tr>
                        </table>
                    </div>
                </div>

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

                <div id="structure-details-map" style="display: none"></div>
            </div>
        </div>
    </div>
</div>