Appointment

<div class="bg-white rounded-button p-10 w-full flex flex-col gap-5 divide-y divide-dashed">

    <div class="flex flex-col gap-5">

        <div class="flex items-center justify-between">

            <span class="rounded-[100px] bg-secondary p-2.5 text-xxs text-center w-fit px-5 text-white">A venir</span>

            <div class="flex gap-0.5">

                <span class="w-1 h-1 rounded-full bg-icon"></span>

                <span class="w-1 h-1 rounded-full bg-icon"></span>

                <span class="w-1 h-1 rounded-full bg-icon"></span>

            </div>

        </div>

        <div class="flex gap-5 items-start">

            <?= icon('ice', 'w-7.5 text-icon'); ?>

            <div class="flex flex-col">

                <span class="font-semibold text-xl text-text-light">Changement des plaquettes de frein</span>

                <span class="text-base">Sur votre Peugeot 3008</span>

            </div>

        </div>

    </div>

    <div class="flex gap-4 pt-5">

        <div class="border-l-2 border-secondary"></div>

        <div>

            <div class="flex gap-3.75">

                <?= icon('mileage', 'text-icon w-3.75'); ?>

                <span class="text-smaller">25 750 km</span>

            </div>

            <div class="flex gap-3.75">

                <?= icon('valide', 'text-icon w-3.75'); ?>

                <span class="text-smaller">Modèle 06/2018</span>

            </div>

            <div class="flex gap-3.75">

                <?= icon('energy', 'text-icon w-3.75'); ?>

                <span class="text-smaller">Essence</span>

            </div>

        </div>

    </div>

</div>

<div class="bg-white rounded-button p-10 w-full flex flex-col gap-5 divide-y divide-dashed">

    <div class="flex flex-col gap-5">

        <div class="flex items-center justify-between">

            <span class="rounded-[100px] bg-icon p-2.5 text-xxs text-center w-fit px-5 text-white">Passé</span>

            <div class="flex gap-0.5">

                <span class="w-1 h-1 rounded-full bg-icon"></span>

                <span class="w-1 h-1 rounded-full bg-icon"></span>

                <span class="w-1 h-1 rounded-full bg-icon"></span>

            </div>

        </div>

        <div class="flex gap-5 items-start">

            <?= icon('ice', 'w-7.5 text-icon'); ?>

            <div class="flex flex-col">

                <span class="font-semibold text-xl text-text-light">Changement des plaquettes de frein</span>

                <span class="text-base">Sur votre Peugeot 3008</span>

            </div>

        </div>

    </div>

    <div class="flex gap-4 pt-5">

        <div class="border-l-2 border-icon"></div>

        <div>

            <div class="flex gap-3.75">

                <?= icon('mileage', 'text-icon w-3.75'); ?>

                <span class="text-smaller">25 750 km</span>

            </div>

            <div class="flex gap-3.75">

                <?= icon('valide', 'text-icon w-3.75'); ?>

                <span class="text-smaller">Modèle 06/2018</span>

            </div>

            <div class="flex gap-3.75">

                <?= icon('energy', 'text-icon w-3.75'); ?>

                <span class="text-smaller">Essence</span>

            </div>

        </div>

    </div>

</div>

<div class="grid md:grid-cols-3 grid-cols-1 gap-5">

    <?php include renderTemplate('online-garage/appointment', 'past'); ?>

    <?php include renderTemplate('online-garage/appointment', 'upcoming'); ?>

    <?php include renderTemplate('online-garage/appointment', 'upcoming'); ?>

    <?php include renderTemplate('online-garage/appointment', 'past'); ?>

    <?php include renderTemplate('online-garage/appointment', 'past'); ?>

</div>