@inherits ViewModelTemplate<UserListViewModel>
@using Dynamicweb.Frontend
@using Dynamicweb.Rendering

@{
    string searchTerm = Dynamicweb.Context.Current?.Request.Params.Get("search") ?? string.Empty;
}

<div class="grid type-ahead-dropdown mb-3">
    <div class="g-col-12 g-col-lg-4">
        <form method="get" class="suggest-form position-relative">
            <div class="hstack mb-3" data-dw-colorscheme="light">
                <label for="userSearch_@Pageview.CurrentParagraph.ID" class="visually-hidden">@Translate("Search for employees")</label>
                <span class="position-absolute icon-2 reset-search px-3">
                    @ReadFile("/Files/Images/Icons/magnifying-glass.svg")
                </span>
                <input id="userSearch_@Pageview.CurrentParagraph.ID"
                        type="search"
                        class="form-control form-control-sm rounded-pill type-ahead-field py-2 px-5"
                        placeholder="@Translate("Search for employees")"
                        aria-label="@Translate("Search for employees")"
                        aria-describedby="userSearch_@Pageview.CurrentParagraph.ID"
                        name="search"
                        value="@searchTerm">

                <button type="button"
                        onclick="var f = document.getElementById('userSearch_@Pageview.CurrentParagraph.ID'); f.value = ''; f.focus(); f.closest('form').submit();"
                        class="btn position-absolute end-0 icon-2 reset-search"
                        aria-label="@Translate("Clear search field")"
                        style="opacity: 0; visibility: hidden;">
                    @ReadFile("/Files/Images/Icons/xmark.svg")
                </button>
            </div>
        </form>
    </div>
</div>