<div class="uk-container">
    <div class="quick-search-box">

        <form class="form-dark" action="search-result.php" method="GET">
            <div class="uk-grid uk-grid-small uk-flex-bottom" uk-grid>

                <div class="uk-width-expand@m">
                    <div>
                        <div class="uk-grid uk-grid-small uk-child-width-1-2 uk-child-width-auto@m" uk-grid>

                            <div class="uk-width-1-2 uk-width-expand@m col-name">
                                <label class="form-label" for="nameSearch">By Name</label>
                                <div class="filter-group uk-position-relative">
                                    <span uk-icon="icon: search; ratio: .8" class="uk-icon uk-form-icon" aria-hidden="true"></span>

                                    <input type="text" class="uk-input" id="nameSearch" placeholder="Search trainers by name...">
                                </div>
                            </div>

                            <div class="uk-width-1-2 uk-width-1-6@m col-min-price">
                                <label class="form-label" for="minPrice">Min Price (SAR)</label>
                                <div class="filter-group uk-position-relative">
                                    <span uk-icon="icon: arrow-down; ratio: .6" class="uk-icon uk-form-icon uk-form-icon-flip" aria-hidden="true"></span>
                                    <input type="number" class="uk-input" id="minPrice" placeholder="Min Price">
                                </div>
                            </div>

                            <div class="uk-width-1-2 uk-width-1-6@m col-max-price">
                                <label class="form-label" for="maxPrice">Max Price (SAR)</label>
                                <div class="filter-group uk-position-relative">
                                    <span uk-icon="icon: arrow-up; ratio: .6" class="uk-icon uk-form-icon uk-form-icon-flip" aria-hidden="true"></span>
                                    <input type="number" class="uk-input" id="maxPrice" placeholder="Max Price">
                                </div>
                            </div>

                            <div class="col-gender">
                                <div class="filter-group">
                                    <label class="form-label" for="genderFilter">Gender</label>
                                    <select class="uk-select" id="genderFilter">
                                        <option value="">Any Gender</option>
                                        <option value="male">Male</option>
                                        <option value="female">Female</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-lang">
                                <div class="filter-group">
                                    <label class="form-label" for="languageFilter">Language</label>
                                    <select class="uk-select" id="languageFilter">
                                        <option value="">Any Language</option>
                                        <option value="arabic">Arabic</option>
                                        <option value="english">English</option>
                                        <option value="french">French</option>
                                    </select>
                                </div>
                            </div>

                            <div class="col-rate">
                                <div class="filter-group">
                                    <label class="form-label" for="ratingFilter">Rating</label>
                                    <select class="uk-select" id="ratingFilter">
                                        <option value="">Any Rating</option>
                                        <option value="5">5 Stars</option>
                                        <option value="4">4+ Stars</option>
                                        <option value="3">3+ Stars</option>
                                    </select>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

                <div class="uk-width-1-1 uk-width-auto@m col-search-submit">
                    <div>
                        <div class="filter-group">
                            <button type="submit" class="uk-button uk-button-primary uk-width-1-1"
                                aria-label="Search">
                                <span uk-icon="icon: search; ratio: .8" class="uk-icon" aria-hidden="true"></span>
                                <span class="uk-hidden@s">Search</span>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
        </form>
    </div>
</div>