<div class="col-8 mx-auto p-4 rounded shadow-sm mb-5 context-main-bg mt-4 container">
    <h2 class="text-center mb-4">Share a Review</h2>
    <hr>
    <p>We thank you for for taking the time to review our products. We do not edit or modify reviews in any way. You, as the customer have the ability to modify your own reviews.</p>
    <p>We read each and every review. You and the admin team both have the ability to comment on reviews privately. Neither your reviews or comments will be publicly shared without your permission.</p>
    <form id="review-form" method="post">
        <!-- Review Category -->
        <div class="mb-3">
            <label for="review_category_id" class="form-label">Review Category:</label>
            {reviewCategorySelect}
        </div>

        <!-- Rating -->
        <div class="mb-3">
            <label for="star-rating" class="form-label">Rating:</label>
            <div class="star-rating">
                <span class="fa fa-star" data-rating="1"></span>
                <span class="fa fa-star" data-rating="2"></span>
                <span class="fa fa-star" data-rating="3"></span>
                <span class="fa fa-star" data-rating="4"></span>
                <span class="fa fa-star" data-rating="5"></span>
                <input type="hidden" name="rating" class="rating-value" value="0">
            </div>
        </div>

        <!-- Review Title -->
        <div class="mb-3">
            <label for="title" class="form-label">Review Title:</label>
            <input type="text" class="form-control" id="title" name="title" aria-describedby="titleHelp" required>
            <small id="titleHelp" class="form-text text-muted">
                No need to overthink it, something as simple as "My Review" is fine.
            </small>
        </div>

        <!-- Review -->
        <div class="mb-3">
            <label for="review" class="form-label">Your Review:</label>
            <textarea class="form-control" name="review" id="review" rows="5" maxlength="2000" aria-describedby="reviewHelp" required></textarea>
            <small id="reviewHelp" class="form-text text-muted">
                (max: 2000 characters)
            </small>
        </div>

        <!-- Hidden Token -->
        <input type="hidden" name="token" value="{TOKEN}">

        <!-- Submit Button -->
        <div class="text-center">
            <button type="submit" name="submit" value="submit" class="btn btn-primary btn-lg atb-green-bg">Submit</button>
        </div>
    </form>
</div>