I am getting error 

Challenge Not yet complete... here's what's wrong:
We can’t find the correct settings in the component boatReviews HTML. Review the div tag related to when there are reviews to display, including the classes and styles, according to the requirements.

in LWC superbadge challenge

here is my code

<--boatReviews.html -->

<template>
    <div class="slds-scrollable--y">
        <template if:true={reviewsToShow}>
            <template if:true={isLoading}>
                <lightning-spinner alternative-text="Loading" size="small" variant="brand"></lightning-spinner>
            </template>
           <ul class="slds-feed__list">
               <!-- start iteration -->
               <template for:each={boatReviews.data} for:item="boatReview">
                    <li class="slds-feed__item" key={boatReview.Id}>
                        <article class="slds-post">
                            <header class="slds-post__header slds-media">
                                <div class="slds-media__figure">
                                    <!-- display the creator’s picture -->
                                    <lightning-avatar variant="circle" src={boatReview.CreatedBy.SmallPhotoUrl}>

                                    </lightning-avatar>
                                </div>
                                <div class="slds-media__body">
                                    <div class="slds-grid slds-grid_align-spread slds-has-flexi-truncate">
                                        <p>
                                            <a onclick={navigateToRecord}
                                                data-record-id={boatReview.CreatedBy.Id}
                                                title={boatReview.CreatedBy.Name}>{boatReview.CreatedBy.Name}</a>
                                            
                                            <span>
                                                <!-- display creator’s company name -->
                                               - {boatReview.CreatedBy.CompanyName}
                                            </span>
                                        </p>
                                    </div>
                                    <p class="slds-text-body_small">
                                        <!-- display created  date -->
                                        <lightning-formatted-date-time value={boatReview.CreatedDate}>
                                        </lightning-formatted-date-time>
                                        
                                    </p>
                                </div>
                            </header>
                            <div class="slds-text-longform">
                                <p class="slds-text-title_caps">
                                    <!-- display Name -->
                                    {boatReview.Name}
                                </p>
                                <!-- display Comment__c -->
                                {boatReview.Comment__c}
                            </div>
                            <!-- display five star rating on readonly mode -->
                            <c-five-star-rating read-only="true" value={boatReview.Rating__c}></c-five-star-rating>
                        </article>
                    </li>
            </template>
               <!-- end iteration -->
           </ul>
        </template>
        <template if:false={reviewsToShow}>
            <div class="slds-align_absolute-center">
                No reviews available
            </div>            
        </template>
    </div>
</template>

<-- boatReviews.js -->

import {
    LightningElement,
    api,
    track
} from 'lwc';
import getAllReviews from '@salesforce/apex/BoatDataService.getAllReviews';
import {
    NavigationMixin
} from 'lightning/navigation';
import {
    refreshApex
} from '@salesforce/apex';

export default class BoatReviews extends NavigationMixin(LightningElement) {
    // Private
    boatId;
    error;
    boatReviews = [];
    isLoading = false;

    // Getter and Setter to allow for logic to run on recordId change
    @api
    get recordId() {
        return this.boatId;
    }

    set recordId(value) {
        //sets boatId attribute
        this.setAttribute('boatId', value);
        //sets boatId assignment
        this.boatId = value;
        //get reviews associated with boatId
        this.getReviews();
    }

    // Getter to determine if there are reviews to display
    get reviewsToShow() {
        return this.boatReviews && this.boatReviews.length > 0 ? true : false;
    }

    // Public method to force a refresh of the reviews invoking getReviews
    @api
    refresh() {
        refreshApex(this.getReviews());
    }

    // Imperative Apex call to get reviews for given boat
    // returns immediately if boatId is empty or null
    // sets isLoading to true during the process and false when it’s completed
    // Gets all the boatReviews from the result, checking for errors.
    getReviews() {
        if (this.boatId == null || this.boatId == '') {
            return;
        }
        this.isLoading = true;
        this.error = undefined;
        getAllReviews({
                boatId: this.recordId
            })
            .then(result => {
                this.boatReviews = result;
                this.isLoading = false;
            }).catch(error => {
                this.error = error.body.message;
            }).finally(() => {
                this.isLoading = false;
            });
    }

    // Helper method to use NavigationMixin to navigate to a given record on click
    navigateToRecord(event) {
        this[NavigationMixin.Navigate]({
            type: "standard__recordPage",
            attributes: {
                recordId: event.target.dataset.recordId,
                actionName: "view"
            }
        });
    }
}

<-- BoatDataService.cls -->

public with sharing class BoatDataService {

    public static final String LENGTH_TYPE = 'Length'; 
    public static final String PRICE_TYPE = 'Price'; 
    public static final String TYPE_TYPE = 'Type'; 
	
    @AuraEnabled(cacheable=true)
    public static List<Boat__c> getBoats(String boatTypeId) {
        // Without an explicit boatTypeId, the full list is desired
        String query = 'SELECT '
                     + 'Name, Description__c, Geolocation__Latitude__s, '
                     + 'Geolocation__Longitude__s, Picture__c, Contact__r.Name, '
                     + 'BoatType__c, BoatType__r.Name, Length__c, Price__c '
                     + 'FROM Boat__c';
        if (String.isNotBlank(boatTypeId)) {
            query += ' WHERE BoatType__c = :boatTypeId';
        }
        query += ' WITH SECURITY_ENFORCED ';
        return Database.query(query);
    }
	
    @AuraEnabled(cacheable=true)
    public static List<Boat__c> getSimilarBoats(Id boatId, String similarBy) {
        List<Boat__c> similarBoats = new List<Boat__c>();
        List<Boat__c> parentBoat = [SELECT Id, Length__c, Price__c, BoatType__c, BoatType__r.Name
                                    FROM Boat__c
                                    WHERE Id = :boatId 
                                    WITH SECURITY_ENFORCED];
        if (parentBoat.isEmpty()) {
            return similarBoats;
        }
        if (similarBy == LENGTH_TYPE) {
            similarBoats = [
                SELECT Id, Contact__r.Name, Name, BoatType__c, BoatType__r.Name, Length__c, Picture__c, Price__c, Year_Built__c
                FROM Boat__c
                WHERE Id != :parentBoat.get(0).Id
                AND (Length__c >= :parentBoat.get(0).Length__c / 1.2)
                AND (Length__c <= :parentBoat.get(0).Length__c * 1.2)
                WITH SECURITY_ENFORCED
                ORDER BY Length__c, Price__c, Year_Built__c
            ];
        } else if (similarBy == PRICE_TYPE) {
            similarBoats = [
                SELECT Id, Contact__r.Name, Name, BoatType__c, BoatType__r.Name, Length__c, Picture__c, Price__c, Year_Built__c
                FROM Boat__c
                WHERE Id != :parentBoat.get(0).Id
                AND (Price__c >= :parentBoat.get(0).Price__c / 1.2)
                AND (Price__c <= :parentBoat.get(0).Price__c * 1.2)
                WITH SECURITY_ENFORCED
                ORDER BY Price__c, Length__c, Year_Built__c
            ];
        } else if (similarBy == TYPE_TYPE) {
            similarBoats = [
                SELECT Id, Contact__r.Name, Name, BoatType__c, BoatType__r.Name, Length__c, Picture__c, Price__c, Year_Built__c
                FROM Boat__c
                WHERE Id != :parentBoat.get(0).Id
                AND (BoatType__c = :parentBoat.get(0).BoatType__c)
                WITH SECURITY_ENFORCED
                ORDER BY Price__c, Length__c, Year_Built__c
            ];
        }
        return similarBoats;
    }
	
    @AuraEnabled(cacheable=true)
    public static List<BoatType__c> getBoatTypes() {
        return [SELECT Name, Id FROM BoatType__c WITH SECURITY_ENFORCED ORDER BY Name];
    }
	
    @AuraEnabled
    public static List<BoatReview__c> getAllReviews(Id boatId) {
        return [
            SELECT
                Id,
                Name,
                Comment__c,
                Rating__c,
                LastModifiedDate,
                CreatedDate,
                CreatedBy.Name,
                CreatedBy.SmallPhotoUrl,
                CreatedBy.CompanyName
            FROM
                BoatReview__c
            WHERE
                Boat__c =:boatId
            WITH SECURITY_ENFORCED
            ORDER BY
                CreatedDate DESC
        ];
    }
	
    
    // Assume this may be an API that return this data, not a SOQL query
    @AuraEnabled(cacheable=true)
    public static String getBoatsByLocation(Decimal latitude, Decimal longitude, String boatTypeId) {
        // Without an explicit boatTypeId, the full list is desired
        String query = 'SELECT Name, Geolocation__Latitude__s, Geolocation__Longitude__s FROM Boat__c ';
        if (String.isNotBlank(boatTypeId)) {
            query += 'WHERE BoatType__c = :boatTypeId ';
        }
        query += ' WITH SECURITY_ENFORCED ORDER BY DISTANCE(Geolocation__c, GEOLOCATION(:latitude, :longitude), \'mi\') LIMIT 10';
        return JSON.serialize(Database.query(query));
    }
}