props/Props/Pages/Search.cshtml

@page
@{
    ViewData["Title"] = "Search";
    ViewData["Specific"] = "Search";
}

<div>
    <div class="my-4 less-concise mx-auto">
        <div class="input-group">
            <input type="text" class="form-control bg-transparent border-primary" placeholder="What are you looking for?" aria-label="Search" aria-describedby="search-btn" id="search-bar">
            <button class="btn btn-outline-secondary" type="button" id="configuration-toggle" data-bs-toggle="collapse" data-bs-target="#configuration"><i class="bi bi-sliders"></i></button>
            <button class="btn btn-outline-primary" type="button" id="search-btn">Search</button>
        </div>
    </div>
</div>

<div class="collapse tear" id="configuration">
    <div class="p-3">
        <div class="container invisible">
            <div class="d-flex">
                <h1 class="my-2 display-2 me-auto">Configuration</h1>
                <button class="btn align-self-start" type="button" id="configuration-close" data-bs-toggle="collapse" data-bs-target="#configuration"><i class="bi bi-x-lg"></i></button>
            </div>
            <div class="row justify-content-md-center">
                <section class="col-lg px-4">
                    <h3>Price</h3>
                    <div class="mb-3">
                        <label for="max-price" class="form-label">Maximum Price</label>
                        <div class="input-group">
                            <div class="input-group-text">
                                <input class="form-check-input mt-0" type="checkbox" id="max-price-enabled">
                            </div>
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control" min="0" id="max-price">
                            <span class="input-group-text">.00</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="min-price" class="form-label">Minimum Price</label>
                        <div class="input-group">
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control" min="0" id="min-price">
                            <span class="input-group-text">.00</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="max-shipping" class="form-label">Maximum Shipping Fee</label>
                        <div class="input-group">
                            <div class="input-group-text">
                                <input class="form-check-input mt-0" type="checkbox" id="max-shipping-enabled">
                            </div>
                            <span class="input-group-text">$</span>
                            <input type="number" class="form-control" min="0" id="max-shipping">
                            <span class="input-group-text">.00</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="keep-unknown-shipping">
                            <label class="form-check-label" for="keep-unknown-shipping">Keep Unknown Shipping</label>
                        </div>
                    </div>
                </section>
                <section class="col-lg px-4">
                    <h3>Metrics</h3>
                    <div class="mb-3">
                        <label for="min-purchases" class="form-label">Minimum Purchases</label>
                        <div class="input-group">
                            <input type="number" class="form-control" min="0" id="min-purchases">
                            <span class="input-group-text">Purchases</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="keep-unknown-purchases">
                            <label class="form-check-label" for="keep-unknown-purchases">Keep Unknown Purchases</label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="min-reviews" class="form-label">Minimum Reviews</label>
                        <div class="input-group">
                            <input type="number" class="form-control" min="0" id="min-reviews">
                            <span class="input-group-text">Reviews</span>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="keep-unknown-reviews">
                            <label class="form-check-label" for="keep-unknown-reviews">Keep Unknown Number of Reviews</label>
                        </div>
                    </div>
                    <div class="mb-1">
                        <label for="min-rating" class="form-label">Minimum Rating</label>
                        <input type="range" class="form-range" id="min-rating" min="0" max="100" step="1">
                        <div id="min-rating-display" class="form-text"></div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="keep-unrated">
                            <label class="form-check-label" for="keep-unrated">Keep Unrated Items</label>
                        </div>
                    </div>
                </section>
                <section class="col-lg px-4">
                    <h3>Shops Enabled</h3>
                    <div class="mb-3 px-3" id="shop-checkboxes">
                    </div>
                </section>
            </div>
        </div>
    </div>
</div>

@* TODO: Add results display and default results display *@