{% extends "dashboard/dashboard.html" %} {%load static%}
<!---->
{% block title %} {{school}}{% endblock %}
<!---->

{%block content%}
<div class="school">
  <div class="champ">

    <h1>{{school}}</h1>
    <hr>
  </div>
  <div class="top flex">
    <h2>athletes</h2>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Add athlete</a>
  </div>
  {% if messages %}
  <ul class="messages">
      {% for message in messages %}
      <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
      {% endfor %}
  </ul>
  {% endif %}
  <div class="lo">
    <div class="official-list">
      <table id="myTable" class="display">
        <thead>
          <tr>
            <th>Name</th>
            <th>Sport</th>
            <th>Gender</th>
                  <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {% for athlete in athletes %}
          <tr>
            <td>
              <a href="{% url 'athlete' athlete.id%}"
                >{{athlete.fname}} {{athlete.lname}}</a
              >
            </td>
            <td>{{athlete.sport}}</td>

            <td>{{athlete.gender}}</td>
            
            <td>
              <a href="" class="del"><i class="fa fa-pencil"></i>Edit</a>
            </td>
            <td>
              <a href="" class="del"><i class="fa fa-trash"></i>Delete</a>
            </td>
          </tr>

          {%endfor%}
        </tbody>
      </table>
    </div>
  </div>
  <div
    class="modal fade"
    id="exampleModal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="exampleModalLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">New Athlete</h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
            <form
            action=""
            method="POST"
            class="form-ctrl glue"
            enctype="multipart/form-data"
          >
            {% csrf_token %}
            <div class="fields grid2">
              <div class="left">
                <h2>Athlete Info</h2>
       
                <div class="field">
                  <label>{{cform.photo.label}}</label>
                  <div id="image-container">
                      {% if cform.instance.photo %}
                          <img src="{{ cform.instance.photo.url }}" id="image-preview" alt="Current Photo">
                      {% else %}
                          <img src="{% static 'img/logos.jpg'%}" id="image-preview" alt="No Photo">
                      {% endif %}
                  </div>
              </div>
              <div class="field">
                  <input type="file" name="photo" accept="image/*" id="id_photo" style="display: none;">
                  <input type="hidden" name="cropped_photo" id="cropped_photo">
              </div>
              <button type="button" id="crop-button" style="display: none;">Crop Image</button>
            </div>
        
              <div class="left">
                <div class="field-grid grid2">
                  <div class="field"><label>First Name</label>{{cform.fname}}</div>
           
                
                  <div class="field"><label>Last Name</label>{{cform.lname}}</div>
                  <div class="field"><label>LIN/ PASSPORT</label>{{cform.id_number}}</div>
               
                <div class="field-grid grid2">
                  <div class="field"><label>Sport</label>{{cform.sport}}</div>
                  <div class="field"><label>Gender</label>{{cform.gender}}</div>
                </div>
              
                
                  <div class="field">
                    <label for="date_of_birth">Date of Birth:</label>
                    <input
                      type="date"
                      id="id_date_of_birth"
                      name="date_of_birth"
                      class='form-control'
                      
                    />
                  </div>
     
                </div>
                
                <button type="submit" class="btn btn-primary width-100">Save athlete</button>
              </div>
            </div>
          </form>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-dismiss="modal">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}