{% extends 'base.html' %} {% load static %} {% block content %}
<!--end::Sidebar-->
<!--begin::App Main-->
<main class="app-main">
  <!--begin::App Content Header-->
  <div class="app-content-header">
    <!--begin::Container-->
    <div class="container-fluid">
      <!--begin::Row-->
      <div class="row">
        <div class="col-sm-6"><h3 class="mb-0">{{status_filter}} Official</h3></div>
        <div class="col-sm-6">
          <ol class="breadcrumb float-sm-end">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Official</li>
          </ol>
        </div>
      </div>
      <!--end::Row-->
    </div>
    <!--end::Container-->
  </div>
  <!--end::App Content Header-->
  <!--begin::App Content-->
  <div class="app-content">
    <!--begin::Container-->
    <div class="container-fluid">
      {% if official_list %}
      <div class="row">
        {% for official in official_list  %}
        <div class="col-md-3">
          <div class="card">
            <img
              class="card-img-top"
              src="{{ official.passport_photo.url }}"
              alt="Card image cap"
            />
            <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>
            </ul>
            <div class="card-footer">
              <div class="d-grid gap-2">
                <a href="#" class="btn btn-primary btn-lg">View</a>
              </div>
            </div>
          </div>
        </div>
        {% endfor  %}
      </div>
      {% else %}
      <div class="alert alert-info" role="alert">
        No officials found for the selected status.
      </div>
      {% endif %}

      <!--end::Row-->
    </div>
    <!--end::Container-->
  </div>
  <!--end::App Content-->
</main>
<!--end::App Main-->
<!--begin::Footer-->

{% endblock content %}