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


li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

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

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 18px;
  color: #106eea
}

  @media screen and (max-width: 600px) {
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: 0.3s;
  font-size: 12px;
  color: #106eea
}

  }

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

</style>


    <div class="actualites_title">
        <br/>
        <div class="text-center">
            <img src="{{ asset("/assets/Backoffice/images/logo-fcpm.png") }}" />
            <h3 class="title-page" style="color:white;">Commissions</h3>
        </div>
    </div>
    
 
    <div class="row block_ac"  style='width:100%;margin:0%'>
        <div class="col-md-12">

            <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 - COMMISSIONS</h3>
                </div>
            </div>

            <div style='box-shadow: 0px 0px 3px 1px rgba(16,110,234,0.19);text-align:center;'>
                <div class="panel-body text-sm" style='background:#F5F3F3'>
                    <img style='width:160px;height:160px' src="{{ asset("/assets/Backoffice/images/logoFCPM.png") }}" />
                </div>

                <div style='padding: 1% 5%;background:#F5F3F3'>
                    <div class="tab" style='display: flex;justify-content: space-between;overflow:auto;flex-wrap: wrap;background: aliceblue;'>
                    {% for c in cellules %}
                    <button class="tablinks" style='border:1px solid lightgrey;width: 50%;font-size:12px;' onclick="openCity(event, {{ c["cellule"].id }})"><strong>{{ c["cellule"].titreFr }}</strong></button>
                    {% endfor %}
                    </div>

                    {% for c in cellules %}
                    <div id="{{ c["cellule"].id }}" class="tabcontent" style='text-align: center;background:white'>
                                    {# {% if c["cellule"].logo != "" %}
                                        <img src="{{ asset(c["cellule"].logo) }}" style="width: 100px;height: 100px;border-radius: 100%;" />
                                    {% endif %} #}
                                    <p>
                                        {{ c["cellule"].textFr|raw }}
                                    </p>

                                    <h6>Présidant </h6>
                                    <div class="col-md-12" style='clear:both;color: inherit;padding: 15px 20px 20px 20px;display: flex;justify-content: center;'>
                                    <ul class="mailbox-attachments clearfix" style="list-style: none;padding:0%">

                                        {% for m in c["membres"] %}
                                            {% if m.etat == 1 %}
                                            <li style='float: left;width: 100px;border: 1px solid #eee;'>                                                                      
                                            <span style='text-align: center;font-size: 45px;color: #666;padding: 10px;display:block'>
                                            <i class="fa fa-user"></i>
                                            </span>
                                            <div class="text-center" style='padding: 10px;background: #f4f4f4;display:block'>
                                                {{ m.nom }} {{ m.prenom }}
                                            </div>  
                                            {% endif %}  
                                        {% endfor %}
                                    </ul>
                                    </div>



                                    <h6>Liste des membres </h6>
                                    <div style='clear:both,background-color: #ffffff;color: inherit;padding: 15px 20px 20px 20px;border-color: #ff0e37;border-image: none;border-style: solid solid none;border-width: 1px 0;'>
                                    <ul class="mailbox-attachments clearfix" style="list-style: none;">

                                        {% for m in c["membres"] %}
                                            {% if m.etat == 2 %}
                                            <li style='float: left;width: 100px;border: 1px solid #eee;margin-bottom: 10px;margin-right: 10px;'>                                                                      
                                            <span style='text-align: center;font-size: 45px;color: #666;padding: 10px;display:block'>
                                            <i class="fa fa-user"></i>
                                            </span>
                                            <div class="text-center" style='padding: 10px;background: #f4f4f4;display:block'>
                                                {{ m.nom }} {{ m.prenom }}
                                            </div>    
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                    </div>
                                </div>
                                {% endfor %}

                    </div>

                </div>

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

{% block js %}

    <script type="text/javascript">

      function openCity(evt, cityName) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablinks");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" active", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " active";
            }


    </script>
{% endblock %}