{% extends 'main/base.html' %}

{% block content %}
{% load static %}
{% load static %}
<link rel="stylesheet" href="{% static 'css/ui-updates.css' %}">



<div class="container">
	<h2 class="mb-1">Hostel Staff Information</h2>
	  <div class="row">
			<table class="table table-striped table-dark">
  <thead>
    <tr>
      <th scope="col">Staff Name</th>
      <th scope="col">ID</th>
      <th scope="col">Role / Work</th>
      <th scope="col">Date Joined</th>
      <th scope="col">Phone No.</th>
      <th scope="col">Address</th>
      <th scope="col">Action</th>
    </tr>
  </thead>
  <tbody>
    {% for profile in profiles %}
    <tr>
      <td>{{profile.get_fullname}}</td>
      <td>{{profile.id_number}}</td>
      <td>{{profile.role}}</td>
      <td>{{profile.created_at}}</td>
      <td>{{profile.phone}}</td>
      <td>{{profile.address}}</td>
      <td><a href="{% url 'main:edit_hostel_staff' profile.id %}" class="btn btn-secondary">Edit Staff</a></td>
    </tr>
  {% endfor %}
  </tbody>
</table>

		</div>
</div>

{% endblock %}