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

{%block content%}
<div class="schools">

  <div class="top flex">
    <h1>SCHOOLS</h1>
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Add school</a>
  </div>

  <div class="lo">
    <div class="official-list">
      <table id="myTable" class="display">
        <thead>
          <tr>
            <th>Name</th>
            <th>Athletes</th>
            <th>Country</th>
            <th>Edit</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {% for school in schools%}
          <tr>
            <td>
              <a href="{% url 'school' school.id%}"
                >{{school.name}}</a
              >
            </td>
            <td>{{ school.athlete_set.count }} Athletes</td>
            <td>{{ school.country }} </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">Modal title</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-control">
            {% csrf_token %} {{cform.as_p}}
            <button type="submit" class="btn btn-primary">Save changes</button>
          </form>
        </div>

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