@page "/guideprofile"
@using TIAMSharedUI.Shared
<PageTitle>Service provider</PageTitle>

<section class="h-100">
    <div class="container-fluid h-100 p-0">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col-12">
                <div>
                    <div class="text-white d-flex flex-row" style="background-position:center; background-image: url('https://images.unsplash.com/photo-1613680042115-cc541362bc41?auto=format&fit=crop&q=80&w=2070&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') ; height:200px;">
                        <div class="ms-4 mt-5 d-flex flex-column" style="width: 150px;">
                            <img src="https://images.unsplash.com/photo-1520295187453-cd239786490c?auto=format&fit=crop&q=80&w=1976&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
                                 alt="Generic placeholder image" class="img-fluid img-thumbnail mt-4 mb-2"
                                 style="width: 150px; z-index: 1">
                            <!--button type="button" class="btn btn-outline-dark" data-mdb-ripple-color="dark"
                                    style="z-index: 1;">
                                Edit profile
                            </button-->
                        </div>
                        <div class="ms-3" style="margin-top: 130px;">
                            <h5>Klára Kovács</h5>
                            <p>Budapest</p>
                        </div>
                    </div>
                    <div class="p-4 text-black" style="background-color: #f8f9fa;">
                        <div class="d-flex justify-content-end text-center py-1">
                            <div>
                                <p class="mb-1 h5">253</p>
                                <p class="small text-muted mb-0">Photos</p>
                            </div>
                            <div class="px-3">
                                <p class="mb-1 h5">1026</p>
                                <p class="small text-muted mb-0">Followers</p>
                            </div>
                            <div>
                                <p class="mb-1 h5">478</p>
                                <p class="small text-muted mb-0">Following</p>
                            </div>
                        </div>
                    </div>
                    <div class="card-body p-4 text-black">
                        <div class="mb-5">
                            <p class="lead fw-normal mb-1">Features</p>
                            <div class="p-4" style="background-color: #f8f9fa;">
                                <p class="font-italic mb-1">Five star</p>
                                <p class="font-italic mb-1">Business hotel</p>
                                <p class="font-italic mb-0">Wellness</p>
                            </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <p class="lead fw-normal mb-0">Tours</p>
                            <p class="mb-0"><a href="#!" class="text-muted">Show all</a></p>
                        </div>
                        <div class="row">
                            <FeaturedItems ItemType=0 DisplayTitle=false></FeaturedItems>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

@code {

}