{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeCell %}main-menu-active{% endblock %}
{% block titre %}Organe administratif{% endblock %}
{% block body %}
<style>

    li div {
    display: block;
    color: #000;
    padding: 8px 16px;
    text-decoration: none;
    height: 100%;
    }

    li div.active1 {
    background-color: #106eea;
    color: white;
    }

    li div:hover:not(.active) {
    background-color: #007293;
    color: white;
    }

    .cadre{
        padding: 1.5%;
        border-right: 1px solid #cbcbcb;
        color:white;
        border-radius: 10% 0% 0% 10%;
        font-size:50px;
    }

    .iconQ {
        font-size: 120px;
    }

    .wid {
        font-size:15px;
    }

    .yellowLine{
        height: 5px;
        background: gold;
        width: 60%;
        margin: 0% 20% 0% 20%;
        border-radius: 30px;
                
    }


    .hov{
        background-color: #F5F3F3
    }

    .hov:hover{
        background :gold;
    }

    @media screen and (min-width: 600px) {
    .mob{
        display:none;
        }

    .pc{
        display:flex; 
    }   

    }

    @media screen and (max-width: 600px) {
    h6 {
        font-size:10px;
    }
    .iconQ {
        font-size: 80px;
    }

    .cadre{
        padding: 2%;
        border-right: 1px solid #cbcbcb;
        color:white;
        border-radius: 10% 0% 0% 10%;
        font-size:30px;
    }  
    
    .wid {
        font-size: 12px;
    }

    .pc{
        display:none;
    }

    .mob{
        display:flex;
        flex-wrap: wrap;
        }

        .margt{
            ;
        }
    }

</style>


    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h4 class="title-page" style="color:white;">Organe administratif</h4>
        </div>
    </div>
    <div style='display:flex;justify-content: center;width:100%;margin:0%' class="row block_ac">
        <div style=''>
            <div  id='sectionBureau'>
                <div class="row justify-content-center mt-3">
                    <div class="col-md-7 text-center">
                        <h3 class="heading-92913 text-black text-center">FÉDÉRATION DES CHAMBRES DES PÊCHES MARITIMES - ORGANE ADMINISTRATIF</h3>
                    </div>
                </div>

                <div id="bureau" class="panel-collapse in" style="">
                     <div style='background-color:#F5F3F3;text-align:center'>
                          <div class="panel-body text-sm" >
                                <img style='width:160px;height:160px' src="{{ asset("/assets/Backoffice/images/logoFCPM.png") }}" />
                            </div>

                            <div style='display: flex;flex-direction: column;align-items: center;'>

                            <div class ='panel panel-primary col-md-2' style='margin-top:2%;background-color: #F5F3F3'>

                                {% for b in membre %}

                                {% if b.poste == 1 %} 
                                <h6 class='titre_map'>{{b.posteNom}}</h6>
    
                                <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'>    
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i>                            
                                <div class='card wid text-center' style='flex-direction: row;margin:1%;justify-content: center;'>
                                 <span style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div> 
                          </div>

                          <div style='border-left: 6px solid lightgrey;height: 50px'>
                          </div>

                            <div class ='panel panel-primary col-md-2' style='background-color: #F5F3F3'>
                                {% for b in membre %}

                                {% if b.poste == 2 %} 
                                <h6 class='titre_map'>{{b.posteNom}}</h6>
    
                                <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'>    

                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i>                            
                                <div class='card wid text-center' style='flex-direction: row;margin:1%;justify-content: center;'>
                                 <span style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div> 
                          </div>
                          
                          <div class='pc' style='border-left: 6px solid lightgrey;height: 50px'>
                          </div>

                          <div class='pc' style='border-top: 6px solid lightgrey;width:67.1%;'>
                          </div>


                          <div class='pc' style='flex-direction: row;justify-content: space-around;width:100%'>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>

                          </div>

                          <div class='pc' style='flex-direction: row;justify-content: space-around;width:100%;margin-bottom:5%'>
                            <div  id='Vice-Pr' class ='col-md-2' style='background-color: #F5F3F3;cursor:pointer'>
                                {% for b in membre %}

                                {% if b.poste == 3 %} 
                                <h6 style='margin:0%' class='titre_map view'>{{b.posteNom}}</h6>
                                <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'> 
                                <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0%;'>
                                 <span style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div> 
                            </div>
                            <div  id='Secr' class ='col-md-2' style='background-color: #F5F3F3;cursor:pointer'>
                                {% for b in membre %}

                                {% if b.poste == 4 %} 
                                <h6  style='margin:0%' class='titre_map view'>{{b.posteNom}}</h6>
                                <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'>    

                                <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0%;'>
                                 <span style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div> 
                            </div>
                            <div  id='Cons' class ='col-md-2' style='background-color: #F5F3F3;cursor:pointer'>
                                {% for b in membre %}

                                {% if b.poste == 5 %} 
                                <h6  style='margin:0%' class='titre_map view'>{{ b.posteNom}}</h6>
                                <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'>    

                                <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0%;'>
                                 <span style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div> 
                            </div>
                          </div>

                          <div class='mob' style='flex-direction: row;justify-content: space-around;width:100%;margin-bottom:5%'>
                            <div  id='Vice-Pr' class ='col-md-8' style='background-color: #F5F3F3;cursor:pointer;margin:5%'>
                            <h6 style='margin:0%' class='titre_map view'>Service des Affaires administratives, Financières et Juridiques</h6>
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'>    
                                {% for b in membre %}

                                {% if b.poste == 3 %} 
                                <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0%;'>
                                 <span style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div> 
                            </div>
                            <div  id='Secr' class ='col-md-8' style='background-color: #F5F3F3;cursor:pointer;margin:5%'>
                            <h6  style='margin:0%' class='titre_map view'>Service des Informations, de la Formation et de la Communication</h6>
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'>    
                                {% for b in membre %}

                                {% if b.poste == 4 %} 
                                <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0%;'>
                                 <span style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div> 
                            </div>
                            <div  id='Cons' class ='col-md-8' style='background-color: #F5F3F3;cursor:pointer;margin:5%'>
                            <h6  style='margin:0%' class='titre_map view'>L'intérêt de la coopération, de la communication et de la coordination avec les professionnels et les chambres</h6>
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'>    
                                {% for b in membre %}

                                {% if b.poste == 5 %} 
                                <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0%;'>
                                 <span style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div> 
                            </div>
                          </div>
    
                        </div>
                    </div>
                    
                </div>
            </div>

        </div>
          
        </div>
    </div>
{% endblock %}