{% load wagtailcore_tags cjkcms_tags django_bootstrap5 i18n %}


<form action="{% url 'cjkcms_search' %}" method="GET" class="align-items-center">
  {% get_searchform request as form %}
  {% bootstrap_form_errors form type='non_fields' %}
        <div id="searchModal" class="modal fade" tabindex="-1" aria-labelledby="searchModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="searchModalLabel">Search</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" data-mdb-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                {% bootstrap_form form layout='inline' %}
              </div>
              <div class="modal-footer">
                <button type="submit" class="{{ settings.cjkcms.LayoutSettings.searchbutton_class }}">
                  {{ settings.cjkcms.LayoutSettings.searchbutton_label | richtext }}
                </button>
              </div>
            </div>
          </div>
        </div>
        <script>
          var myModal = document.getElementById('searchModal')
          var myInput = document.getElementById('id_s')
          
          myModal.addEventListener('shown.bs.modal', function () {
            myInput.focus()
          })
        </script>
</form>