{#
  Search Modal Template.
  Renders a custom element `mds-dialog` that contains a search form wrapped in a modal `dialog`.
#}

<mds-dialog id="search-modal" context="search-dialog">
    <mds-toggle-view-fade context="search-dialog">
      <div class="mds-search__form mds-mt--large">
      <div class="mds-form-item mds-search__form-item">
        <label class="mds-visually-hidden" for="">Search</label>
        <input
          type="search"
          name="Search"
          class="mds-search__form-text"
          placeholder="Search... "
          value=""
          data-testid="mds-input"
          id=""
        />
      </div>

      <button
        formaction=""
        type="submit"
        data-testid="mds-button"
        class="mds-button mds-button--secondary mds-search__submit"
      >
        <ion-icon
          class="mds-button__ionicon md hydrated"
          data-testid="ionicon"
          name="search"
          alt="Search"
          size=""
          role="img"
          aria-label="search"
        ></ion-icon>
      </button>
    </div>

      {# Optionally render the 'sugestions' section. A list of suggestions for searches. TODO: this could/should be a block/slot in e.g. Drupal context. #}
      {% if suggestions == true %}
        <br />
        <div class="mds-mt--large search-suggestions">
        <h3 class="mds-mt--large mds-text--large-fixed">Shortcuts</h3>
        <div class="mds-my--large">
          <ul class="mds-list--none mds-l-flex-row mds-l-gap--1  mds-l-justify--start">
            <li>
              <a href="#" class="mds-button">Find Classes</a>
            </li>
            <li>
              <a href="#" class="mds-button">Apply</a>
            </li>
            <li>
              <a href="#" class="mds-button">Student Life</a>
            </li>
            <li>
              <a href="#" class="mds-button">Campus</a>
            </li>
          </ul>
        </div>
      </div>
      {% endif %}
    </mds-toggle-view-fade>
</mds-dialog>