{% extends 'base.html' %}
{% load static %}

{% block content %}
<main class="app-main">
  
  <div class="app-content-header">
    <div class="container-fluid">
      <div class="row align-items-center">
        <div class="col-sm-6">
          <h3 class="mb-0">{{status_filter|default:"All Officials"}} List</h3>
        </div>
        <div class="col-sm-6 text-end">
          <ol class="breadcrumb float-sm-end">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Officials</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

  
  <div class="container-fluid mt-3">
    <form method="get" class="row g-3">
      <div class="col-md-4">
        <select name="status" class="form-select" onchange="this.form.submit()">
          <option value="">-- Filter by Status --</option>
          <option value="Approved" {% if request.GET.status == "Approved" %}selected{% endif %}>Approved</option>
          <option value="Unapproved" {% if request.GET.status == "Unapproved" %}selected{% endif %}>Unapproved</option>
          <option value="Rejected" {% if request.GET.status == "Rejected" %}selected{% endif %}>Rejected</option>
        </select>
      </div>
    </form>
  </div>

 
  <div class="app-content mt-4">
    <div class="container-fluid">
      <div class="row">
        {% for official in official_list %}
        <div class="col-md-3 mb-4">
          <div class="card h-100">
            <img class="card-img-top" src="{{ official.passport_photo.url }}" alt="Official photo">
            <div class="card-body">
              <h5 class="card-title">Position: {{ official.designation }}</h5>
            </div>
            <ul class="list-group list-group-flush">
              <li class="list-group-item">Name: {{ official.name }}</li>
              <li class="list-group-item">Status: {{ official.status }}</li>
            </ul>
            <div class="card-footer">
              <div class="d-grid gap-2">
                <a href="{% url 'official_detail' official.id %}" class="btn btn-primary btn-lg">
                  {% if request.GET.type == "official" %}View Officials{% else %}View{% endif %}
                </a>
              </div>
            </div>
          </div>
        </div>
        {% empty %}
        <div class="alert alert-info" role="alert">
          No officials found for the selected status.
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</main>
{% endblock %}