{% extends "store/base.html" %}
{% load static %}
{% load render_table from django_tables2 %}
{% load querystring from django_tables2 %}

{% block title %}Staff{% endblock title %}

{% block content %}
<div class="container p-5">
    <style>
        .table th, .table td {
            text-align: center;
        }
      </style>
    <div class="d-flex justify-content-between mb-3">
        <a class="btn btn-success btn-sm" href="{% url 'profile-create' %}">
            <i class="fa-solid fa-user-plus me-2"></i>Add Staff
        </a>
        <a class="btn btn-success btn-sm" href="{% querystring '_export'='xlsx' %}">
            <i class="fa-solid fa-download me-2"></i>Export to Excel
        </a>
    </div>
    <table class="table table-sm table-bordered table-striped">
        <thead class="thead-light">
            <tr>
                <th scope="col">Id <i class="fa-solid fa-sort"></i></th>
                <th scope="col">Profile Image</th>
                <th scope="col">Username <i class="fa-solid fa-sort"></i></th>
                <th scope="col">Phone Number</th>
                <th scope="col">Status <i class="fa-solid fa-sort"></i></th>
                <th scope="col">Role <i class="fa-solid fa-sort"></i></th>
                {% if user.profile.role == 'AD' or user.profile.role == 'EX' %}
                <th scope="col">Action</th>
                {% endif %}
            </tr>
        </thead>
        <tbody>
            {% for profile in profiles %}
            <tr>
                <th scope="row">{{ profile.id }}</th>
                <td>
                    <img alt="Profile Image" src="{{ profile.profile_picture.url }}" class="avatar avatar-sm rounded-circle">
                </td>
                <td>{{ profile.user.username }}</td>
                <td>{{ profile.telephone }}</td>
                <td>
                    {% if profile.status == 'A' %}
                    <span class="badge bg-success text-light">Active</span>
                    {% elif profile.status == 'OL' %}
                    <span class="badge bg-warning text-dark">On Leave</span>
                    {% else %}
                    <span class="badge bg-danger text-light">Inactive</span>
                    {% endif %}
                </td>
                <td>
                    {% if profile.role == 'AD' %}
                    Admin
                    {% elif profile.role == 'EX' %}
                    Executive
                    {% else %}
                    Operative
                    {% endif %}
                </td>
                <td>
                    {% if user.profile.role == 'AD' or user.profile.role == 'EX' %}
                    <a class="text-info" href="{% url 'profile-update' profile.id %}">
                        <i class="fa-solid fa-pen"></i>
                    </a>
                    {% endif %}
                    {% if user.profile.role == 'AD' %}
                    <a class="text-danger float-end" href="{% url 'profile-delete' profile.id %}">
                        <i class="fa-solid fa-trash"></i>
                    </a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}