{% extends "basic/base_template.html" %}

{% block pageName %}
Add Special Quality Information 
{% 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 'create_special_quality_info' member.id %}"
    method="post"
    class="needs-validation"
    novalidate
  >
    {% csrf_token %}
    <!--begin::Body-->
    <div class="card-body">
      <!--begin::Row-->
      <div class="row g-3">
        <!--begin::Col-->
        <div class="col-md-6">
            <label for="special_quality" class="form-label fw-bold">Quality</label>
            <select class="form-select" id="special_quality" name="special_quality">
                <option selected disabled value="">Choose...</option>
                {% for special_quality in special_qualities %}
                <option {% if special_quality.id == special_quality_info.special_quality.id %} selected {% endif %} value="{{ special_quality.id }}">{{ special_quality.name }}</option>
                {% endfor %}
            </select>
            <div class="invalid-feedback">Please select a Quality.</div>
        </div>
        <!--begin::Col-->
               <!--begin::Col-->
               <div class="col-md-12">
                <label for="description" class="form-label"
                  >Description</label
                >
                <div class="input-group has-validation">
                    <textarea rows="4" class="form-control" name="description" id="description"></textarea>
                  <div class="invalid-feedback">Please provide a valid Description.</div>
                </div>
        </div>
        <!--end::Col-->
      </div>
      <!--end::Row-->
    </div>
    <!--end::Body-->
    <!--begin::Footer-->
    <div class="card-footer">
      <button class="btn btn-primary" type="submit">Add SpecialQuality</button>
    </div>
    <!--end::Footer-->
  </form>
</div>
<!--end::Form-->

<!--begin::Table-->
<div class="table mt-5 ms-5">
    {% if special_quality_info %}
    <table class="table">
        <thead>
            <th>#</th>
            <th>Quality</th>
            <th>Delete</th>
        </thead>
        <tbody>
            {% for item in special_quality_info %}
            <tr>
                <td>{{ forloop.counter }}</td>
                <td>{{ item.special_quality|default:'N/A' }}</td>
                <td><a href="{% url 'delete_special_quality_info' item.id %}" class="btn btn-danger">Delete</a></td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% endif %}
</div>
<!--end::Table-->
  <!--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-->
<!--end::Form Validation-->
{% endblock content %}