{% load wagtailcore_tags wagtailimages_tags %}


{% with groupteam=value len=value.members|length %}

<div class="team-group row">

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

  {% for member in groupteam.members %}
  <div class="
      {% if len == 1 %}
        col-xs-12
      {% else %}
        col-xs-6
        {% if 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 %}
      {% endif %}
      {% if groupteam.show_only != None and forloop.counter0 >= groupteam.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 groupteam.show_only != None and len > groupteam.show_only %}
  <div class="col-xs-12 col-btn text-center">
    <button class="btn btn-primary btn-lg more">
      {% if groupteam.show_only %}
        Y'en a plus !
      {% else %}
        Les voir
      {% endif %}
    </button>
  </div>
  {% endif %}

</div>

{% endwith %}

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