{% extends 'base.html' %}
{% load static %}
{% block title %}
    {% trans "Calender Events" %}
{% endblock %}
{% block content %}
    <div class="row">
        <div class="table-responsive border-translucent">
            <table class="table table-sm fs-9">
                <thead>
                    <tr>
                        <th>{% trans "Customer" %}</th>
                        <th>{% trans "Service" %}</th>
                        <th>{% trans "Date" %}</th>
                        <th>{% trans "Start Time" %}</th>
                        <th>{% trans "End Time" %}</th>
                        <th>{% trans "Staff" %}</th>
                        <th>{% trans "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 %}">{%trans "view" %}</a>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
{% endblock %}