{% load combo %}
<h2>Démarches en ligne</h2>

<p>Vous trouverez ci-dessous les démarches en ligne de Montpellier Méditerranée
Métropole mais aussi celles des différentes communes de la métropole.</p>

<!-- Agglo -->
{% for slug, categories in form_categories.items %}
{% if slug == 'agglo' %}
<div class="categories-{{ slug }} categories-list">
  <h3><a href="{{ categories.base_url }}tryauth">Démarches de la Métropole</a></h3>
  {% if categories.data %}
  <ul>
      {% for category in categories.data %}
      <li class="category-{{category.slug}}" data-keywords="{{category.keywords|join:' '}}">
        <a href="{{ category.url }}tryauth">{{ category.title }}</a>
        <ul>
          {% for form in category.forms %}
          <li {% if form.authentication_required %}class="required-authentication"{% endif %}
                  data-keywords="{{form.keywords|join:' '}}"><a href="{{form.url}}">{{form.title}}</a></li>
          {% endfor %}
        </ul>
      </li>
      {% endfor %}
  </ul>
  {% endif %}
</div>
  {% endif %}
{% endfor %}


{% if request.session.mellon_session.city.0 %}
<!-- Commune de l'utilisateur -->
{% for slug, categories in form_categories.items %}
{% with categories.variables|get:"ou-label"|default:categories.title as commune_name %}
{% if commune_name == request.session.mellon_session.city.0 %}
<div class="ma_commune categories-list">
  <h3><a href="{{ categories.base_url }}tryauth">Démarches de ma commune : {{ request.session.mellon_session.city.0 }}</a></h3>
  <ul class="clearfix">
    {% for category in categories.data %}
    <li class="category-{{category.slug}}" data-keywords="{{category.keywords|join:' '}}">
      <a href="{{ category.url }}tryauth">{{ category.title }}</a>
        <ul>
          {% for form in category.forms %}
          <li {% if form.authentication_required %}class="required-authentication"{% endif %}
                  data-keywords="{{form.keywords|join:' '}}"><a href="{{form.url}}">{{form.title}}</a></li>
          {% endfor %}
        </ul>
    </li>
    {% endfor %}
  </ul>
</div>
{% endif %}
{% endwith %}
{% endfor %}
{% endif %}

<div>
  <h3>Les démarches dans les autres communes</h3>
  <div>
    <p>
    <select onchange="displayCommune(this.value)">
      <option value="" selected>Choisissez une commune...</option>
      {% for categories in form_categories.values|dictsort:"title" %}
        {% with categories.variables|get:"ou-label"|default:categories.title as commune_name %}
          {% if commune_name != request.session.mellon_session.city.0  and categories.slug != 'agglo' %}
          <option value="{{ categories.slug }}">{{ commune_name }}</option>
          {% endif %}
        {% endwith %}
      {% endfor %}
    </select>
    </p>
  </div>
  <div>
  </div>
</div>

<!-- Blocs des communes -->
<div id="toutes-communes">
{% for slug, categories in form_categories.items %}
{% if categories.title != request.session.mellon_session.city.0  and slug != 'agglo' %}
<div id="categories-{{ slug }}" style="display: none;" class="categories-list">
  {% with categories.variables|get:"ou-label"|default:categories.title as commune_name %}
    <h3><a href="{{ categories.base_url }}tryauth">Démarches de {{ commune_name }}</a></h3>
  {% endwith %}
  {% if categories.data %}
  <ul class="clearfix">
      {% for category in categories.data %}
      <li class="category-{{category.slug}}" data-keywords="{{category.keywords|join:' '}}">
        <a href="{{ category.url }}tryauth">{{ category.title }}</a>
        <ul>
          {% for form in category.forms %}
          <li {% if form.authentication_required %}class="required-authentication"{% endif %}
                  data-keywords="{{form.keywords|join:' '}}"><a href="{{form.url}}">{{form.title}}</a></li>
          {% endfor %}
        </ul>
      </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>
