<h2>Démarches en ligne</h2>
<p class="chapeau">Démarches en ligne de Montpellier Méditerranée Métropole, mais aussi celles des Communes.</p>
<!-- Agglo -->
{% for slug, categories in form_categories.iteritems %}
{% if slug == 'agglo' %}
<div class="categories-{{ slug }}">
  <h3 class="aq-catgr-plg-title"><a href="{{ categories.base_url }}auth">Démarches de la Métropole</a></h3>
  {% if categories.data %}
  <ul class="aq-forms-plg-listing" {% if categories.data.data|length <= 1 %}style="-moz-column-count: 1; -webkit-column-count: 1; column-count: 1"{% endif %}>
      {% for category in categories.data.data %}
      <li class="aq-forms-plg-item">
        <a href="{{ category.url }}tryauth" class="aq-forms-plg-link">{{ category.title }}</a>
      </li>
      {% endfor %}
  </ul>
  {% endif %}
</div>
  {% endif %}
{% endfor %}


{% if request.session.mellon_session.city.0 %}
<!-- Commune de l'utilisateur -->
{% for slug, categories in form_categories.iteritems %}
{% if categories.title == request.session.mellon_session.city.0 %}
<div class="ma_commune">
  <h3 class="aq-catgr-plg-title"><a href="{{ categories.base_url }}auth">Démarches de ma commune : {{ request.session.mellon_session.city.0 }}</a></h3>
  <ul class="aq-forms-plg-listing" {% if categories.data.data|length <= 1 %}style="-moz-column-count: 1; -webkit-column-count: 1; column-count: 1"{% endif %}>
    {% for category in categories.data.data %}
    <li class="aq-forms-plg-item">
      <a href="{{ category.url }}tryauth" class="aq-forms-plg-link">{{ category.title }}</a>
    </li>
    {% endfor %}
  </ul>
</div>
{% endif %}
{% endfor %}
{% endif %}

<!-- Selecteur des communes  -->
<div class="aq-catgr-plg">
  <h3 class="aq-catgr-plg-title">Les démarches dans les autres communes</h3>
  <div class="aq-catgr-plg-selector-container">
    <p>
    <select onchange="displayCommune(this.value)">
      <option value="" selected>Choisissez une commune...</option>
      {% for slug, categories in form_categories.iteritems %}
      {% if categories.title != request.session.mellon_session.city.0  and slug != 'agglo' %}
      <option value="{{ slug }}">{{ categories.title }}</option>
      {% endif %}
      {% endfor %}
    </select>
    </p>
  </div>
  <div class="aq-catgr-plg-selector-container">
  </div>
</div>

<!-- Blocs des communes -->
<div id="toutes-communes">
{% for slug, categories in form_categories.iteritems %}
{% if categories.title != request.session.mellon_session.city.0  and slug != 'agglo' %}
<div id="categories-{{ slug }}" style="display: none;">
  <h3 class="aq-catgr-plg-title"><a href="{{ categories.base_url }}auth">Démarches de {{ categories.title }}</a></h3>
  {% if categories.data %}
  <ul class="aq-forms-plg-listing" {% if categories.data.data|length <= 1 %}style="-moz-column-count: 1; -webkit-column-count: 1; column-count: 1"{% endif %}>
      {% for category in categories.data.data %}
      <li class="aq-forms-plg-item">
        <a href="{{ category.url }}tryauth" class="aq-forms-plg-link">{{ category.title }}</a>
      </li>
      {% endfor %}
  </ul>
  {% endif %}
</div>
  {% endif %}
{% endfor %}
</div>

<script type="text/javascript">
  function displayCommune(slug) {
      var communes = document.getElementById('toutes-communes').children;
      for (var i = 0; i < communes.length; i++) {
          commune = communes[i];
          if (commune.id == 'categories-'+slug) {
              commune.style['display'] = "block";
          } else {
              commune.style['display'] = "none";
          }
      }
  }
</script>
