﻿<template>    
    <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow="animation: scale; max-height: 450;autoplay: true">
        <ul class="uk-slideshow-items">
            <li v-for="(slide, index) in slides">
                <div class="uk-position-cover" style="background-position-y: 50px;">
                    <img :data-src="slide.image" uk-img alt="" uk-cover>
                </div>
                <div class="uk-position-center uk-position-small uk-text-center">
                    <h1 v-if="index == 0 && firstH1" uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">{{ slide.header }}</h1>
                    <h2 v-if="index > 0 || !firstH1" uk-slideshow-parallax="y: -50,0,0; opacity: 1,1,0">{{ slide.header }}</h2>
                    <p uk-slideshow-parallax="y: 50,0,0; opacity: 1,1,0" class="uk-text-lead uk-margin-medium-top">{{ slide.header2 }}</p>
                    <a :href="slide.more.link" v-if="slide && slide.more.link" class="uk-button uk-button-default uk-button-large uk-width-medium  uk-margin-small-top">{{ slide.more.text }}</a>
                    <a @click.prevent="slide.more.click" v-if="slide && slide.more.click" class="uk-button uk-button-default uk-button-large uk-width-medium  uk-margin-small-top">{{ slide.more.text }}</a>
                </div>
            </li>
        </ul>
        <div class="uk-position-bottom-center uk-position-small">
            <ul class="uk-dotnav boxed">
                <li v-for="(slide,index) in slides" :uk-slideshow-item="index"><a href="#"></a></li>
            </ul>
        </div>
        <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="next"></a>
        <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="previous"></a>        
    </div>
</template>

<script>
    Component({
        props: {
            slides: Array,
            firstH1: Boolean
        }
    });
</script>