@page "/SdvShop/Shop/Product/{Id}"

@if (this.model != null)
{
    <ProductBanner Id="@this.model.Id" Name="@this.model.Name" CreatedOn="@this.model.CreatedOn" UpdatedOn="@this.model.UpdatedOn"></ProductBanner>

    <ProductDetails Model="this.model"></ProductDetails>
    <!--================Product Description Area =================-->
    <section class="product_description_area">
        <div class="container">
            <ul class="nav nav-tabs" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link"
                       id="home-tab"
                       data-toggle="tab"
                       href="#home"
                       role="tab"
                       aria-controls="home"
                       aria-selected="true">Description</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                       id="profile-tab"
                       data-toggle="tab"
                       href="#profile"
                       role="tab"
                       aria-controls="profile"
                       aria-selected="false">Specification</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link"
                       id="contact-tab"
                       data-toggle="tab"
                       href="#contact"
                       role="tab"
                       aria-controls="contact"
                       aria-selected="false">Comments</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active"
                       id="review-tab"
                       data-toggle="tab"
                       href="#review"
                       role="tab"
                       aria-controls="review"
                       aria-selected="false">Reviews</a>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <ProductDescription Description="@this.model.Description"></ProductDescription>
                <ProductSpecification Specification="@this.model.SpecificationsDescription"></ProductSpecification>
                <CommentsSection ProductId="@this.model.Id"></CommentsSection>
                <ReviewSection ProductId="@this.model.Id"></ReviewSection>
            </div>
        </div>
    </section>
}
else
{
    <div class="loader"></div>
}

@code {
    [Parameter]
    public string Id { get; set; }

    private ProductViewModel model;

    protected override async Task OnInitializedAsync()
    {
        model = await this.ProductService.ExtractProductById(this.Id);
    }
}