{% extends 'FrontofficeFr/base.html.twig' %}
{% block activeCell %}main-menu-active{% endblock %}
{% block titre %}Membres FCPM{% endblock %}
{% block body %}
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

.mobtext{
    font-size:12px;
}


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;
            
}

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

.pc{
    display:flex; 
   }   

}

.hov{
    background-color: #F5F3F3
}

.hov:hover{
    background :gold;
}

@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{
        margin-top:5%;
    }
}

.container1 {
    margin-left: 10% !important;
    margin-right: 10% !important;
}

</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;">Présentation des membres</h4>
        </div>
    </div>
    <div style='display:flex;justify-content: center;width:100%;margin:0%' class="row block_ac">
        <div style='margin-top:2%'>
            <div  id='sectionBureau'>
                <div class="row justify-content-center">
                    <div class="col-md-7 text-center">
                        <h3 class="heading-92913 text-black text-center">FÉDÉRATION DES CHAMBRES DES PÊCHES MARITIMES - LE BUREAU</h3>
                    </div>
                </div>

                <div id="bureau" class="panel-collapse in container1">
                     <div style='text-align:center;margin-top:0%'>
                            <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'>
                            <h6 class='titre_map'>Présidant</h6>

                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-direction: column;'>    
                                {% for b in membreBureau %}

                                {% if b.posteBureau == 1 %}
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                <div class='card wid text-center' style='flex-direction: row;margin:1%;justify-content: center;'>
                                 <span class="pctext" 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:83.5%;'>
                          </div>

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

                          </div>

                          <div class='pc' style='flex-direction: row;justify-content: space-between;width:100%'>

                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 21 %} 
                                <h6 class='titre_map view' style='margin:0%'>1ere vice-présidant</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

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


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 22 %} 
                                <h6 class='titre_map view' style='margin:0%'>2eme vice-présidant</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

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


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 23 %} 
                                <h6 class='titre_map view' style='margin:0%'>3eme vice-présidant</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

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


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 24 %} 
                                <h6 class='titre_map view' style='margin:0%'>4eme vice-présidant</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                          </div>


                          <div class='pc' style='flex-direction: row;justify-content: space-around;width:97%'>
                            <div style='border-top: 6px solid lightgrey;width:29%;'>
                            </div>

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


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

                          </div>

                           <div class='pc' style='flex-direction: row;justify-content: space-around;width:97%'>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid #F5F3F3;height: 50px;'>
                            </div>
                            <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  style='border-left: 6px solid #F5F3F3;height: 50px;'>
                            </div>
                            <div  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>


                          </div>

                          <div class='pc' style='flex-direction: row;justify-content: space-between;width:100%'>

                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 4 %} 
                                <h6 class='titre_map view' style='margin:0%'>Trésorier</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid #F5F3F3;height: 250px;'>
                            </div>


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 5 %} 
                                <h6 class='titre_map view' style='margin:0%'>Trésorier Adjoint</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

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


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 6 %} 
                                <h6 class='titre_map view' style='margin:0%'>Secrétaire</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                            <div  style='border-left: 6px solid #F5F3F3;height: 250px;'>
                            </div>


                            <div  class ='col-md-2' >
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 7 %} 
                                <h6 class='titre_map view' style='margin:0%'>Secrétaire Adjoint</h6>
                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:130px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}
                                 <div class='card wid text-center' style='flex-direction: row;justify-content: center;border-radius: 0px;'>
                                    <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %}
                                {% endfor %}
                            </div>

                          </div>

                          <div class='pc' style='flex-direction: row;justify-content: space-evenly;width:95%;'>
                            <div class ='panel panel-primary col-md-12' style='background-color: #F5F3F3;width: 100%;;'>
                            <h6 class='titre_map'>Assesseurs</h6>
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-wrap:wrap'>
                                {% for b in membreBureau %}

                                {% if b.posteBureau == 3 %} 
                                <div class='card wid text-center col-md-5' style='flex-direction: row;margin:1%'>
                                {% if b.img != '' %} 
                                <img class='image' style='width:80px;height:80px' src="{{ asset(b.img) }}" />
                                {% else %}
                                 <i class="bi bi-person-fill icon-muted cadre" style='background-color:gold;display:flex;align-items:center'></i>
                                {% endif %}
                                 <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %} 
                                {% endfor %}
                            </div>
                            </div>

                        </div>

                          {# <div class='mob' style='border-top: 6px solid lightgrey;width:74.5%;'>
                          </div> #}


                          {# <div class='mob' style='flex-direction: row;justify-content: space-around;width:97.3%'>
                            <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  style='border-left: 6px solid lightgrey;height: 50px;'>
                            </div>

                          </div> #}

                          <div class='mob' style='flex-direction: row;justify-content: space-between;width:100%;margin-top: 5%;'>

                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 21 %} 
                                <h6 class='titre_map view' style='margin:0%'>1ere vice-présidant</h6>
                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

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



                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 22 %} 
                                <h6 class='titre_map view' style='margin:0%'>2eme vice-présidant</h6>
                                                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

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


                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 23 %} 
                                <h6 class='titre_map view' style='margin:0%'>3eme vice-présidant</h6>
                                                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

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


                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 24 %} 
                                <h6 class='titre_map view' style='margin:0%'>4eme vice-présidant</h6>
                                                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

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

                          </div>

                          <div class='mob' style='flex-direction: row;justify-content: space-between;width:100%;margin-top: 5%;'>

                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 4 %} 
                                <h6 class='titre_map view' style='margin:0%'>Trésorier</h6>
                                                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

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

                            <div  style='border-left: 6px solid #F5F3F3;height: 150px;'>
                            </div>


                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 5 %} 
                                <h6 class='titre_map view' style='margin:0%'>Trésorier Adjoint</h6>
                                                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

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

                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 6 %} 
                                <h6 class='titre_map view' style='margin:0%'>Secrétaire</h6>
                                                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

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

                            <div  style='border-left: 6px solid #F5F3F3;height: 150px;'>
                            </div>


                            <div  class ='col-md-2' style='background-color: #F5F3F3;width:40%;margin-top:5%'>
                                {% for b in membreBureau %}
                                {% if b.posteBureau == 7 %} 
                                <h6 class='titre_map view' style='margin:0%'>Secrétaire Adjoint</h6>
                                                                                                {% if b.img != '' %} 
                                <img class='image' style='width:100%;height:90px' src="{{ asset(b.img) }}" />
                                {% else %}
                                <i class="iconQ bi bi-person-square icon-muted" style='display:flex;align-items:center;justify-content: center;padding: 1.5%;color: gold;'></i> 
                                {% endif %}

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

                          </div>

                        <div class='mob' style='flex-direction: row;justify-content: space-evenly;width:95%;margin-top:5%'>
                            <div class ='panel panel-primary col-md-12' style='background-color: #F5F3F3;width: 100%;;'>
                            <h6 class='titre_map'>Assesseurs</h6>
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-wrap:wrap'>
                                {% for b in membreBureau %}

                                {% if b.posteBureau == 3 %} 
                                <div class='card wid text-center col-md-5' style='flex-direction: row;margin:1%'>
                                {% if b.img != '' %} 
                                <img class='image' style='width:60px;height:60px' src="{{ asset(b.img) }}" />
                                {% else %}
                                 <i class="bi bi-person-fill icon-muted cadre" style='background-color:gold;display:flex;align-items:center'></i>
                                {% endif %}
                                 <span class="mobtext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %} 
                                {% endfor %}
                            </div>
                            </div>

                        </div>


                        {# <div class="margt" style='display: flex;flex-direction: row;justify-content: space-evenly;width:95%;'>
                            <div  id='Cons' class ='col-md-2 hov' style='cursor:pointer'>
                            <h6 class='titre_map view'>Trésoriers</h6>
                            </div>
                            <div  id='Secr' class ='col-md-2 hov' style='cursor:pointer'>
                            <h6 class='titre_map view'>Assesseurs</h6>
                            </div>
                            <div  id='Autr' class ='col-md-2 hov' style='cursor:pointer'>
                            <h6 class='titre_map view'>Secrétaires</h6>
                            </div>
                          </div>

                             <div id='panelVice' class ='panel panel-primary col-md-12' style='margin-top:2%;background-color: #F5F3F3;width: 100%;;display:none'>
                            <h6 class='titre_map'>Vice-Présidant :</h6>
                             <div style='display:flex;justify-content: space-evenly;width:100%;flex-wrap:wrap'>
                                {% for b in membreBureau %}
                                         
                                {% if b.posteBureau == 21 %} 
                                <div class='card wid text-center col-md-3' style='flex-direction: row;margin:1%'>
                                 <i class="bi bi-person icon-muted cadre" style='background-color:gold;display:flex;align-items:center;'></i>
                                 <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %} 
                                {% endfor %}

                                {% for b in membreBureau %}

                                {% if b.posteBureau == 22 %} 
                                <div class='card wid text-center col-md-3' style='flex-direction: row;margin:1%'>
                                 <i class="bi bi-person icon-muted cadre" style='background-color:gold;display:flex;align-items:center;'></i>
                                 <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %} 
                                {% endfor %}

                                {% for b in membreBureau %}

                                {% if b.posteBureau == 23 %} 
                                <div class='card wid text-center col-md-3' style='flex-direction: row;margin:1%'>
                                 <i class="bi bi-person icon-muted cadre" style='background-color:gold;display:flex;align-items:center;'></i>
                                 <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %} 
                                {% endfor %}

                                {% for b in membreBureau %}

                                {% if b.posteBureau == 24 %} 
                                <div class='card wid text-center col-md-3' style='flex-direction: row;margin:1%'>
                                 <i class="bi bi-person icon-muted cadre" style='background-color:gold;display:flex;align-items:center;'></i>
                                 <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %} 
                                {% endfor %}
                            </div> 
                            </div>

                            <div id='panelSecr' class ='panel panel-primary col-md-12' style='margin-top:2%;background-color: #F5F3F3;width: 100%;;display:none'>
                            <h6 class='titre_map'>Assesseurs :</h6>
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-wrap:wrap'>
                                {% for b in membreBureau %}

                                {% if b.posteBureau == 3 %} 
                                <div class='card wid text-center col-md-3' style='flex-direction: row;margin:1%'>
                                 <i class="bi bi-person-fill icon-muted cadre" style='background-color:gold;display:flex;align-items:center'></i>
                                 <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                                {% endif %} 
                                {% endfor %}
                            </div>
                            </div>

                            <div id='panelCons' class ='panel panel-primary col-md-12' style='margin-top:2%;background-color: #F5F3F3;width: 100%;;display:none'>
                            <h6 class='titre_map'>Trésoriers :</h6>
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-wrap:wrap'>
                                {% for b in membreBureau %}

                                {% if b.posteBureau == 4 or  b.posteBureau == 5 %} 
                                <div class="wid text-center col-md-3" style="align-items: center;margin: 1%;display:flex;flex-direction: column;">
                                {% if b.posteBureau == 4%}<span><strong>Trésorier</strong></span>{% else %}<span><strong>Trésorier Adjoint</strong></span>{% endif %}
                                 <div class='card wid text-center col-md-10' style='flex-direction: row;margin:1%'>
                                 <i class="bi bi-person-fill icon-muted cadre" style='background-color:gold;display:flex;align-items:center'></i>
                                 <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                        
                                </div>
                                {% endif %} 
                                {% endfor %}
                            </div> 
                            </div> 

                            <div id='panelAutr' class ='panel panel-primary col-md-12' style='margin-top:2%;background-color: #F5F3F3;width: 100%;;display:none'>
                            <h6 class='titre_map'>Secrétaires :</h6>
                            <div style='display:flex;justify-content: space-evenly;width:100%;flex-wrap:wrap'>
                                {% for b in membreBureau %}

                                {% if b.posteBureau == 6  or  b.posteBureau == 7 %} 
                                <div class="wid text-center col-md-3" style="align-items: center;margin: 1%;display:flex;flex-direction: column;">
                                {% if b.posteBureau == 6 %}<span><strong>Secrétaire</strong></span>{% else %}<span><strong>Secrétaire Adjoint</strong></span>{% endif %}
                                 <div class='card wid text-center col-md-10' style='flex-direction: row;margin:1%'>
                                 <i class="bi bi-person-fill icon-muted cadre" style='background-color:gold;display:flex;align-items:center'></i>
                                 <span class="pctext" style='padding:5%'> {{b.civilite}} {{b.nom}}  {{b.prenom}}</span>   
                                </div> 
                        
                                </div>
                                {% endif %} 
                                {% endfor %}
                            </div>
                            </div>  

                            
                        </div> #}
                    </div>
                    
                </div>
            </div>

        </div>
          
        </div>
    </div>

{% endblock %}
{% block js %}

    <script type="text/javascript">


        $("#Vice-Pr").on("click", function(e){
           $("#panelVice").css("display","block");
           $("#panelSecr").css("display","none");
           $("#panelCons").css("display","none");
           $("#panelAutr").css("display","none");


        });
        $("#Secr").on("click", function(e){
           $("#panelVice").css("display","none");
           $("#panelSecr").css("display","block");
           $("#panelCons").css("display","none");
           $("#panelAutr").css("display","none");


        });
        $("#Cons").on("click", function(e){
           $("#panelVice").css("display","none");
           $("#panelSecr").css("display","none");
           $("#panelCons").css("display","block");
           $("#panelAutr").css("display","none");


        });
        $("#Autr").on("click", function(e){
           $("#panelVice").css("display","none");
           $("#panelSecr").css("display","none");
           $("#panelCons").css("display","none");
           $("#panelAutr").css("display","block");


        });



    </script>  
{% endblock %}