{%  extends "admin.html"  %}
{% block content %}

<h4 class="fw-bold py-3 mb-4">
  <span class="text-muted fw-light">
    <a href="{% url 'dashboard' %}"> Home / </a>
    {% if breadc_link %}
      <a href="{% url breadc_link %}" style="text-transform: capitalize;"> {{breadc_link}} / </a>
    {% endif %}
  </span> {{page_name}}
</h4>

<div class="row">
    <!-- Basic Layout -->
    <div class="col-xxl">
      <div class="card mb-4">
        <div class="card-header d-flex align-items-center justify-content-between">
          <h5 class="mb-0">{{page_name}}</h5>
          <small class="text-muted float-end"> </small>
        </div>
        <div class="card-body">
          <form method="POST" >
            {% csrf_token %}
            {% for field in form %}
            <div class="row mb-3">
              <label class="col-sm-2 col-form-label" for="{{ field.label }}">{{ field.label }}</label>
              <div class="col-sm-10">
                {{field}}
                {% if field.help_text %}
                  <small> {{field.help_text}} </small>
                  {% endif %}

                  {% for error in field.errors %}
                      <small style="color:red"> {{error}} </small>
                  {% endfor %}
              </div>
            </div>
            {% endfor %}

            <div class="row justify-content-end">
              <div class="col-sm-10">
                <button type="submit" class="btn btn-primary">Save</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    
  </div>



{% endblock content %}

{% block footer %}
<script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
<script>
  $(document).ready(function() {
      $('select').select2();
      $('#date1').datepicker({ format: 'yyyy-mm-dd' });
  });
</script>
{% endblock footer %}