
 {% load widget_tweaks %} 
 {% load static %}
<!DOCTYPE html>
<html>
  <head>
    <title>Club Registration - Nigeria Women National League</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
     <link rel="icon" type="image/png" href="{% static './assets/img/favicon.ico' %}" />
    
  </head>
  <body>

<div class="container py-5">
  {% if messages %}
  {% 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 %}
{% endif %}
  <div class="row justify-content-center">
    <div class="col-lg-10">
      <div class="bg-white p-5 shadow rounded">
        <h2 class="text-center text-primary mb-4">Club Registration Portal</h2>
        <p class="text-center text-muted mb-5">Please fill out the form below to register your football club with the league.</p>

        <form method="POST" enctype="multipart/form-data">
          {% csrf_token %}

          <div class="row mb-4">
            <div class="col-md-6">
              <label class="form-label">Name of Club</label>
              <input type="text" class="form-control" name="club_name"  placeholder="Enter club name">
            </div>
            <div class="col-md-6">
              <label class="form-label">Club Division</label>
              <select name="division" class="form-control" required>
                <option value="">Select Option</option>
                <option value="Championship">Championship</option>
                <option value="Premiership">Premiership</option>
              </select>
            </div>
          </div>

          <div class="row mb-4">
            <div class="col-md-6">
              <label class="form-label">Club Foundation Date</label>
              <input type="date" class="form-control" name="foundation_date">
            </div>
            <div class="col-md-6">
              <label class="form-label">State Football Association</label>
              <input type="text" class="form-control" name="state_fa" placeholder="Enter state FA">
            </div>
          </div>

          <div class="row mb-4">
            <div class="col-md-6">
              <label class="form-label">Club Contact Person</label>
              <input type="text" class="form-control" name="contact_person" placeholder="Full name">
            </div>
            <div class="col-md-6">
              <label class="form-label">Telephone No</label>
              <input type="tel" class="form-control" name="telephone" placeholder="e.g. 08012345678">
            </div>
          </div>

          <div class="row mb-4">
            <div class="col-md-4">
              <label class="form-label">Email Address</label>
              <input type="email" class="form-control" name="email" placeholder="Enter email address">
            </div>
            <div class="col-md-4">
              <label class="form-label">Password</label>
              <input type="password" class="form-control" name="password" placeholder="Enter password">
            </div>
            <div class="col-md-4">
              <label class="form-label">Username</label>
              <input type="text" class="form-control" name="username" placeholder="Enter username">
            </div>

          </div>

          <div class="mb-4">
            <label class="form-label">Home Match Venue</label>
            <input type="text" class="form-control" name="home_venue" placeholder="Enter stadium name">
          </div>

          <h5 class="mt-5 mb-3 text-secondary">First Choice Jersey Colour</h5>
          <div class="row mb-4">
            <div class="col-md-4"><input type="text" class="form-control" name="first_jersey_shirt" placeholder="Shirt"></div>
            <div class="col-md-4"><input type="text" class="form-control" name="first_jersey_short" placeholder="Short"></div>
            <div class="col-md-4"><input type="text" class="form-control" name="first_jersey_hose" placeholder="Hose"></div>
          </div>

          <h5 class="mb-3 text-secondary">Second Choice Jersey Colour</h5>
          <div class="row mb-4">
            <div class="col-md-4"><input type="text" class="form-control" name="second_jersey_shirt" placeholder="Shirt"></div>
            <div class="col-md-4"><input type="text" class="form-control" name="second_jersey_short" placeholder="Short"></div>
            <div class="col-md-4"><input type="text" class="form-control" name="second_jersey_hose" placeholder="Hose"></div>
          </div>

          <h5 class="mt-5 mb-3 text-secondary">Required Documents</h5>
          
          <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">State FA Affiliation</label>
            <input type="file" class="form-control" name="state_fa_affiliation">
          </div>
          <div class="col-md-6">
            <label class="form-label">Receipt of Payment of Registration</label>
            <input type="file" class="form-control" name="registration_receipt">
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">CAC Certificate</label>
            <input type="file" class="form-control" name="cac_certificate">
          </div>
          <div class="col-md-6">
            <label class="form-label">Audited Annual Financial Statement</label>
            <input type="file" class="form-control" name="audited_financials">
          </div>
        </div>

        <div class="row mb-3">
          <div class="col-md-6">
            <label class="form-label">Comprehensive Insurance</label>
            <input type="file" class="form-control" name="insurance_document">
          </div>
          <div class="col-md-6">
            <label class="form-label">Stadium for Home Matches</label>
            <input type="file" class="form-control" name="stadium_document">
          </div>
        </div>

        <div class=" mb-3">
            <label class="form-label">Club Logo</label>
            <input type="file" class="form-control" name="club_logo">
        </div>


          <button type="submit" class="btn btn-success w-100 mt-4">Submit Registration</button>
        </form>
      </div>
    </div>
  </div>
</div>
</body>
</html>

