{% extends "base.html" %}

{% block content %}
    <div class="row">
        <div class="col s4 offset-s4 white">
            <div class="row">
                <div class="title center"><h1>Directory</h1></div>
            </div>
            <div class="row">
                <ul class="collapsible popout" data-collapsible="accordion">
                    {% for emp in users %}
                    <li>
                        <div class="collapsible-header"><i class="material-icons prefix">account_circle</i>{{ emp.full_name }}</div>
                        <div class="collapsible-body">
                            <ul class="collection">
                                <li class="collection-item">
                                    <i class="material-icons">phone_android</i>
                                    <span class="title">Phone</span>
                                    <p>{{ emp.phone_num }}</p>
                                </li>
                                <li class="collection-item">
                                    <i class="material-icons">email</i>
                                    <span class="title">Email</span>
                                    <p>{{ emp.email }}</p>
                                </li>
                            </ul>
                        </div>
                    </li>
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
{% endblock %}