{% 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">Remove</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">
                        <form method="post" action="">
                        {% csrf_token %}
                            <button type="submit" class="btn btn-secondary btn-sm" name="remove-user">
                                <i class="material-icons">delete</i>
                            </button>
                            <input type="hidden" name="user_id" value="{{ faculty_member.pk }}" />
                        </form>
                    </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%;">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 %}