@extends('layouts.landing')

@section('css_after')

<style>
    .gt-mentorship{
        background: #EAECF9 !important;
        border-radius: 8px; width:154px;
    }

    .theme-dark .gt-mentorship{
        background: #0c0f1f !important;
        border-radius: 8px; width:154px;
    }
</style>

@endsection


@section('js_after')


<script>
    $('#recipeCarousel').carousel({
        interval: 10000
    })

    $('.carousel .carousel-item').each(function(){
        var minPerSlide = 6;
        var next = $(this).next();
        if (!next.length) {
        next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));

        for (var i=0;i<minPerSlide;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }

            next.children(':first-child').clone().appendTo($(this));
        }
    });

</script>
@endsection


@section('title', 'Mentor')


@section('content')
    <div class="container-fluid">
        <div class="row">

            <div class="col-12">
                <p class="gt-text-blue">
                    <a href="{{ route('mentor.topic.index') }}"><i class="fa fa-chevron-left" aria-hidden="true"></i> back</a>
                </p>
            </div>
            <div class="col-12">
                <h4>Topic</h4>
            </div>
        </div>



        <div class="row mt-2 mb-3 ">

            <div class="col-md-12">
                <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3" >
                    <div class="row">
                        <div class="col-md-4">
                            <img class="img-fluid" src="/assets/images/mentor/topic/topic2.svg" alt="">
                        </div>
                        <div class="col-md-8">
                            <div class="mt-3">
                                <p class="gt-text-blue pt-2 pb-2 gt-mentorship text-center" >Mentorship</p>
                            </div>

                            <div>
                                <h4 class="text-muted">Changing Roles</h4>
                                <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Dignissim vel volutpat in ultrices quis. Maecenas proin tincidunt placerat dolor non condimentum est. Vitae sit dui nullam sed id purus in ut.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-12 mb-3 mt-4">
               <h4 class="">Mentors for this Topic</h4>
            </div>

            <div class="row mt-2  mx-auto my-aut">

                <div id="recipeCarousel" class="carousel d-flex slide w-100" data-ride="carousel">
                    <div class="carousel-inner w-100" role="listbox">
                        <div class="carousel-item active">
                            <div class="col-md-3 text-center  col-sm-6 pe-2 ps-2">
                                <div class=" card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
                                    <div class="rounded-circle pt-5">
                                        <img src="/assets/images/mentor/profile-image.svg" alt="">
                                    </div>
                                    <h5 class="mt-2 mb-2">Pesh Madi <img src="/assets/images/mentor/ca.svg" alt=""></h5>
                                    <p class="text-muted">Lead Product Designer & Frontend Engineer
                                    </p>
                                    <div class="text-warning">
                                        <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                    </div>
                                    <p class="mt-4">
                                        <a href="" class="btn gt-btn-blue pl-5 pr-5">View Profile</a>
                                    </p>

                                </div>
                            </div>
                        </div>
                        <div class="carousel-item ">
                            <div class="col-md-3 text-center  col-sm-6 pe-2 ps-2">
                                <div class=" card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
                                    <div class="rounded-circle pt-5">
                                        <img src="/assets/images/mentor/profile-image.svg" alt="">
                                    </div>
                                    <h5 class="mt-2 mb-2">Pesh Madi <img src="/assets/images/mentor/ca.svg" alt=""></h5>
                                    <p class="text-muted">Lead Product Designer & Frontend Engineer
                                    </p>
                                    <div class="text-warning">
                                        <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                    </div>
                                    <p class="mt-4">
                                        <a href="" class="btn gt-btn-blue pl-5 pr-5">View Profile</a>
                                    </p>

                                </div>

                            </div>
                        </div>
                        <div class="carousel-item ">
                            <div class="col-md-3 text-center  col-sm-6 pe-2 ps-2">
                                <div class=" card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
                                    <div class="rounded-circle pt-5">
                                        <img src="/assets/images/mentor/profile-image.svg" alt="">
                                    </div>
                                    <h5 class="mt-2 mb-2">Pesh Madi <img src="/assets/images/mentor/ca.svg" alt=""></h5>
                                    <p class="text-muted">Lead Product Designer & Frontend Engineer
                                    </p>
                                    <div class="text-warning">
                                        <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                    </div>
                                    <p class="mt-4">
                                        <a href="" class="btn gt-btn-blue pl-5 pr-5">View Profile</a>
                                    </p>

                                </div>

                            </div>
                        </div>
                        <div class="carousel-item ">
                            <div class="col-md-3 text-center  col-sm-6 pe-2 ps-2">
                                <div class=" card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
                                    <div class="rounded-circle pt-5">
                                        <img src="/assets/images/mentor/profile-image.svg" alt="">
                                    </div>
                                    <h5 class="mt-2 mb-2">Pesh Madi <img src="/assets/images/mentor/ca.svg" alt=""></h5>
                                    <p class="text-muted">Lead Product Designer & Frontend Engineer
                                    </p>
                                    <div class="text-warning">
                                        <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                    </div>
                                    <p class="mt-4">
                                        <a href="" class="btn gt-btn-blue pl-5 pr-5">View Profile</a>
                                    </p>

                                </div>

                            </div>
                        </div>
                        <div class="carousel-item ">
                            <div class="col-md-3 text-center  col-sm-6 pe-2 ps-2">
                                <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
                                    <div class="rounded-circle pt-5">
                                        <img src="/assets/images/mentor/profile-image.svg" alt="">
                                    </div>
                                    <h5 class="mt-2 mb-2">Pesh Madi <img src="/assets/images/mentor/ca.svg" alt=""></h5>
                                    <p class="text-muted">Lead Product Designer & Frontend Engineer
                                    </p>
                                    <div class="text-warning">
                                        <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                    </div>
                                    <p class="mt-4">
                                        <a href="" class="btn gt-btn-blue pl-5 pr-5">View Profile</a>
                                    </p>

                                </div>

                            </div>
                        </div>
                        <div class="carousel-item ">
                            <div class="col-md-3 text-center  col-sm-6 pe-2 ps-2">
                                <div class=" card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
                                    <div class="rounded-circle pt-5">
                                        <img src="/assets/images/mentor/profile-image.svg" alt="">
                                    </div>
                                    <h5 class="mt-2 mb-2">Pesh Madi <img src="/assets/images/mentor/ca.svg" alt=""></h5>
                                    <p class="text-muted">Lead Product Designer & Frontend Engineer
                                    </p>
                                    <div class="text-warning">
                                        <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
                                    </div>
                                    <p class="mt-4">
                                        <a href="" class="btn gt-btn-blue pl-5 pr-5">View Profile</a>
                                    </p>

                                </div>

                            </div>
                        </div>
                    </div>
                    <a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
                        <span class="bg-dark border border-dark rounded-circle" aria-hidden="true">
                            <i class="mdi mdi-chevron-left px-2" style="font-size: 28px"></i>
                        </span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
                        <span class=" bg-dark border border-dark rounded-circle" aria-hidden="true">
                            <i class="mdi mdi-chevron-right px-2" style="font-size: 28px"></i>
                        </span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>



            </div>




        </div>
    </div>


@endsection