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

<style>
.flx{

    width:81rem;
    height:28rem;
   
}
.padd{
    padding-left:1rem;
    padding-right:1rem; 
    display:flex;
    justify-content:center;
    margin-top:18rem;
    margin-bottom:3rem;
}

</style>

{% if obj_help %}
    <div class="padd">
     <div class="card flx">
        <div class="card-header p-3">
            <h5><b>{{obj_help.heading}}</b></h5>
        </div>
        <div class="card-body">
          <h6 class="card-title"> {{obj_help.content_HTML|safe}}</h6>
          
        </div>
      </div>
    </div>

{% endif %} 


{% 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>Notification</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 %}