<div class="modal fade"
     id="ModalSuperSearchBox"
     tabindex="-1"
     aria-labelledby="ModalSuperSearchTitle"
     aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable">
		<div class="modal-content shield-modal-content-raised">
			<div class="modal-header">
				<h2 id="ModalSuperSearchTitle" class="visually-hidden">{{ strings.search_shield }}</h2>
				<div class="modal-title h5 d-flex align-items-center">
					<span class="search-icon"><i class="{{ imgs.svgs.search }}" aria-hidden="true"></i></span>
					<label for="ModalSuperSearchInput" class="visually-hidden">{{ strings.search_shield }}</label>
					<input type="text"
					       id="ModalSuperSearchInput"
					       class="search-text flex-fill"
					       placeholder="Search for anything..."
					       {% if not flags.is_security_admin %}disabled="disabled"{% endif %}
					/>
				</div>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ strings.close|e('html_attr') }}"></button>
			</div>
			<div class="modal-body">
				<div class="w-100" style="">
					<p class="my-1 fs-6">
						{{ strings.search_modal_placeholder }}
					</p>
					<div class="mt-1">{{ strings.search_modal_you_could }}:</div>
					<ul class="list-group list-group-flush mb-3">
						{% for suggestion in strings.search_suggestions %}
							<li class="fs-6 list-group-item">&#10003; {{ suggestion }}</li>
						{% endfor %}
					</ul>
				</div>
			</div>
    </div>
  </div>
</div>
