 <!--start main wrapper-->
    <main class="main-wrapper">
        <div class="main-content">

            <div class="row my-2">
                <div class="col-md-3 my-2">
                    <div class="card un-card ">
                        <div class="card-body">
                            <a href="<?php echo base_url().'site/units'; ?>" class="d-flex justify-content-between">
                                <p class="ft4 fmon">Units</p>
                                <img src="<?php echo base_url(); ?>assets/images/unt.png" alt="" width="50px">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 my-2">
                    <div class="card un-card ">
                        <div class="card-body">
                            <a href="<?php echo base_url().'site/users'; ?>" class="d-flex justify-content-between">
                                <p class="ft4 fmon">Users</p>
                                <img src="<?php echo base_url(); ?>assets/images/use2.png" alt="" width="50px">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 my-2">
                    <div class="card un-card  u-active">
                        <div class="card-body">
                            <a href="<?php echo base_url().'site/vehicle'; ?>" class="d-flex justify-content-between">
                                <p class="ft4 fmon">Vehicles</p>
                                <img src="<?php echo base_url(); ?>assets/images/vehile.png" alt="" width="50px">
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 my-2">
                    <div class="card un-card ">
                        <div class="card-body">
                            <a href="<?php echo base_url().'site/pets'; ?>" class="d-flex justify-content-between">
                                <p class="ft4 fmon">Pets</p>
                                <img src="<?php echo base_url(); ?>assets/images/pet2.png" alt="" width="50px">
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row "  id="cardList">
                <div class="col-md-7">

                    <div class="input-group border-15">
                        <span class="input-group-text  border-15"><img src="<?php echo base_url(); ?>assets/images/serIcon.png" alt=""
                                width="20px"></span>
                        <input type="text" name="" id="" class="form-control form-Search  border-15  py-2 search"
                            placeholder="Search by house number or name">
                    </div>

                </div>
                <!-- <div class="col-md-5 d-flex justify-content-end ">

                    <div class="btn bg-white d-flex gap-5 align-items-center px-3 border-15">
                        Filter <img src="<?php echo base_url(); ?>assets/images/e.png " alt="" width="20px">
                    </div>

                </div> -->

                <div class="row mt-4 list">
                    <div class="col-md-4 col-lg-3 col-xxl-3 my-2">
                        <div class="card custCard ">
                            <div class="d-flex align-items-center gap-2 bgsm p-1">
                                <img src="<?php echo base_url(); ?>assets/images/veh.png" alt="">
                                <div class="my-1 ">
                                    <div>
                                        <p class="mb-0 fos2 fw-bold"> <span>Toyota Hilux</span> </p>
                                        <p class="mb-0 fos2 license">License Plate: <span> HHH006
                                            </span></p>

                                        <p class="mb-0 fos2 color">Color: <span>Black
                                            </span></p>
                                        <p class="mb-0 fos2 unit">Unit: <span>121
                                            </span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-3">
                                <div class="d-flex justify-content-between align-items-center my-1">
                                    <p class="mb-0 fos2">Esteban Perez Rodriguez</p>
                                    <p class="mb-0 fos2"> <span> Owner
                                        </span></p>


                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-md-4 col-lg-3 col-xxl-3 my-2">
                        <div class="card custCard ">
                            <div class="d-flex align-items-center gap-2 bgsm p-1">
                                <img src="<?php echo base_url(); ?>assets/images/veh.png" alt="">
                                <div class="my-1 ">
                                    <div>
                                        <p class="mb-0 fos2 fw-bold"> <span>Toyota Hilux</span> </p>
                                        <p class="mb-0 fos2 license">License Plate: <span> HHH006
                                            </span></p>

                                        <p class="mb-0 fos2 color">Color: <span>Black
                                            </span></p>
                                        <p class="mb-0 fos2 unit">Unit: <span>121
                                            </span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-3">
                                <div class="d-flex justify-content-between align-items-center my-1">
                                    <p class="mb-0 fos2">Esteban Perez Rodriguez</p>
                                    <p class="mb-0 fos2"> <span> Owner
                                        </span></p>


                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-3 col-xxl-3 my-2">
                        <div class="card custCard ">
                            <div class="d-flex align-items-center gap-2 bgsm p-1">
                                <img src="<?php echo base_url(); ?>assets/images/veh.png" alt="">
                                <div class="my-1 ">
                                    <div>
                                        <p class="mb-0 fos2 fw-bold"> <span>Toyota Hilux</span> </p>
                                        <p class="mb-0 fos2 license">License Plate: <span> HHH006
                                            </span></p>

                                        <p class="mb-0 fos2 color">Color: <span>Black
                                            </span></p>
                                        <p class="mb-0 fos2 unit">Unit: <span>121
                                            </span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-3">
                                <div class="d-flex justify-content-between align-items-center my-1">
                                    <p class="mb-0 fos2">Esteban Perez Rodriguez</p>
                                    <p class="mb-0 fos2"> <span> Owner
                                        </span></p>


                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-lg-3 col-xxl-3 my-2">
                        <div class="card custCard ">
                            <div class="d-flex align-items-center gap-2 bgsm p-1">
                                <img src="<?php echo base_url(); ?>assets/images/veh.png" alt="">
                                <div class="my-1 ">
                                    <div>
                                        <p class="mb-0 fos2 fw-bold"> <span>Toyota Hilux</span> </p>
                                        <p class="mb-0 fos2 license">License Plate: <span> HHH006
                                            </span></p>

                                        <p class="mb-0 fos2 color">Color: <span>Black
                                            </span></p>
                                        <p class="mb-0 fos2 unit">Unit: <span>121
                                            </span></p>
                                    </div>
                                </div>
                            </div>
                            <div class="p-3">
                                <div class="d-flex justify-content-between align-items-center my-1">
                                    <p class="mb-0 fos2">Esteban Perez Rodriguez</p>
                                    <p class="mb-0 fos2"> <span> Owner
                                        </span></p>


                                </div>

                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        </div>

    </main>
    <!--end main wrapper-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/list.js/2.3.1/list.min.js"></script>

<script>
var option1 = {
  valueNames: ['unit', 'color', 'license']
};

var cardList = new List('cardList', option1);
</script>
