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

{% 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>  
<style>
    .top{
        margin-top:5rem;
        width:auto;
        padding-left:1rem;
        padding-right:1rem;
    }
</style>
{% endif %}
<body>
{% if obj_help %}
    <div class="accordion top " 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>

{% endif %} 
<div class="form_align mb-4 ">
  <div class=" pad border line  " >
  {% load bootstrap_tags %}
  {% load crispy_forms_tags %} 
  {% comment %} <form method="post">
    {% csrf_token %}
  <div class="card-body">
    {{form|as_bootstrap_horizontal  }}
    <input type = 'submit' value='Save'>
  </div> {% endcomment %}
     {% crispy form %}
  </div>
</div>
<style>
  .form_align{

    margin-top:3rem;
    width:auto;
    padding-left:1rem;
    padding-right:1rem;
  }
  .heading{
    display:flex;
    justify-content:center;

    
  }
  .line {
    line-height: 200%;
  }

  .border{
    border:2px solid;
    
  }
  .pad{
    padding:1rem;
  }
  
  </style>
</body>
