{% load wagtailcore_tags cjkcms_tags django_bootstrap5 i18n %}
      <form action="{% url 'cjkcms_search' %}" method="GET" class="row row-cols-lg-auto g-3 align-items-center">
        {% csrf_token %}
        {% get_searchform request as form %}
        {% bootstrap_form_errors form type='non_fields' %}
        {% if settings.cjkcms.LayoutSettings.search_format == "" or settings.cjkcms.LayoutSettings.search_format|slice:":3" == "box" %}
          {% bootstrap_field form.s layout='inline' show_label=False %}
        {% endif %}
        {% if "button" in settings.cjkcms.LayoutSettings.search_format %}
        <button type="button" class="{{ settings.cjkcms.LayoutSettings.searchbutton_class }}"
          {% if 'popup' in settings.cjkcms.LayoutSettings.search_format %}
            data-mdb-toggle="modal" data-bs-toggle="modal" 
            data-bs-target="#search-modal" data-mdb-target="#search-modal"
            onclick="focusInputField()"          
          {% endif %}
        >{{ settings.cjkcms.LayoutSettings.searchbutton_label | richtext }}</button>
        {% endif %}
      
        {% if "popup" in settings.cjkcms.LayoutSettings.search_format %}
        <div id="search-modal" class="modal" style="display: none;">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">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>
          function focusInputField() {
            var inputField = document.querySelector('#search-modal input[type="text"]');
            if (inputField) {
              inputField.focus();
            }
          }
        </script>
        {% endif %}
      </form>