<?php include 'header.php'; ?>

<!-- Normal Sub Header -->
<?php include 'template-parts/sub-header-normal.php'; ?>

<div class="uk-container">
    <div class="uk-grid" uk-grid>

        <!-- Sidebar Area -->
        <div class="uk-width-1-4@s uk-visible@s">
            <div class="sidebar-sticky" uk-sticky="offset: 20; bottom: true">
                <?php include 'sidebar.php'; ?>
            </div>
        </div>

        <!-- Main Content Area -->
        <div class="uk-width-expand@s m-first">

            <!-- 
                Hidden heading added for semantic structure and SEO/accessibility.
                Keeps heading order sequential without affecting visual design.
            -->
            <h2 class="sr-only">Trainers</h2>

            <!-- Results Header -->
            <div class="results-header uk-margin-medium-bottom">
                <div class="results-meta uk-grid uk-flex-bottom" uk-grid>

                    <div class="results-count uk-width-expand">
                        <span class="count-number" id="resultsCount">18</span> trainers match your search
                    </div>

                    <div class="sort-options uk-width-auto">
                        <label for="sortBy" class="uk-hidden">Sort by:</label>
                        <select class="sort-select uk-select" id="sortBy" aria-label="Sort by">
                            <option value="relevance">Most Relevant</option>
                            <option value="rating">Highest Rated</option>
                            <option value="price-low">Price: Low to High</option>
                            <option value="price-high">Price: High to Low</option>
                            <option value="experience">Most Experience</option>
                            <option value="newest">Newest First</option>
                        </select>
                    </div>

                </div>
            </div><!-- .results-header -->

            <div class="trainers-grid">
                <div class="uk-child-width-1-1 uk-child-width-1-2@s uk-child-width-1-2@m uk-child-width-1-3@l uk-grid-medium" uk-height-match="target: > div > .trainer-card-small > .trainer-specialty" uk-grid>
                    <?php for ($i = 0; $i < 18; $i++) : ?>
                        <?php include 'template-parts/cards/card-trainer.php'; ?>
                    <?php endfor; ?>
                </div>
            </div><!-- .trainers-grid -->

            <!-- Pagination -->
            <?php include 'template-parts/pagination.php'; ?>

        </div>

    </div><!-- .uk-grid -->
</div><!-- .uk-container -->


<?php include 'footer.php'; ?>