{% extends 'base.html' %}
{% block title %}Manage Officials{% endblock %}

{% block content %}

<div class="container py-5">

    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold text-success mb-0">
            Manage Officials
        </h3>

        <a href="{% url 'add_official' %}" class="btn btn-success">
            <i class="fas fa-plus me-1"></i>
            Add Official
        </a>
    </div>

    {% if officials %}
    <div class="card shadow-sm border-0">
        <div class="card-body">

            <table class="table align-middle">
                <thead class="table-light">
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th class="text-end">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for official in officials %}
                    <tr>
                        <td>{{ official.name }}</td>
                        <td>{{ official.get_position_display }}</td>
                        <td class="text-end">

                            <a href="{% url 'edit_official' official.id %}"
                               class="btn btn-sm btn-outline-primary">
                                Edit
                            </a>

                            <form action="{% url 'delete_official' official.id %}"
                                  method="post"
                                  class="d-inline">
                                {% csrf_token %}
                                <button type="submit"
                                        class="btn btn-sm btn-outline-danger">
                                    Delete
                                </button>
                            </form>

                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>

        </div>
    </div>
    {% else %}
        <div class="alert alert-info">
            No officials added yet.
        </div>
    {% endif %}

</div>

{% endblock %}