{% extends "generic-base.html" %}

    {% block title %}IMPACT - Department{% endblock %}

{% block content %}

    <main role="main" class="content">
	<div class="container">

    <div class="form-group">
    <div class="card generic-card-card">
        <div class="card-header generic-card-header">
            <h4>{{ faculty.faculty_name }}</h4>
        </div>
        <table class="table table-bordered table-container mb-0">
            <thead class="generic-table-card">
            <tr>
                <th style="width: 90%;">Department Member</th>
                <th style="width: 10%; text-align: center">Delete</th>
            </tr>

            </thead>
            <tbody>
            {% for faculty_member in faculty_member_list %}

                <tr>
                    <td style="width: 90%;vertical-align: middle;">{{ faculty_member.first_name }} {{ faculty_member.last_name }}</td>
                    <td style="width: 10%;vertical-align: middle;" align="center">
                        <a href="{% url 'schools:delete-department-user' faculty_member.id faculty.id %}"
                            class="btn btn-secondary btn-sm" role="button"><i class="material-icons">delete</i>
                        </a>
                    </td>

                </tr>
            {% empty %}
                <tr>
                <td style="width: 100%;vertical-align: middle;">No staff have been added to this faculty</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        <table class="table table-bordered table-container mb-0">
            <thead class="generic-table-card">
            <tr>
                <th style="width: 90%;">Invite Staff</th>
                <th style="width: 10%;text-align: center">Invite</th>
            </tr>

            </thead>
            <tbody>
                <tr>
                    <td style="width: 90%; vertical-align: middle">Invite other staff to sign up to this Impact ACT
                        {{ faculty.faculty_name }} Department account</td>
                    <td style="width: 10%; vertical-align: middle" align="center">
                    <a href="{% url 'schools:invite-users-department' faculty.pk %}"
                        class="btn btn-secondary btn-sm" role="button"><i class="material-icons">person_add</i>
                    </a>
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-bordered table-container mb-0">
            <thead class="generic-table-card">
            <tr>
                <th style="width: 90%;">Other Actions</th>
                <th style="width: 10%;text-align: center">Actions</th>
            </tr>

            </thead>
            <tbody>
                <tr>
                    <td style="width: 90%;vertical-align: middle;">
                        Edit the name of this department
                    </td>
                    <td style="width: 10%;vertical-align: middle;" align="center">
                        <a href="{% url 'schools:edit-department' faculty.id %}"
                            class="btn btn-secondary btn-sm" role="button"><i class="material-icons">edit</i>
                        </a>
                    </td>
                </tr>
                <tr>
                    <td style="width: 90%;vertical-align: middle;">
                        Delete this department
                    </td>
                    <td style="width: 10%;vertical-align: middle;" align="center">
                        <a href="{% url 'schools:delete-department' faculty.id %}"
                            class="btn btn-warning btn-sm" role="button"><i class="material-icons">delete</i>
                        </a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    </div>

    <div class="form-group">
        <a href="{% url 'schools:manage-departments' %}" class="btn btn-primary" role="button">Done</a>
    </div>

    </div>


    </main>

{% endblock %}