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

{%block content%}
<div class="school">
  <div class="champ">
    <h1>{{official}}</h1>
    <hr />
  </div>
  <div class="modalbody">
    <form
      action=""
      method="POST"
      class="form-ctrl glue"
      enctype="multipart/form-data"
    >
      {% csrf_token %}
      <div class="fields grid2">
        <div class="left">
          <h2>Official 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">
            <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>{{cform.date_of_birth}}
            </div>
          </div>

          <button type="submit" class="btn btn-primary width-100">
            Save official
          </button>
        </div>
      </div>
    </form>
  </div>
</div>
{% endblock %}