<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<h3 id="searchOptionsLabel">
	<la:message key="labels.search_options" />
</h3>
<div>
	<fieldset class="mb-3">
		<legend><la:message key="labels.index_num" /></legend>
		<label for="numSearchOption"><la:message key="labels.index_num" /></label>
		<la:select property="num" styleId="numSearchOption"
			styleClass="form-control">
			<option value="10">

<%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
<h3 id="searchOptionsLabel">
	<la:message key="labels.search_options" />
</h3>
<div>
	<fieldset class="mb-3">
		<legend><la:message key="labels.index_num" /></legend>
		<label for="numSearchOption"><la:message key="labels.index_num" /></label>
		<la:select property="num" styleId="numSearchOption"
			styleClass="form-control">
			<option value="10">

      }
    }, BUTTON_DISABLE_DURATION);
    return true;
  });

  $(document).on("click touchend", function(e) {
    if (!$(e.target).closest("#searchOptions, #searchOptionsButton").length) {
      $("#searchOptions").removeClass("active");
    }
  });

  $("[data-toggle='control-options']").on("click", function(e) {
    e.preventDefault();

      $searchButton.prop("disabled", false);
    }, BUTTON_DISABLE_DURATION);
    return true;
  });

  $(document).on("click touchend", function(e) {
    if (!$(e.target).closest("#searchOptions, [data-toggle='control-options']").length) {
      $("#searchOptions").removeClass("active");
    }
  });

  $("[data-toggle='control-options']").on("click", function(e) {
    e.preventDefault();

						</la:link></li>
				</ul>
			</div>
		</nav>
	</header>
	<c:if test="${!chatPage}">
	<div id="searchOptions" class="collapse">
		<div class="container">
			<jsp:include page="/WEB-INF/view/searchOptions.jsp" />
			<div>
				<button type="button" class="btn btn-light" id="searchOptionsClearButton">
					<la:message key="labels.search_options_clear" />
				</button>

						</la:link></li>
				</ul>
			</div>
		</nav>
	</header>
	<c:if test="${!chatPage}">
	<div id="searchOptions" class="collapse">
		<div class="container">
			<jsp:include page="/WEB-INF/view/searchOptions.jsp" />
			<div>
				<button type="button" class="btn btn-light" id="searchOptionsClearButton">
					<la:message key="labels.search_options_clear" />
				</button>

h2 {
	font-size: 24px;
}

h3 {
	font-size: 18px;
}

.form-control {
	border-radius: 0px;
}

legend{
	display: none;
}

/* header */

#searchOptions {
	position: fixed;
	z-index: 10;
}

#searchOptions .container {
	width: 500px;
	max-width: 100%;
	height: 100%;
	overflow: auto;
	position: fixed;
	top: 0;
	bottom: 0;
	right: -500px;
	padding-top: 72px;

				href="#searchOptions" class="badge text-bg-primary text-decoration-none"
				data-bs-toggle="collapse"> <la:message
						key="labels.searchoptions_num" arg0="${f:h(num)}" />
			</a></li>
			<li class="list-inline-item"><la:message key="labels.searchoptions_menu_lang" /> <a
				href="#searchOptions" class="badge text-bg-primary text-decoration-none"

				href="#searchOptions" class="badge text-bg-primary text-decoration-none"
				data-bs-toggle="collapse"> <la:message
						key="labels.searchoptions_num" arg0="${f:h(num)}" />
			</a></li>
			<li class="list-inline-item"><la:message key="labels.searchoptions_menu_lang" /> <a
				href="#searchOptions" class="badge text-bg-primary text-decoration-none"

									<la:message key="labels.index_help" />
								</la:link></li>
						</ul>
					</div>
				</div>
			</nav>
		</header>
		<div id="searchOptions" class="collapse">
			<div class="container">
				<jsp:include page="searchOptions.jsp" />
				<div>
					<button type="button" class="btn btn-light" id="searchOptionsClearButton">
						<la:message key="labels.search_options_clear" />
					</button>