boatSearch.html

<template>
    <lightning-layout multiple-rows>
        <!-- Top -->
        <lightning-layout-item size="12">
            <lightning-card title="Find a Boat">
                <!-- New Boat button goes here -->
                <lightning-button label="New Boat" onclick={createNewBoat} slot="actions"></lightning-button>
                <p class="slds-var-p-horizontal_small">
                    <!-- boatSearchForm component goes here -->
                    <c-boat-search-form onsearch={searchBoats}></c-boat-search-form>
                </p>
            </lightning-card>
        </lightning-layout-item>
        <!-- Bottom -->
        <lightning-layout-item size="12" class="slds-p-top_small slds-is-relative">
            <!-- Spinner goes here -->
            <template if:true={isLoading}>
                <lightning-spinner alternative-text="Loading" variant="brand"></lightning-spinner>
            </template>
            <!-- boatSearchResults goes here -->
            <c-boat-search-results onloading={handleLoading} ondoneloading={handleDoneLoading}></c-boat-search-results>
            <!-- onloading={handleLoading} ondoneloading={handleDoneLoading} -->
        </lightning-layout-item>
    </lightning-layout>
</template>