<template>
    <div class="container mx-auto">
        <div class="flex flex-row flex-wrap">
            <aside class="w-full sm:w-1/4">
                <div class="sticky top-0 w-full py-10">
                    <ul class="list-none p-0 m-0 flex flex-col">
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#accordion'
                            }"
                            class="p-2 m-0"
                            >
                                Accordion
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#breadcrumbs'
                            }"
                            class="p-2 m-0"
                            >
                                Breadcrumbs
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#dropdownMenu'
                            }"
                            class="p-2 m-0"
                            >
                                Dropdown Menu Component
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#c2hero'
                            }"
                            class="p-2 m-0"
                            >
                                Hero
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#c2image'
                            }"
                            class="p-2 m-0"
                            >
                                Image
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#c2modal'
                            }"
                            class="p-2 m-0"
                            >
                                Modal
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#c2pagination'
                            }"
                            class="p-2 m-0"
                            >
                                Pagination
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#c2productgallery'
                            }"
                            class="p-2 m-0"
                            >
                                Product Gallery
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#c2sitealert'
                            }"
                            class="p-2 m-0"
                            >
                                Site Alert
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#c2slider'
                            }"
                            class="p-2 m-0"
                            >
                                Slider
                            </button>
                        </li>
                        <li>
                            <button 
                                v-scrollTo="{
                                target: '#c2video'
                            }"
                            class="p-2 m-0"
                            >
                                Video
                            </button>
                        </li>
                    </ul>
                </div>
            </aside>

            <div role="main" class="w-full sm:w-3/4 py-10" id="accordion">

                <section class="mb-10">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-accordion/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                    <h2 class="text-4xl">Accordion Component</h2>
                    <c2-accordion>
                        <template v-slot:title>
                            <h2 class="text-2xl mb-1">
                                Accordion Section title
                            </h2>
                        </template>
                        
                        <template v-slot:desc>
                        <p class="mb-4">
                            Description text here
                        </p>
                        </template>

                        <template v-slot:items>
                        <div class="items-wrapper">
                            <c2-accordion-item 
                                v-for="(item, index) in accordionItems"
                                :key="index"
                                :is-open="item.isOpen"
                                :button-classes="'flex items-center w-full justify-between'"
                                :panel-classes="'w-full'"
                                class="w-full max-w-xs"
                            >
                                <template v-slot:button>
                                    <span class="title">{{ item.name }}</span>
                                    <span class="icon">+</span>
                                </template>
                                
                                <template v-slot:content>
                                    <div 
                                        v-html="item.desc"
                                        class="rich-text"
                                    ></div>
                                </template>
                            </c2-accordion-item>
                        </div>
                        </template>
                    </c2-accordion>
                </section>     

                <section class="mb-10" id="breadcrumbs">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-breadcrumbs/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                    <h2 class="text-4xl mb-4">Breadcrumbs Component</h2>
                    <nav aria-label="breadcrumb">
                        <c2-breadcrumbs
                            class="flex items-center flex-wrap"
                        >
                            <c2-breadcrumb-item
                                v-for="(item, index) in breadcrumbItems"
                                :key="index"
                                :href="item.href"
                                :is-current="breadcrumbItems.length -1 === index"
                                class="flex items-center mr-4"
                            >
                                <template v-slot:content>
                                <template v-if="index === 0">
                                    INSERT SVG
                                </template>
                                <template v-else >
                                    {{ item.name }}
                                </template>
                                </template>

                                <template v-slot:divider>
                                    <span class="ml-4">
                                        >
                                    </span>
                                </template>
                            </c2-breadcrumb-item>
                        </c2-breadcrumbs>
                    </nav>
                </section>  

                <section class="mb-10" id="dropdownMenu">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-dropdown-menu/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                    <h2 class="text-4xl mb-4">Dropdown Menu Component</h2>
                    <c2-dropdown-menu
                        :options="list"
                        :button-classes="'flex items-center'"
                        :list-classes="'flex flex-col'"
                        :list-item-classes="'py-1'"
                    >
                        <template v-slot:icon>
                            <span class="icon">
                                +
                            </span>
                        </template>
                    </c2-dropdown-menu>
                </section>

                <section class="mb-10" id="c2hero">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-hero/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                    <h2 class="text-4xl mb-4">C2 Hero</h2>
                    <c2-hero-banner 
                        :background-image="'http://www.fillmurray.com/g/1200/300'"
                        :background-image-mobile="'http://www.fillmurray.com/g/300/300'"
                        :background-overlay="'rgba(0,0,0,0.5)'"
                        :max-height="'300px'"
                        :mobile-media-breakpoint="'767px'"
                        :aspect-ratio="'4/1'"
                        class="mb-10"
                    >
                    </c2-hero-banner>

                    <c2-hero-banner 
                        :background-color="'#fff'"
                        :background-image="'http://www.fillmurray.com/g/1200/300'"
                        :background-image-mobile="'http://www.fillmurray.com/g/300/300'"
                        :background-overlay="'rgba(0,0,0,0.5)'"
                        content-position="below"
                        :max-height="'300px'"
                        :mobile-media-breakpoint="'767px'"
                        :aspect-ratio="'4/1'"
                        class="mb-10"
                    >
                        <div class="container mx-auto pt-4">
                            <h2 class="text-2xl mb-2">Content Below</h2>
                            <p>Some paragraph text</p>
                        </div>
                    </c2-hero-banner>

                    <c2-hero-banner 
                        :background-color="'#fff'"
                        :background-image="'http://www.fillmurray.com/g/1200/300'"
                        :background-image-mobile="'http://www.fillmurray.com/g/300/300'"
                        :background-overlay="'rgba(0,0,0,0.5)'"
                        content-position="inside"
                        :mobile-media-breakpoint="'767px'"
                        :aspect-ratio="'4/1'"
                        :content-wrapper-classes="'absolute inset-0 flex flex-col items-center justify-center'"
                        class="mb-10"
                    >
                        <div class="p-4 text-white text-center">
                            <h2 class="text-4xl mb-2">Content Inside</h2>
                            <p>Some paragraph text</p>
                        </div>
                    </c2-hero-banner>

                    <c2-hero-banner 
                        :background-color="'#8CD3FF'"
                        content-position="inside"
                        class="mb-10"
                    >
                        <div class="container mx-auto py-32 px-4">
                            <h2 class="text-4xl mb-4">Hero Background color Banner</h2>
                            <p>Some paragraph text</p>
                        </div>
                    </c2-hero-banner>

                    <c2-hero-banner 
                        :background-color="'#8CD3FF'"
                        content-position="inside"
                        class="mb-10"
                    >
                        <div class="container mx-auto py-32 px-4 flex flex-col items-end">
                            <h2 class="text-4xl mb-4">Hero Background color Banner</h2>
                            <p>Some paragraph text</p>
                        </div>
                    </c2-hero-banner>
                </section> 

                <section class="mb-10" id="c2image">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-image/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                        <h2 class="text-4xl mb-4">C2 Image</h2>

                        <c2-image
                            :dont-lazy-load="true"
                            :aspect-ratio="'4/1'"
                            :aspect-ratio-mobile="'1/1'"
                            :src="'http://www.fillmurray.com/g/800/200'"
                            :mobile-src="'http://www.fillmurray.com/g/300/300'"
                            :alt="'Bill Murray'"
                        />
                </section>

                <section id="c2modal">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-modal/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                        <h2 class="text-4xl mb-4">C2 Modal</h2>

                        <button @click="openModal">Open Modal</button>

                        <c2-modal
                            ref="sharedModal"
                            :background-overlay-color="'rgba(0,0,0,0.8)'"
                            :open-btn-classes="'flex items-center justify-center p-2'"
                            :close-btn-classes="'flex items-center justify-center p-2'"
                            :header-classes="'flex items-end justify-between'"
                            :wrapper-classes="'p-4'"
                            :max-width="1280"
                            @modalOpened="modalOpened"
                            @modalClosed="modalClosed"
                        >
                            <template v-slot:open-btn>
                                <span class="text">Open Modal</span>
                                <span class="icon pl-2">+</span>
                            </template>

                            <template v-slot:close-btn>
                                <span class="sr-only">Close Modal</span>
                                <span class="icon">X</span>
                            </template>

                            <template v-slot:header>
                                <h2 class="text-2xl">
                                    Optional Header Title Slot
                                </h2>
                            </template>

                            <template v-slot:body>
                                <div class="pt-4">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                                    <div class="flex justify-end">
                                        <button 
                                            class="text-2xl mt-4"
                                            @click="$refs.sharedModal.closeModal()"
                                        >
                                            Example Custom Cancel Button
                                        </button>
                                    </div>
                                </div>
                            </template>

                        </c2-modal>
                </section>

                <section id="c2pagination">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-pagination/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                        <h2 class="text-4xl mb-4">C2 Pagination</h2>

                        <c2-pagination
                            :max-pages-visible="5"
                            :current-page="1"
                            :total-pages="12"
                            :previous-btn-classes="'flex items-center justify-center h-8 w-8 mr-2'"
                            :next-btn-classes="'flex items-center justify-center h-8 w-8 ml-2'"
                            :list-classes="'flex items-center justify-center'"
                            :list-item-classes="'flex items-center justify-center'"
                            :page-number-btn-classes="'flex items-center justify-center p-2'"
                            :active-page-number-btn-classes="'bg-green-300'"
                            class="flex items-center justify-center"
                            @change="changeCallbackMethod"
                        >
                            <template v-slot:previous-page-btn>
                                <span class="sr-only">Previous Page</span>
                                <span class="icon">
                                    P
                                </span>
                            </template>

                            <template v-slot:next-page-btn>
                                <span class="sr-only">Next Page</span>
                                <span class="icon">
                                    Next
                                </span>
                            </template>
                        </c2-pagination>
                </section>

                <section id="c2productgallery">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-product-gallery/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                    <h2 class="text-4xl mb-4">C2 Product Gallery</h2>

                    <c2-product-gallery 
                        :thumbnails="gallery"
                        :autoplay-videos="false"
                        :aspect-ratio="'16/9'"
                        :thumbnail-wrapper-classes="'absolute top-0 left-0'"
                        :thumbnail-list-classes="'list-none p-0 m-0 flex flex-col'"
                        :thumbnail-item-classes="'mb-2 w-16'"
                        :thumbnail-btn-classes="'relative flex items-center justify-center w-full'"
                        :thumbnail-image-classes="'w-full'"
                        :play-icon-classes="'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'"
                        :featured-wrapper-classes="'flex pl-20'"
                        :featured-image-classes="'w-full object-cover'"
                        :featured-video-classes="'w-full'"
                        class="w-full max-w-2xl mb-10"
                    >
                        <template slot:play-icon>
                            P
                        </template>
                    </c2-product-gallery>

                    <c2-product-gallery 
                        :thumbnails="gallery"
                        :autoplay-videos="false"
                        :aspect-ratio="'16/9'"
                        :thumbnail-wrapper-classes="'absolute bottom-0 left-0'"
                        :thumbnail-list-classes="'list-none p-0 m-0 flex flex-row'"
                        :thumbnail-item-classes="'mr-2 w-16'"
                        :thumbnail-btn-classes="'relative flex items-center justify-center w-full'"
                        :thumbnail-image-classes="'w-full'"
                        :play-icon-classes="'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'"
                        :featured-wrapper-classes="'flex pb-20'"
                        :featured-image-classes="'w-full object-cover'"
                        :featured-video-classes="'w-full'"
                        class="w-full max-w-2xl mb-10"
                    >
                        <template slot:play-icon>
                            P
                        </template>
                    </c2-product-gallery>

                    <c2-product-gallery 
                        :thumbnails="gallery"
                        :autoplay-videos="false"
                        :aspect-ratio="'16/9'"
                        :thumbnail-wrapper-classes="'absolute top-0 right-0'"
                        :thumbnail-list-classes="'list-none p-0 m-0 flex flex-col'"
                        :thumbnail-item-classes="'mb-2 w-16'"
                        :thumbnail-btn-classes="'relative flex items-center justify-center w-full'"
                        :thumbnail-image-classes="'w-full'"
                        :play-icon-classes="'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2'"
                        :featured-wrapper-classes="'flex pr-20'"
                        :featured-image-classes="'w-full object-cover'"
                        :featured-video-classes="'w-full'"
                        class="w-full max-w-2xl mb-10"
                    >
                        <template slot:play-icon>
                            P
                        </template>
                    </c2-product-gallery>
                </section>

                <section id="c2sitealert">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-site-alert/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                    <h2 class="container mx-auto text-4xl mb-4">C2 Site Alert</h2>

                    <c2-site-alert
                        :alert-active="true"
                        :close-btn-classes="'flex align-items justify-center'"
                        class="flex items-center w-full justify-between p-4"
                    >
                        <div class="flex items-center">
                            <div class="icon">
                                <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 32 32">
                                    <path fill="none" d="M14.875,11h2.25V21h-2.25ZM16,27a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,27Z"/>
                                    <path d="M29.8872,28.5386l-13-25a1,1,0,0,0-1.7744,0l-13,25A1,1,0,0,0,3,30H29a1,1,0,0,0,.8872-1.4614ZM14.875,11h2.25V21h-2.25ZM16,27a1.5,1.5,0,1,1,1.5-1.5A1.5,1.5,0,0,1,16,27Z"/>
                                    <rect fill="none" width="32" height="32"/>
                                </svg>
                            </div>

                            <div class="flex flex-col ml-4">
                                <h2>Alert title</h2>
                                <p>Alert message goes here...</p>
                            </div>
                        </div>

                        <template slot:close-btn>
                            <span class="sr-only">
                                Close Alert
                            </span>
                            <span class="icon">
                                <svg height="24px" width="24px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
                                    <polygon fill="#000" points="24 9.4 22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4"/>
                                    <rect fill="none" width="12" height="12"/>
                                </svg>
                            </span>
                        </template>
                    </c2-site-alert>
                </section>

                <section id="c2slider">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-slider/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                    <h2 class="text-4xl mb-4">C2 Slider</h2>

                    <c2-slider
                        v-if="sliderItems && sliderItems.length > 0"
                        :slide-total="sliderItems.length"
                        :slides-to-show="3"
                        :slides-to-show-tablet="2"
                        :slides-to-show-mobile="1"
                        :slide-speed="500"
                        :gutter="16"
                        :media-tablet-query="1023"
                        :media-mobile-query="639"
                        :show-overflow="true"
                        :show-indicators="true"
                        :next-btn-classes="'w-12 h-12 flex items-center justify-center absolute right-0 top-1/2 transform -translate-y-1/2'"
                        :prev-btn-classes="'w-12 h-12 flex items-center justify-center absolute left-0 top-1/2 transform -translate-y-1/2'"
                        :show-button-nav="true"
                        :nav-classes="'flex justify-end pt-4 relative'"
                        :button-nav-wrapper-classes="'absolute left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 flex align-center'"
                        :button-classes="'h-1 w-9 rounded mx-0.5 bg-grey-300'"
                        :active-button-classes="'bg-blue-900'"
                        class="relative pl-20 pr-20"
                    >
                        <template v-slot:slide>
                            <div
                                v-for="(item, index) in sliderItems"
                                :key="index"
                            >
                                {{ item.name }}
                            </div>
                        </template>

                        <template v-slot:prev-btn>
                            <span class="sr-only">
                                Previous Slide
                            </span>
                            <span class="icon">
                                prev
                            </span>
                        </template>

                        <template v-slot:next-btn>
                            <span class="sr-only">
                                Next Slide
                            </span>
                            <span class="icon">
                                next
                            </span>
                        </template>

                        <template v-slot:indicator-divider>
                            /
                        </template>
                    </c2-slider>
                </section>

                <section id="c2video">
                    <a href="https://bitbucket.org/c2group/c2-ui-kit-vue-3/src/master/src/components/c2-video/" target="_blank" class="bg-green-300 text-white py-1 px-2 flex-inline mb-10 rounded-md">Docs</a>
                    <h2 class="text-4xl mb-4">C2 Video</h2>

                    <c2-video
                        :aspect-ratio="'4/1'"
                        :video-src="`https://www.youtube.com/embed/WYP9AGtLvRg`"
                        :video-title="'Video Title'"
                    />
                </section>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'ExamplesPlayground',
        data() {
            return {
                accordionItems: [
                    {
                        isOpen: true,
                        name: 'Accordion Item 1',
                        desc: 'This is some html text <a href="#">Anochor Tag</a>'
                    },
                    {
                        isOpen: false,
                        name: 'Accordion Item 2',
                        desc: 'This is some other html text <a href="#">Anochor Tag</a>'
                    },
                ],
                breadcrumbItems: [
                    {
                        name: 'Home',
                        href: '/'
                    },
                    {
                        name: 'Products',
                        href: 'products'
                    },
                    {
                        name: 'Category',
                        href: 'category'
                    }
                ],
                list: [
                    {
                        name: 'Item One'
                    },
                    {
                        name: 'Item Two'
                    },
                    {
                        name: 'Item Three'
                    }
                ],
                gallery: [
                    {
                        alt: 'Product Image',
                        featuredSrc: 'http://www.fillmurray.com/g/600/600',
                        thumbnailSrc: 'http://www.fillmurray.com/g/60/60',
                        type: null
                    },
                    {
                        alt: 'Product Image',
                        featuredSrc: 'http://www.fillmurray.com/g/601/601',
                        thumbnailSrc: 'http://www.fillmurray.com/g/70/70',
                        type: null
                    },
                    {
                        alt: 'Product Image',
                        featuredSrc: 'http://www.fillmurray.com/g/602/602',
                        thumbnailSrc: 'http://www.fillmurray.com/g/62/62',
                        type: null
                    },
                    {
                        alt: 'Video alt text',
                        thumbnailSrc: 'http://www.fillmurray.com/g/63/63',
                        featuredSrc: '/videos/video.mp4',
                        type: 'mp4'
                    }
                ],
                sliderItems: [
                    {
                        name: 'Item One'
                    },
                    {
                        name: 'Item Two'
                    },
                    {
                        name: 'Item Three'
                    },
                    {
                        name: 'Item Four'
                    },
                    {
                        name: 'Item 5'
                    },
                    {
                        name: 'Item 6'
                    },
                    {
                        name: 'Item 7'
                    }
                ],
            }
        },
        methods: {
            changeCallbackMethod() {
                console.log('pagination changed');
            },
            modalClosed() {
                console.log('modal closed');
            },
            modalOpened() {
                console.log('modal opened');
            },
            openModal() {
                this.$refs.sharedModal.openModal();
            }
        },
    }
</script>

<style lang="scss">
</style>