{% extends "kfetcms/base.html" %}
{% load wagtailcore_tags %}
{% load wagtailimages_tags %}

{% block block1-content %}

{% for group_block in page.team_groups.all %}
<h3>{{ group_block.title }}</h3>
<div>
  {{ group_block.content|richtext }}
</div>

{% with members=group_block.group.members.all %}
{% with len=members|length %}

{% if len > 0 %}
<div class="team-group row">

  {% if len == 2 %}
  <div class="visible-sm col-sm-3"></div>
  {% endif %}

  {% for member in members %}
  <div class="col-xs-6 {% if len == 1 %}col-sm-4 col-sm-offset-4{% elif len == 3 %}col-sm-4{% elif len == 2%}col-sm-3 col-md-6{% else %}col-sm-3 col-md-4 col-lg-3{% endif %} {% if group_block.show_only != None and forloop.counter0 >= group_block.show_only %}member-more{% endif %}">
    <div class="team-member thumbnail text-center">
      {% image member.photo max-200x500 %}
      <div class="infos">
        <b>{{ member.get_full_name }}</b>
        <br>
        {% if member.nick_name %}
        <i>alias</i> {{ member.nick_name }}
        {% endif %}
      </div>
    </div>
  </div>
  {% endfor %}

  {% if group_block.show_only != None and len > group_block.show_only %}
  <div class="col-xs-12 col-btn text-center">
    <button class="btn btn-primary btn-lg more">
      {% if group_block.show_only %}
        Y'en a plus !
      {% else %}
        Les voir
      {% endif %}
    </button>
  </div>
  {% endif %}

</div>
{% endif %}

{% endwith %}
{% endwith %}

{% endfor %}

<script type="text/javascript">
$( function() {
    $('.more').click( function() {
        $(this).closest('.col-btn').hide();
        $(this).closest('.team-group').children('.member-more').show();
    });
});
</script>

{% endblock %}