<template>
    <lightning-card title="Video Explorer">
        <lightning-layout pull-to-boundary="medium">
            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
                &nbsp;
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="horizontal-medium">   
                <lightning-input data-name="image"
                    name="enter-search"
                    label="Video Search Criteria"
                    type="search"
                    placeholder="Search Keyword"
                ></lightning-input>             
                   
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
                    <lightning-button label="Get Videos" onclick={getVideos} style="padding-top:20px;margin-top:20px"></lightning-button>
            </lightning-layout-item>
            <lightning-layout-item flexibility="auto" padding="horizontal-medium">
                &nbsp;
            </lightning-layout-item>
    </lightning-layout>
    <div class="slds-grid slds-wrap tilepart slds-scrollable_y slds-m-left_small">
        <template for:each={videoList} for:item="v">
            <div class="slds-has-dividers_around-space slds-box slds-m-around_xxx-small"
                key={v.title} style="max-width: 300;;min-width: 300">
                <article class="slds-tile slds-tile_board">
                    <iframe height="auto" src={v.url} frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <div style="width:250px">
                        <h3 class="slds-tile__title" style="text-align: center;word-wrap: break-word;">
                            {v.title}
                        </h3>
                    </div>
                 </article>
            </div>
        </template>
    </div>
    <template if:true={showPagination}>
   <!--  Pagination Buttons Start -->
        <div class="slds-align_absolute-center">
            <lightning-button label="Previous" icon-name="utility:chevronleft" onclick={previousHandler}
                disabled={isPreviousDisable}>
            </lightning-button>
            
            <lightning-button label="Next" icon-name="utility:chevronright" icon-position="right" onclick={nextHandler}
                disabled={isNextDisable}>
            </lightning-button>
        </div>
        <!--  Pagination Buttons End -->
    <!-- Datatable with Pagination End -->
    </template>
</lightning-card>
</template>