{% extends "base.html" %}
{% block content %}


<div class="row">
  <div class="col-md-6"><h1>Hackspace Members</h1></div>
  <div class="col-md-6">
<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="{% url 'members_status' 'all' %}">
      All users <span class="badge badge-default">{{ total_users }}</span></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="{% url 'members_status' 'registered' %}">
      All members <span class="badge badge-success">{{ total_members }}</span></a>
  </li>
</ul>
  </div>
</div>

<br />

<div id="members">
  <div class="card-deck">
    {% for member in members %}
    <div class="card">
      {% if member.image %}
        <img class="card-img-top img-fluid" src="{{ MEDIA_URL }}{{ member.image }}" alt="{{ member.name }}">
      {% endif %}
        <div class="card-block">
          {% if member.name %}
          <h4 class="card-title">{{ member.name }}</h4>
          {% else %}
          <h4 class="card-title">{{ member.username }}</h4>
          {% endif %}
          <p class="card-text">{{ member.users.description }}</p>
          <p class="card-text">{{ member.users.skills }}</p>
          <p class="card-text">{{ member.status }}</p>
          {% for group in member.groups.all %}
            {{ group.name }}
          {% endfor %}
        </div>
        <div class="card-block">
          <p class="card-text">{{ member.blurb }}</p>
        </div>
      </div>
      {% if forloop.counter|divisibleby:3 %}</div><div class="card-deck">{% endif %}
    {% endfor %}
  </div>
</div>

{% endblock %}