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

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

<div class="uk-container">

    <!-- Page Header -->
    <div class="page-header uk-margin-medium-bottom">

        <div class="header-left uk-flex uk-flex-middle gap-16">
            <div class="header-icon">
                <span uk-icon="icon: heart; ratio: 1.2" class="uk-icon"></span>
            </div>
            <div>
                <h1 class="header-title">Favorite Trainers</h1>
                <p class="header-subtitle uk-margin-remove">Your saved trainers for easy access and booking</p>
            </div>
        </div>

    </div>

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


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

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

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