{namespace wseils=Wseils\Wseils\ViewHelpers}
<f:variable name="weatherData" value="{wseils:weather(filePath: 'fileadmin/bulletin_capitainerie_Dunkerque_fr.xml')}"/>

<f:if condition="{weatherData.lang_uid} == 0">
    <f:then>
        <f:variable name="weatherData" value="{wseils:weather(filePath: 'fileadmin/bulletin_capitainerie_Dunkerque_fr.xml')}"/>
    </f:then>
    <f:else if="{weatherData.lang_uid} == 1">
        <f:variable name="weatherData" value="{wseils:weather(filePath: 'fileadmin/bulletin_capitainerie_Dunkerque_an.xml')}"/>
    </f:else>
    <f:else if="{weatherData.lang_uid} == 2">
        <f:variable name="weatherData" value="{wseils:weather(filePath: 'fileadmin/bulletin_capitainerie_Dunkerque_nl.xml')}"/>
    </f:else>
</f:if>

<div class="frame-container frame-container-default">
    <div class="weather-tide-content">
        <div class="today-weather-tide single">
            <h2 class="h3">
                <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:general_situation" />
            </h2>
            <div class="card-container">
                <figure class="card">
                    <p class="day">{weatherData.jours.0.jour} {weatherData.jours.0.num_jour} {weatherData.jours.0.mois}</p>
                    <img src="{weatherData.jours.0.details.jourentier.image_frontologie}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:generalWeatherSituationImage' />">
                    <figcaption>{weatherData.jours.0.details.jourentier.phrase_situ_generale}</figcaption>
                </figure>
                <figure class="card">
                    <p class="day">{weatherData.jours.0.jour} {weatherData.jours.0.num_jour} {weatherData.jours.0.mois}</p>
                    <img src="{weatherData.jours.0.details.jourentier.carte_cotiere}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:coastalZone' />">
                    <div class="container-legend">
                        <legend class="legend-weather-tide wide">
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/fronto/anticyclone_fr.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:high_press' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:high_press" /></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/fronto/depression_fr.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:low_press' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:low_press" /></span>
                            </div>
                            <div>
                                <img src="http:/static1.mclcm.net/image/capitaineries/animation/legende/fronto/front_froid.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:cold_front' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:cold_front" /></span>
                            </div>
                            <div>
                                <img src="http:/static1.mclcm.net/image/capitaineries/animation/legende/fronto/front_chaud.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:warm_front' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:warm_front" /></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/fronto/occlusion.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:occlusion' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:occlusion" /></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/fronto/front_stationnaire.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:stationary_front' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:stationary_front" /></span>
                            </div>
                        </legend>
                        <legend class="legend-weather-tide sea">
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/5_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:5KnotsLogoImage' />">
                                <span>5 <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots"/></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/10_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:10KnotsLogoImage' />">
                                <span>10 <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots"/></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/25_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:25KnotsLogoImage' />">
                                <span>25 <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots"/></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/50_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:50KnotsLogoImage' />">
                                <span>50 <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots"/></span>
                            </div>
                        </legend>
                    </div>
                </figure>
            </div>
            <div class="card-container">
                <figure class="card">
                    <p class="day">{weatherData.jours.1.jour} {weatherData.jours.1.num_jour} {weatherData.jours.1.mois}</p>
                    <img src="{weatherData.jours.1.details.jourentier.image_frontologie}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:generalWeatherSituationImage' />">
                    <figcaption>{weatherData.jours.1.details.jourentier.phrase_situ_generale}</figcaption>
                </figure>
                <figure class="card">
                    <p class="day">{weatherData.jours.1.jour} {weatherData.jours.1.num_jour} {weatherData.jours.1.mois}</p>
                    <img src="{weatherData.jours.1.details.jourentier.carte_cotiere}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:coastalZone' />">
                    <div class="container-legend">
                        <legend class="legend-weather-tide wide">
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/fronto/anticyclone_fr.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:high_press' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:high_press" /></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/fronto/depression_fr.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:low_press' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:low_press" /></span>
                            </div>
                            <div>
                                <img src="http:/static1.mclcm.net/image/capitaineries/animation/legende/fronto/front_froid.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:cold_front' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:cold_front" /></span>
                            </div>
                            <div>
                                <img src="http:/static1.mclcm.net/image/capitaineries/animation/legende/fronto/front_chaud.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:warm_front' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:warm_front" /></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/fronto/occlusion.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:occlusion' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:occlusion" /></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/fronto/front_stationnaire.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:stationary_front' />">
                                <span><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:stationary_front" /></span>
                            </div>
                        </legend>
                        <legend class="legend-weather-tide sea">
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/5_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:5KnotsLogoImage' />">
                                <span>5 <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots"/></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/10_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:10KnotsLogoImage' />">
                                <span>10 <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots"/></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/25_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:25KnotsLogoImage' />">
                                <span>25 <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots"/></span>
                            </div>
                            <div>
                                <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/50_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:50KnotsLogoImage' />">
                                <span>50 <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots"/></span>
                            </div>
                        </legend>
                    </div>
                </figure>
            </div>
        </div>
        <div class="satellite-image single">
            <f:if condition="{weatherData.lang_uid} == 0">
                <f:then>
                    <video controls>
                        <source src="{weatherData.anim_sat}" type="video/mp4">
                        <f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:browserSupportVideos' />
                    </video>
                </f:then>
                <f:else if="{weatherData.lang_uid} == 1 || {weatherData.lang_uid} == 2">
                    <f:variable name="weatherData" value="{wseils:weather(filePath: 'fileadmin/bulletin_capitainerie_Dunkerque_fr.xml')}"/>
                    <video controls>
                        <source src="{weatherData.anim_sat}" type="video/mp4">
                        <f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:browserSupportVideos' />
                    </video>
                </f:else>
            </f:if>
        </div>
        <f:if condition="{weatherData.lang_uid} == 0">
            <f:then>
                <f:variable name="weatherData" value="{wseils:weather(filePath: 'fileadmin/bulletin_capitainerie_Dunkerque_fr.xml')}"/>
            </f:then>
            <f:else if="{weatherData.lang_uid} == 1">
                <f:variable name="weatherData" value="{wseils:weather(filePath: 'fileadmin/bulletin_capitainerie_Dunkerque_an.xml')}"/>
            </f:else>
            <f:else if="{weatherData.lang_uid} == 2">
                <f:variable name="weatherData" value="{wseils:weather(filePath: 'fileadmin/bulletin_capitainerie_Dunkerque_nl.xml')}"/>
            </f:else>
        </f:if>
        <div class="today-weather single">
            <h2 class="h3">
                <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:today_weather" />
            </h2>
            <div class="card-container">
                <div class="card">
                    <p class="day">{weatherData.jours.0.jour} {weatherData.jours.0.num_jour} {weatherData.jours.0.mois}</p>
                    <p class="day-time">
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:morning" />
                    </p>
                    <p class="alerte">{weatherData.jours.0.details.jourdetails.matin.phrase_avis}</p>
                    <div class="content">
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.matin.vent}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:swell"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.matin.houle}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind_sea"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.matin.merduvent}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:visibility"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.matin.visi}</span></p>
                        <div class="weather">
                            <img src="{weatherData.jours.0.details.jourdetails.matin.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:WeatherForecastImage' />">
                            <div class="weather-infos">
                                <p><span>{weatherData.jours.0.details.jourdetails.matin.tempe}</span> <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:at"/> {weatherData.jours.0.details.jourdetails.matin.heure}</p>
                                <p><span>{weatherData.jours.0.details.jourdetails.matin.pression}</span>hPa</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <p class="day">{weatherData.jours.0.jour} {weatherData.jours.0.num_jour} {weatherData.jours.0.mois}</p>
                    <p class="day-time">
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:afternoon" />
                    </p>
                    <p class="alerte">{weatherData.jours.0.details.jourdetails.apresmidi.phrase_avis}</p>
                    <div class="content">
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.apresmidi.vent}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:swell"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.apresmidi.houle}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind_sea"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.apresmidi.merduvent}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:visibility"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.apresmidi.visi}</span></p>
                        <div class="weather">
                            <img src="{weatherData.jours.0.details.jourdetails.apresmidi.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:WeatherForecastImage' />">
                            <div class="weather-infos">
                                <p><span>{weatherData.jours.0.details.jourdetails.apresmidi.tempe}</span> <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:at"/> {weatherData.jours.0.details.jourdetails.apresmidi.heure}</p>
                                <p><span>{weatherData.jours.0.details.jourdetails.apresmidi.pression}</span>hPa</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <p class="day">{weatherData.jours.0.jour} {weatherData.jours.0.num_jour} {weatherData.jours.0.mois}</p>
                    <p class="day-time">
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:evening" />
                    </p>
                    <p class="alerte">{weatherData.jours.0.details.jourdetails.soir.phrase_avis}</p>
                    <div class="content">
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.soir.vent}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:swell"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.soir.houle}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind_sea"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.soir.merduvent}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:visibility"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.soir.visi}</span></p>
                        <div class="weather">
                            <img src="{weatherData.jours.0.details.jourdetails.soir.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:WeatherForecastImage' />">
                            <div class="weather-infos">
                                <p><span>{weatherData.jours.0.details.jourdetails.soir.tempe}</span> <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:at"/> {weatherData.jours.0.details.jourdetails.soir.heure}</p>
                                <p><span>{weatherData.jours.0.details.jourdetails.soir.pression}</span>hPa</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <p class="day">{weatherData.jours.0.jour} {weatherData.jours.0.num_jour} {weatherData.jours.0.mois}</p>    
                    <p class="day-time">
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:night" />
                    </p>
                    <p class="alerte">{weatherData.jours.0.details.jourdetails.nuit.phrase_avis}</p>
                    <div class="content">
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.nuit.vent}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:swell"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.nuit.houle}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind_sea"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.nuit.merduvent}</span></p>
                        <p><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:visibility"/> : <span class="infos">{weatherData.jours.0.details.jourdetails.nuit.visi}</span></p>
                        <div class="weather">
                            <img src="{weatherData.jours.0.details.jourdetails.nuit.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:WeatherForecastImage' />">
                            <div class="weather-infos">
                                <p><span>{weatherData.jours.0.details.jourdetails.nuit.tempe}</span> <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:at"/> {weatherData.jours.0.details.jourdetails.nuit.heure}</p>
                                <p><span>{weatherData.jours.0.details.jourdetails.nuit.pression}</span>hPa</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weather-tide-single wide-tide">
            <div class="card-container">
                <div class="card">
                    <p class="day">{weatherData.jours.0.jour} {weatherData.jours.0.num_jour} {weatherData.jours.0.mois}</p>
                    <img src="{weatherData.jours.0.details.jourdetails.apresmidi.carte_port}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:MapOfThePort' />">
                </div>
                <div class="tide-card card">
                    <p class="day">{weatherData.jours.0.jour} {weatherData.jours.0.num_jour} {weatherData.jours.0.mois}</p>
                    <h2 class="h3">
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:tide_timetable" />
                    </h2>
                    <div class="content">
                        <div>
                            <p class="coeff">Coeff<span>{weatherData.jours.0.details.jourdetails.marees.coeff1}</span></p>
                            <p class="period"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:high_tide"/></p>
                            <p class="hours">{weatherData.jours.0.details.jourdetails.marees.pm0_heure}</p>
                            <p class="height">{weatherData.jours.0.details.jourdetails.marees.pm0_hauteur}</p>
                            <p class="period"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:low_tide"/></p>
                            <p class="hours">{weatherData.jours.0.details.jourdetails.marees.bm0_heure}</p>
                            <p class="height">{weatherData.jours.0.details.jourdetails.marees.bm0_hauteur}</p>
                        </div>
                        <div>
                            <p class="coeff">Coeff<span>{weatherData.jours.0.details.jourdetails.marees.coeff2}</span></p>
                            <p class="period"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:high_tide"/></p>
                            <p class="hours">{weatherData.jours.0.details.jourdetails.marees.pm1_heure}</p>
                            <p class="height">{weatherData.jours.0.details.jourdetails.marees.pm1_hauteur}</p>
                            <p class="period"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:low_tide"/></p>
                            <p class="hours">{weatherData.jours.0.details.jourdetails.marees.bm1_heure}</p>
                            <p class="height">{weatherData.jours.0.details.jourdetails.marees.bm1_hauteur}</p>
                        </div>
                    </div>
                </div>
            </div>
            <legend>
                <div>
                    <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/5_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:5KnotsLogoImage' />">
                    <span>5
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots" />
                    </span>
                </div>
                <div>
                    <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/10_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:10KnotsLogoImage' />">
                    <span>10
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots" />
                    </span>
                </div>
                <div>
                    <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/25_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:25KnotsLogoImage' />">
                    <span>25
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots" />
                    </span>
                </div>
                <div>
                    <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/50_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:50KnotsLogoImage' />">
                    <span>50
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots" />
                    </span>
                </div>
            </legend>
        </div>
    
        <div class="tomorrow-weather single">
            <h2 class="h3">
                <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:tomorrow_weather" />
            </h2>
            <div class="card-container">
                <div class="card">
                    <p class="day">{weatherData.jours.1.jour} {weatherData.jours.1.num_jour} {weatherData.jours.1.mois}</p>
                    <p class="day-time"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:morning" /></p>
                    <p class="alerte">{weatherData.jours.1.details.jourdetails.matin.phrase_avis}</p>
                    <div class="content">
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.matin.vent}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:swell" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.matin.houle}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind_sea" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.matin.merduvent}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:visibility" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.matin.visi}</span>
                        </p>
                        <div class="weather">
                            <img src="{weatherData.jours.1.details.jourdetails.matin.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:WeatherForecastImage' />">
                            <div class="weather-infos">
                                <p><span>{weatherData.jours.1.details.jourdetails.matin.tempe}</span> <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:at"/> {weatherData.jours.1.details.jourdetails.matin.heure}</p>
                                <p><span>{weatherData.jours.1.details.jourdetails.matin.pression}</span>hPa</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <p class="day">{weatherData.jours.1.jour} {weatherData.jours.1.num_jour} {weatherData.jours.1.mois}</p>
                    <p class="day-time"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:afternoon" /></p>
                    <p class="alerte">{weatherData.jours.1.details.jourdetails.apresmidi.phrase_avis}</p>
                    <div class="content">
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.apresmidi.vent}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:swell" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.apresmidi.houle}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind_sea" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.apresmidi.merduvent}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:visibility" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.apresmidi.visi}</span>
                        </p>
                        <div class="weather">
                            <img src="{weatherData.jours.1.details.jourdetails.apresmidi.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:WeatherForecastImage' />">
                            <div class="weather-infos">
                                <p><span>{weatherData.jours.1.details.jourdetails.apresmidi.tempe}</span> <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:at"/> {weatherData.jours.1.details.jourdetails.apresmidi.heure}</p>
                                <p><span>{weatherData.jours.1.details.jourdetails.apresmidi.pression}</span>hPa</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <p class="day">{weatherData.jours.1.jour} {weatherData.jours.1.num_jour} {weatherData.jours.1.mois}</p>
                    <p class="day-time"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:evening" /></p>
                    <p class="alerte">{weatherData.jours.1.details.jourdetails.soir.phrase_avis}</p>
                    <div class="content">
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.soir.vent}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:swell" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.soir.houle}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind_sea" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.soir.merduvent}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:visibility" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.soir.visi}</span>
                        </p>
                        <div class="weather">
                            <img src="{weatherData.jours.1.details.jourdetails.soir.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:WeatherForecastImage' />">
                            <div class="weather-infos">
                                <p><span>{weatherData.jours.1.details.jourdetails.soir.tempe}</span> <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:at"/> {weatherData.jours.1.details.jourdetails.soir.heure}</p>
                                <p><span>{weatherData.jours.1.details.jourdetails.soir.pression}</span>hPa</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <p class="day">{weatherData.jours.1.jour} {weatherData.jours.1.num_jour} {weatherData.jours.1.mois}</p>
                    <p class="day-time"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:night" /></p>
                    <p class="alerte">{weatherData.jours.1.details.jourdetails.nuit.phrase_avis}</p>
                    <div class="content">
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.nuit.vent}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:swell" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.nuit.houle}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:wind_sea" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.nuit.merduvent}</span>
                        </p>
                        <p>
                            <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:visibility" /> : 
                            <span class="infos">{weatherData.jours.1.details.jourdetails.nuit.visi}</span>
                        </p>
                        <div class="weather">
                            <img src="{weatherData.jours.1.details.jourdetails.nuit.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:WeatherForecastImage' />">
                            <div class="weather-infos">
                                <p><span>{weatherData.jours.1.details.jourdetails.nuit.tempe}</span> <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:at"/> {weatherData.jours.1.details.jourdetails.nuit.heure}</p>
                                <p><span>{weatherData.jours.1.details.jourdetails.nuit.pression}</span>hPa</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="weather-tide-single wide-tide">
            <div class="card-container">
                <div class="card">
                    <p class="day">{weatherData.jours.1.jour} {weatherData.jours.1.num_jour} {weatherData.jours.1.mois}</p>
                    <img src="{weatherData.jours.1.details.jourdetails.apresmidi.carte_port}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:MapOfThePort' />">
                </div>
                <div class="tide-card card">
                    <p class="day">{weatherData.jours.1.jour} {weatherData.jours.1.num_jour} {weatherData.jours.1.mois}</p>
                    <h2 class="h3">
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:tide_timetable" />
                    </h2>
                    <div class="content">
                        <div>
                            <p class="coeff">Coeff<span>{weatherData.jours.1.details.jourdetails.marees.coeff1}</span></p>
                            <p class="period"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:high_tide"/></p>
                            <p class="hours">{weatherData.jours.1.details.jourdetails.marees.pm0_heure}</p>
                            <p class="height">{weatherData.jours.1.details.jourdetails.marees.pm0_hauteur}</p>
                            <p class="period"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:low_tide"/></p>
                            <p class="hours">{weatherData.jours.1.details.jourdetails.marees.bm0_heure}</p>
                            <p class="height">{weatherData.jours.1.details.jourdetails.marees.bm0_hauteur}</p>
                        </div>
                        <div>
                            <p class="coeff">Coeff<span>{weatherData.jours.1.details.jourdetails.marees.coeff2}</span></p>
                            <p class="period"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:high_tide"/></p>
                            <p class="hours">{weatherData.jours.1.details.jourdetails.marees.pm1_heure}</p>
                            <p class="height">{weatherData.jours.1.details.jourdetails.marees.pm1_hauteur}</p>
                            <p class="period"><f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:low_tide"/></p>
                            <p class="hours">{weatherData.jours.1.details.jourdetails.marees.bm1_heure}</p>
                            <p class="height">{weatherData.jours.1.details.jourdetails.marees.bm1_hauteur}</p>
                        </div>
                    </div>
                </div>
            </div>
            <legend>
                <div>
                    <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/5_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:5KnotsLogoImage' />">
                    <span>5
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots" />
                    </span>
                </div>
                <div>
                    <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/10_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:10KnotsLogoImage' />">
                    <span>10
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots" />
                    </span>
                </div>
                <div>
                    <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/25_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:25KnotsLogoImage' />">
                    <span>25
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots" />
                    </span>
                </div>
                <div>
                    <img src="http://static1.mclcm.net/image/capitaineries/animation/legende/carte_vent/50_noeuds.png" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:50KnotsLogoImage' />">
                    <span>50
                        <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:knots" />
                    </span>
                </div>
            </legend>
        </div>
        <div class="future-weather single">
            <h2 class="h3">
                <f:translate key="LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:future_weather" />
            </h2>
            <div class="card-container">
                <div class="card">
                    <p class="day">{weatherData.jours.2.jour} {weatherData.jours.2.num_jour} {weatherData.jours.2.mois}</p>
                    <div class="content">
                        <img src="{weatherData.jours.2.details.jourentier.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:weatherImage' />">
                        <div>
                            <p class="temp"><span>{weatherData.jours.2.details.jourentier.tempe_min}</span><f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:to' /><span>{weatherData.jours.2.details.jourentier.tempe_max}</span></p>
                            <p class="wind">{weatherData.jours.2.details.jourentier.phrase_vent}</p>
                            <p class="infos">{weatherData.jours.2.details.jourentier.direction_vent}</p>
                            <p class="infos">{weatherData.jours.2.details.jourentier.vitesse_vent}</p>
                            <p class="infos">{weatherData.jours.2.details.jourentier.phrase_evol_vent}</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <p class="day">{weatherData.jours.3.jour} {weatherData.jours.3.num_jour} {weatherData.jours.3.mois}</p>
                    <div class="content">
                        <img src="{weatherData.jours.3.details.jourentier.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:weatherImage' />">
                        <div>
                            <p class="temp"><span>{weatherData.jours.3.details.jourentier.tempe_min}</span><f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:to' /><span>{weatherData.jours.3.details.jourentier.tempe_max}</span></p>
                            <p class="wind">{weatherData.jours.3.details.jourentier.phrase_vent}</p>
                            <p class="infos">{weatherData.jours.3.details.jourentier.direction_vent}</p>
                            <p class="infos">{weatherData.jours.3.details.jourentier.vitesse_vent}</p>
                            <p class="infos">{weatherData.jours.3.details.jourentier.phrase_evol_vent}</p>
                        </div>
                    </div>
                </div>
                <div class="card">
                    <p class="day">{weatherData.jours.4.jour} {weatherData.jours.4.num_jour} {weatherData.jours.4.mois}</p>
                    <div class="content">
                        <img src="{weatherData.jours.4.details.jourentier.nebu}" alt="<f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:weatherImage' />">
                        <div>
                            <p class="temp"><span>{weatherData.jours.4.details.jourentier.tempe_min}</span><f:translate key='LLL:EXT:wseils/Resources/Private/Language/locallang.xlf:to' /><span>{weatherData.jours.4.details.jourentier.tempe_max}</span></p>
                            <p class="wind">{weatherData.jours.4.details.jourentier.phrase_vent}</p>
                            <p class="infos">{weatherData.jours.4.details.jourentier.direction_vent}</p>
                            <p class="infos">{weatherData.jours.4.details.jourentier.vitesse_vent}</p>
                            <p class="infos">{weatherData.jours.4.details.jourentier.phrase_evol_vent}</p>
                        </div>
        
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>