{% extends "base.html" %}

{% block title %}Match Squad - HKFC Men's C Team{% endblock %}

{% block content %}
<!-- Page Header -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-body text-center">
        <h1 class="card-title">
          <i class="fas fa-users text-success me-2"></i>
          Current Match Squad
        </h1>
        <p class="lead text-muted">Manage the current match squad players</p>
      </div>
    </div>
  </div>
</div>

<!-- Action Buttons -->
<div class="row mb-4">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-primary text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-bolt me-2"></i>Squad Management
        </h5>
      </div>
      <div class="card-body">
        <div class="d-flex flex-wrap gap-2">
          <a href="/admin/squad" class="btn btn-success">
            <i class="fas fa-plus-circle me-2"></i>Add More Players
          </a>
          <a href="/admin/squad/list" class="btn btn-info">
            <i class="fas fa-list me-2"></i>Refresh Squad List
          </a>
          <a href="/admin/squad/history" class="btn btn-outline-secondary">
            <i class="fas fa-history me-2"></i>Squad History
          </a>
          <a href="/admin/squad/reset" class="btn btn-warning" data-confirm="Are you sure you want to reset the squad? This will archive the current squad and clear it for the next match.">
            <i class="fas fa-refresh me-2"></i>Reset Squad
          </a>
          <a href="/admin" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Admin
          </a>
          <a href="/" class="btn btn-outline-danger">
            <i class="fas fa-home me-2"></i>Home
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Squad Table -->
<div class="row">
  <div class="col-12">
    <div class="card">
      <div class="card-header bg-success text-white">
        <h5 class="card-title mb-0">
          <i class="fas fa-table me-2"></i>Squad Players
        </h5>
        <small class="opacity-75">Current players selected for the match</small>
      </div>
      <div class="card-body p-0">
        {{ table }}
      </div>
    </div>
  </div>
</div>
{% endblock %}