{% extends 'layout.twig' %}

{% block title %}
  Ğ1-Marché - {{ region.name }} {% if page > 1 %} - Page {{ page }}{% endif %}
{% endblock %}
{% block body %}
  <style>
    .breadcrumb {
      font-size: 1rem;
    }
    .breadcrumbs {
       grid-area: breadcrumbs;
       grid-column: 0 / 1;
       justify-items: left;
    }
    .main {
       grid-area: main;
       /*justify-self: start;
       align-self: start;*/
       grid-column: 1 / 2;
    }
    .sidebar {
       grid-area: sidebar;
    }
    .footer {
       grid-area: footer;
    }
  </style>


      <!-- Fil d'Ariane -->
      <div class="breadcrumbs" >
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ gmarchePrefix }}">France</a></li>
            <li class="breadcrumb-item active">{{ region.name }}</li>
          </ol>
        </nav>
      </div>
      <sidebar class="sidebar">

      </sidebar>
      <article class="main">
          <div class="container">
            <img src="\images\logo_region.png" style="background-color: burlywood;" />
          </div>
          {% if region.name == 'Ile-de-France' %}
            <script type="text/javascript">
              $('.fond').css('background-image', "url('/images/ile-de-france.jpg')");
            </script>
          {%  endif %}


          <div class="row card" style="width: 17rem;margin-left: 1rem;">
            <div class="container">
              <div class="label" style="background-color: white;display:inline-block;padding-top:0.3rem;">
                <h5>Antennes {{ region.name }} :</h5>
              </div>
            </div>
            <ul class="list-group list-group-flush">
              {% for antenne in antennes %}
                 <a style="color:black;" href="{{ path('product.ville', {region: region.slug, slug:antenne.slug} ) }}" title="{{ antenne.name }}">
                   <li class="liste_antennes list-group-item" style="padding: .2rem 1.25rem;">
                     {{ antenne.name }}
                   </li>
                 </a>

              {%  endfor %}
            </ul>
          </div>
          <footer class="footer">
            <!-- if antennes
               paginate(antennes, 'gmarche.antenne', {slug: slug})
             endif -->
          </footer>
      </article>

{% endblock %}