{{ pattern_preview('jc_modal', {'showbutton': false}) }}


{% embed "@organisms/tm-bs/modal/modal.twig" %}

  {% set uid = 'modal-search' %}
  {% set class = 'branded-overlay modal-trans' %}
  {% set showclose = true %}
  {% set showbutton = false %}
  {% set size = 'md' %}
  {% set center = true %}

  {% block header %}{% endblock %}
  {% block footer %}{% endblock %}

  {% block body %}
    <form action="/search" >
      <div class="d-flex align-items-center">
        <div class="w-100 form-group-no-pad form-no-label label-invisible form-group js-form-item js-form-type-textfield js-form-item-search-api-fulltext">
          <label for="edit-search-api-fulltext" class="visually-hidden">Search</label>
          <div class="input-group input-group-lg">
            <input placeholder="Enter search text" data-drupal-selector="edit-search-api-fulltext" data-msg-maxlength="This field field has a maximum length of 128." type="text" id="edit-search-api-fulltext" name="search_api_fulltext" value="" size="lg" maxlength="128" class="form-text form-control form-control-lg" data-dashlane-rid="da8ed1c7528a4335">
            <div class="suffix input-group-text">
              <button data-drupal-selector="edit-submit-search-content" type="submit" id="edit-submit-search-content--2" value="Search" class="button js-form-submit form-submit btn btn-lg btn-outline-default" data-persistent-id="edit-search-views-exposed-form-search-content" data-dashlane-rid="b81ac166c17db155">
                <span class="sr-only">Search</span><i class="fas fa-search"></i>
              </button>
            </div>
          </div>
        </div>
        <a href="#" type="button" class="display-6 ms-3 modal-close-trans" data-bs-dismiss="modal" aria-label="Close search modal">
          <i class="{{ global_icon_times|default('fas fa-times') ~ "-circle" }}"></i>
        </a>
      </div>
      <div class="visually-hidden">
        <div data-drupal-selector="edit-actions" class="form-actions js-form-wrapper form-wrapper" id="edit-actions--2">
          <button data-drupal-selector="edit-submit-search-content" type="submit" id="edit-submit-search-content" value="Search" class="button js-form-submit form-submit btn btn-md btn-outline-default" data-persistent-id="edit-search-views-exposed-form-search-content" data-dashlane-rid="5f1045a17bde34bb">
            Search
          </button>
        </div>
      </div>
    </form>
  {% endblock %}

{% endembed %}
