{% block 'nav'  %}
{% if 'instruction' in title or  'Notification' in title  or  'Static Page' in title or '/base/' in request.path or '/manage/' in request.path  or '/siteadmin/' in request.path  %}

    {% include 'base/test_nav_emp.html' %}
{% else   %}

    {% include 'base/test_nav_patient.html' %}
  {% comment %} {% include 'base/nav_patient.html' %} {% endcomment %}
{% endif   %}

{% endblock   %}
{% block 'bodycontent'  %}



{% if messages %}

  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    {% for message in messages %}
    <div id="liveToast" class="toast toast-entry " role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">{{title}}</strong>
        <small>Just Now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body btn-{{message.tags}}">
        {{ message|safe }}
      </div>
    </div>
   {% endfor %}
  </div> 
  <script type="module">
      var toasts = document.getElementsByClassName("toast-entry");
      for (var i = 0; i < toasts.length; i++) {
        const toastLiveExample = toasts.item(i)
        const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
        toastBootstrap.show()
      }
  </script>  

{% endif %}


<body>
{% if 'Mobile' in request.META.HTTP_USER_AGENT %} 
<div class="acc-pad">
<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        {{obj_help.heading}}
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        {{obj_help.content_HTML|safe}}

      </div>
    </div>
  </div>
</div>

  <div class="p-2 border mar-top">
    
{%else%}
<div class="form_align w-100  "	>
  <div class=" w-50 from-margin pad border line " >
{% endif %}
  {% load bootstrap_tags %}
  {% load crispy_forms_tags %} 

  {% comment %} <form method="post" enctype="multipart/form-data"> {% endcomment %}
  {% crispy form %}
  {% comment %} </form> {% endcomment %}

  </div>

 {% if 'Mobile' in request.META.HTTP_USER_AGENT %} {%else%}  
  {% if obj_help %}
  <div class="p-2 border w-50 ">
    <div>
      
       <div class="heading mt-3 " >
          <h3><b> {{obj_help.heading}}</b></h3>
       </div>

       <div class="p-4">
            {{obj_help.content_HTML|safe}}
       </div>
   </div>

  </div>
 
</div>
{% endif %} {% endif %} 
<style>
  .form-group{ padding-top: 10px;}
  .form_align{
    display:flex;
    justify-content:center;
    padding:3rem;
    margin-top:10rem;


  }
  .acc-pad{
    margin-top:11rem;
    padding-left:1rem;
    padding-right:1rem;
  }
  .heading{
    display:flex;
    justify-content:center;

    
  }
  .mar-top{
    margin-top:2rem;
    
   
  }
  .line {
    line-height: 135%;
  }


  .pad{
    padding:1.5rem;
  }
  
  </style>
  <script >
    $(document).ready(function() {


      // patient - medications_form
      $('#id_frequency').select2({});
      $('#id_accept').select2({});
      $('#id_units').select2({});
      $('#id_route').select2({});
      $('#id_days_unit').select2({});

      
    
        $('#id_fk_dist').select2({});
        //$('#id_fk_System').select2({});
        $('#id_fk_Type').select2({});
        $('#id_fk_District').select2({});
        $('#id_fk_zone').select2({});
        $('#id_fk_gender').select2({});
        $('#id_fk_group').select2({});
        $('#id_Title').select2({});
        $('#id_fk_med').select2({});
        
        $('#id_fk_system').select2({});
        $('#id_fk_GST').select2({});
        $('#id_entry_type').select2({});
        $('#id_field_type').select2({});
        
        
        
        
        $('#id_type').select2({});
        $('#id_task_type').select2({});
        $('#id_applyto_employee').select2({});
        
    });
    </script>  
</body>
{% endblock %}