{% if FORM_COMMENTS %}
<hr>
<div id="comment-form">
  <div class="alert alert-info" role="alert">
    Feel free to leave a feedback or question!
  </div>
  <form action="{{ FORM_PROPERTIES['action'] }}" target="response" method="POST" id="valid-form">
    <div class="form-row align-items-center">
      <div class="form-group col-md-5">
        <label class="sr-only" for="person-name">Name</label>
        <input type="text" class="form-control form-control-sm" id="person-name" placeholder="Your Name (Optional)"
          aria-describedby="nameHelp" name="{{ FORM_PROPERTIES['name'] }}">
        <input type="text" id="page-link" name="{{ FORM_PROPERTIES['link'] }}" hidden>
        <small id="nameHelp" class="form-text text-muted">You may put your GitHub Username.</small>
      </div>
      <div class="form-group col-md-7">
        <label class="sr-only" for="email-address">Email address</label>
        <input type="email" class="form-control form-control-sm" id="email-address" aria-describedby="emailHelp"
          placeholder="Your Email Address (Optional)" name="{{ FORM_PROPERTIES['email'] }}">
        <small id="emailHelp" class="form-text text-muted">I'll never share your email with anyone
          else.</small>
      </div>
    </div>
    <div class="form-group">
      <label class="sr-only" for="comment-section">Your Message</label>
      <textarea class="form-control form-control-sm" id="comment-section" rows="3"
        placeholder="Please enter your message or feedback. (Required)" aria-describedby="emailHelp"
        name="{{ FORM_PROPERTIES['comment'] }}" required></textarea>
      <div class="invalid-feedback">
        Please Enter something !
      </div>
      <small id="textHelp" class="form-text text-muted">Enter upto 200 characters.</small>
    </div>
    <button class="btn btn-outline-info" type="submit">Send</button>
  </form>
  <iframe name="response" hidden></iframe>
</div>
<div class="alert alert-info" role="alert" id="comment-message" style="display: none;">
  <h4 class="alert-heading">Thanks You 🥳</h4>
  <p>Thanks a lot for reading this blog and sending me a feedback. I hope you liked it. I will get back to you
    soon if you have added an email.</p>
</div>
<script>
  (function () {
    'use strict';
    window.addEventListener('load', function () {
      var form = document.getElementById('valid-form');
      form.addEventListener('submit', function (event) {
        document.getElementById('page-link').value = window.location.href;
        document.getElementById('comment-form').style.display = 'none';
        document.getElementById('comment-message').style.display = '';
      }, false);
    }, false);
  })();
</script>
{% endif %}