{% 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">Players List</li>
          </ol>
        </div>
      </div>
    </div>
  </div>

 

  
  <div class="container-fluid mt-3">
          {% if messages %}
          <div class=" mb-5">
            {% for message in messages %}
              <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            {% endfor %}
          </div>
        {% endif %}

    <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">
        {% if players %}
            {% for player in players %}
            <div class="col-md-3">
                <div class="card">
                    <img class="card-img-top" src="{{player.passport_photo.url}}" alt="Card image cap" height="200">
                    <div class="card-body">
                    <h5 class="card-title">
                      Club Status:
                      {% if player.status == "Approved" %}
                        <span class="badge bg-success">{{ player.status }}</span>
                      {% elif player.status == "Pending" %}
                        <span class="badge bg-warning text-dark">{{ player.status }}</span>
                      {% elif player.status == "Rejected" %}
                        <span class="badge bg-danger">{{ player.status }}</span>
                      {% else %}
                        <span class="badge bg-secondary">{{ player.status }}</span>
                      {% endif %}
                    </h5>

                    </div>
                    <ul class="list-group list-group-flush">
                    <li class="list-group-item">Name: {{player.surname}} {{player.other_names}}</li>
                    <li class="list-group-item">Jersey NO: {{player.jersey_number}}</li>
                    <li class="list-group-item">Club: {{player.club.club_name}}</li>
                    
                    </ul>

                    {% comment %} {% if player.status == "Rejected" or player.status == "Unapproved" %} {% endcomment %}
                    <div class="card-footer">
                    <div class="d-grid gap-2">
                        <a href="{% url "player_details" player.id %}" class="btn btn-warning btn-lg">See Details</a>
                    </div>
                  </div>
                  {% comment %} {% endif %} {% endcomment %}
                </div>
            </div>
            {% endfor %} 
            
            {% else %}
            <div class="alert alert-info" role="alert">
                No players found for the selected status.
            </div>
            {% endif %}

        </div>
    </div>
  </div>
</main>
{% endblock %}