{% extends 'base.html' %}
{% block content %}
<div class="container-fluid">
    <div class="row">
      <div class="col-md-2 side">
        {% include "sidenav.html" %}
      </div>
      <div class="col-md-10 col-md-offset-2 main">
        {% include "appnav.html" %}
        <div class="files-header">
          <h1 class="text-info">Contacts</h1>
        </div>
        <div class="content-main">
            <div class="container-fluid">
                {% for contact in contacts %}
                    {% if forloop.counter0|divisibleby:3 %}
                        <div class="clearfix"></div>
                    {% endif %}
                    <div class="col-md-4 file-row">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="material-icons valign-mid">person_pin</i>{{contact.firstname}}</h3>
                            </div>
                            <div class="panel-body">
                                {% for number in contact.tel %}
                                <div>
                                    <b>{{number.type}}</b> : {{number.number}}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
      </div>
    </div>
</div>
{% endblock %}