{% extends 'base.html' %}
{% load static %}
{% block content %}
  <div class="row">
    <div class="table-responsive border-translucent">
      <table class="table table-sm fs-9">
        <thead>
          <tr>
            <th>Customer</th>
            <th>Service</th>
            <th>Date</th>
            <th>Start Time</th>
            <th>End Time</th>
            <th>Staff</th>
            <th>Status</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {% for appointment in appointments %}
            <tr>
              <td>{{ appointment.get_client_name }}</td>
              <td>{{ appointment.get_service }}</td>
              <td>{{ appointment.appointment_request.date|date:"Y-m-d" }}</td>
              <td>{{ appointment.appointment_request.start_time }}</td>
              <td>{{ appointment.appointment_request.end_time }}</td>
              <td>{{ appointment.get_staff_member_name }}</td>
              <td></td>
              <td>
                <a href="{% url 'appointment:display_appointment' appointment.id %}">view</a>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endblock %}