{% extends 'EPSFeBundle::layout_base.html.twig' %}

{% set FeLayoutConfig = campagneHabillage.getFeLayoutConfigParsed %}


{% block layout_style %}
<style>
<!--
{%  for m in ['lg', 'md', 'sm', 'xs'] %}		
{% if 'md' == m %}@media screen and (max-width: 1200px) {   {% endif %}
{% if 'sm' == m %}@media screen and (max-width: 992px) { {% endif %}
{% if 'xs' == m %}@media screen and (max-width: 768px) {  {% endif %}	
{% for ligneId, ligne in FeLayoutConfig.lignes  %}		
	{% for num, col in ligne %}			
	{% set zoneId = ligneId ~ num %}			
    {% if col[m]['hauteurMinPx'] is defined and col[m]['hauteurMinPx'] %}  .{{ zoneId }} {min-height : {{ col[m]['hauteurMinPx'] }}px }  {% endif %}
	{% endfor %}				
{% endfor %}

{% if FeLayoutConfig['marge_avant_menu'][m] is defined and FeLayoutConfig['marge_avant_menu'][m] >= 0 %}  #marge_avant_menu {min-height : {{ FeLayoutConfig['marge_avant_menu'][m] }}px }  {% endif %}
{% if FeLayoutConfig['marge_apres_menu'][m] is defined and FeLayoutConfig['marge_apres_menu'][m] >= 0 %}  #marge_apres_menu {min-height : {{ FeLayoutConfig['marge_apres_menu'][m] }}px }  {% endif %}
		
{% if 'lg' != m %} } {% endif %}		
{% endfor %}
-->
</style>
	
{% endblock layout_style %}


{% block bodycontent %}
<div id="wrapper">

    <div id="page" class="container"> 
    
    	{% if  fromBackend %}
    		<a href="#" class="btn btn-default adm-showdimension-btn" @click="toggledimension"><i class="fa fa-cogs"></i></a>
    		<transition name="custom-classes-transition" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" >
			<span v-show="toggledimensionactif" class="adm-showdimension" v-cloak>
				<em>Dimensions de la page :</em>
				<li>largeur : ${pagew}px</li>
				<li>hauteur : variable (mini ${pageh}px)</li>
			</span>    		
			</transition>
    	{% endif %}

    	
    	{% for ligneId, ligne in FeLayoutConfig.lignes  %}
    	<div id="{{ ligneId }}" class="row">
    		{% for num, col in ligne %}
    		
    			{% set zoneId = ligneId ~ num %}
        	
        		{%  set css = zoneId ~ ' col_wrapper col_' ~ ligneId ~ num ~ '_wrapper' %}
        		
        		{%  for m in ['lg', 'md', 'sm', 'xs'] %}
        			{% set v = FeLayoutConfig.defaut.largeurCol %}
	        		{% if col[m]['largeurCol'] is defined %} {% set v = col[m]['largeurCol']  %}  {% endif %}	        		
        			{%  set css = css ~' col-'~ m ~'-' ~ v %}        			        			
        		{% endfor %}
        		{%  for m in ['lg', 'md', 'sm', 'xs'] %}
        			{% set v = FeLayoutConfig.defaut.prefixCol %}
	        		{% if col[m]['prefixCol'] is defined %} {% set v = col[m]['prefixCol']  %}  {% endif %}	        		
        			{%  set css = css ~' col-'~ m ~'-offset-' ~ v %}        			        			
        		{% endfor %}

				{% if  fromBackend %}
				<eps-zone>
				{% endif %}
        		<div class="{{ css }} {{ fromBackendZoneClass }}" style="position: relative;">
        			{% if col.role is defined and col.role %}
        			
        				{#
        				{% if 'LOGO' == col.role %}
        					<a href="{{ path('fe_home', {'camp' : camp}) }}" id="logo"><img src="{{ vich_uploader_asset(campagne, 'logoFile') }}" alt="{{ campagne.lib }}"  class="img-responsive" /></a>
        				{% endif %}
        				#}
        				
        				{% if 'JEU' == col.role %}
                            <div id="jeu_inner">    
                            	{% if  fromBackend %}
                            	  	<transition name="custom-classes-transition" enter-active-class="animated zoomIn" leave-active-class="animated zoomOut" >
                        			<span v-show="toggledimensionactif" class="adm-showdimension" v-cloak>
                        				<em>Zone masquée par le module de jeu :</em>
                    					<li>largeur : ${jeuw}px</li>
                    					<li>hauteur : variable (mini ${jeuh}px)</li>
                    					<li>marge haute au bord de page : ${jeutop}px</li>
                    					<li>marge gauche au bord de page :  ${jeuleft}px</li>
                    				</span>
                    				</transition>
                    			{% endif %}                    
                            	{% include 'EPSFeBundle:Common:_cms_wrapper.html.twig' with { 'zone' : 'col_PRECONTENT' } %}                        	
                                {% block content %}	{% endblock content %}                            
                                {% include 'EPSFeBundle:Common:_cms_wrapper.html.twig' with { 'zone' : 'col_CONTENT' } %}    
                            </div>        					
        				{% endif %}
        			{% else %}
        				{% include 'EPSFeBundle:Common:_cms_wrapper.html.twig' with { 'zone' : zoneId } %}
        			{% endif %}
        		</div>
        		{% if  fromBackend %}
				</eps-zone>
				{% endif %}
    		{% endfor %}
    	</div>
    	{% endfor %}
             	
    </div>	
</div> 
{% endblock bodycontent %}