{% extends "basic/base_template.html" %}
{% block pageName %}
 Edit Rk 
{% endblock pageName %} 

{% block content %}

<!--begin::Form Validation-->
<div class="card card-info card-outline mb-4">
    <!--begin::Header-->
    <!--end::Header-->
    <!--begin::Form-->
    <form action="{% url 'update_rank_setting' rank.id %}" method="post" class="needs-validation" novalidate>
      {% csrf_token %}
      
      <!--begin::Body-->
      <div class="card-body">
        <!--begin::Row-->
        <div class="row g-3">
          <!--start::Col-->
          <div class="col-md-12">
            <label for="memberType" class="form-label">Member Type</label>
            <select class="form-select" id="memberType" name="memberType" required>
              <option selected disabled value="">Choose...</option>
              {% for memberType in memberTypes %}
              {% if memberType.name == "offr" %}
              <option {% if memberType.id == rank.memberType.id %} selected {% endif %} value="{{ memberType.id }}">{{ memberType.showName }}</option>
              {% endif %}
              {% endfor %}
            </select>
            <div class="invalid-feedback">Please select a Member Type.</div>
          </div>
          <!--end::Col-->
          <!--start::Col-->
          <div class="col-md-12">
            <label for="member_status" class="form-label">Member Status</label>
            <select class="form-select" id="member_status" name="member_status" required>
              <option selected disabled value="">Choose...</option>
              {% for i in member_statuses %}
              <option {% if i.id == rank.i.id %} selected {% endif %} value="{{ i.id }}">{{ i.name }}</option>
              {% endfor %}
            </select>
            <div class="invalid-feedback">Please select a Member Status.</div>
          </div>
          <!--end::Col-->
          <div class="col-md-12">
            <label for="name" class="form-label"
              >Rk Name</label
            >
            <div class="input-group has-validation">
              <input
                type="text"
                class="form-control"
                id="name"
                name= "name"
                aria-describedby="inputGroupPrepend"
                value="{{ rank.name }}"
                required
              />
              <div class="invalid-feedback">Please provide a valid Name.</div>
            </div>
          </div>
          <!--begin::Col-->
          <!--end::Col-->
        </div>
        <!--end::Row-->
      </div>
      <!--end::Body-->
      <!--begin::Footer-->
      <div class="card-footer">
        <button class="btn btn-primary" type="submit">Submit form</button>
      </div>
      <!--end::Footer-->
    </form>
    <!--end::Form-->
    <!--begin::JavaScript-->
    <script>
      // Example starter JavaScript for disabling form submissions if there are invalid fields
      (() => {
        "use strict";
  
        // Fetch all the forms we want to apply custom Bootstrap validation styles to
        const forms = document.querySelectorAll(".needs-validation");
  
        // Loop over them and prevent submission
        Array.from(forms).forEach((form) => {
          form.addEventListener(
            "submit",
            (event) => {
              if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
              }
  
              form.classList.add("was-validated");
            },
            false
          );
        });
      })();
    </script>
    <!--end::JavaScript-->
  </div>
  <!--end::Form Validation-->


{% endblock content %}