Vue.component("feature-slider",{props:{keywords:String,itemLimit:Number,searchParams:Object,id:String,type:String},data:function(){return{slides:[]}},computed:{slideComponent:function(){let prefix="feature";return this.type&&(prefix=this.type),prefix+"-slide"},indicatorListClasses:function(){let classes="";return this.type==="banner"&&(classes="dak-banner-slider-indicators"),classes}},methods:{getUrl:function(){let apiUrl=this.type==="banner"?"/api/bannerimages":"/api/featureslides",url=new URL(apiUrl,window.location.href);if(this.keywords&&url.searchParams.append("keywords",this.keywords),this.itemLimit&&url.searchParams.append("itemLimit",this.itemLimit),this.searchParams)for(let paramName in this.searchParams)this.searchParams.hasOwnProperty(paramName)&&url.searchParams.append(paramName,this.searchParams[paramName]);return url}},watch:{slides:function(){this.$nextTick(function(){let $this=$("#"+this.id);$this.carousel("dispose");$this.carousel({ride:"carousel"})})}},created:function(){let getUrl=this.getUrl();vm=this;$.ajax({url:getUrl.href,context:this}).then(data=>{this.slides=data})},template:`
    <div class="carousel slide carousel-fade" data-interval="8000" v-bind:id="id">
      <ol v-if="slides.length > 1" class="carousel-indicators d-none d-md-flex" :class="indicatorListClasses">
        <li v-for="(slide, index) in slides"
            v-bind:data-target="'#' + id"
            v-bind:data-slide-to="index"
            v-bind:class="{active: index === 0}"></li>
      </ol>
      <div class="carousel-inner">
        <component  v-for="(slide, index) in slides" v-bind:key="slide.imageUrl"
                    :is="slideComponent"
                    v-bind="{ slide: slide, isActive: index === 0, noIndicators: slides.length === 1 }"></component>
      </div>
    </div>`});Vue.component("feature-slide",{props:{slide:Object,isActive:Boolean},computed:{backgroundImage:function(){return'url("'+this.slide.imageUrl+'")'}},template:`
    <div class="carousel-item dak-feature-slider-item" v-bind:class="{ active: isActive }" v-bind:style="{ 'background-image': backgroundImage }">
      <div class="carousel-caption dak-feature-slider-caption" v-bind:class="[ slide.textPosition === 'Left' ? 'left' : slide.textPosition === 'Right' ? 'right' : '' ]">
        <div class="dak-feature-slider-title">{{ slide.title }}</div>
        <div>
          <span>{{ slide.shortTitle }}</span> | <span><strong>{{ slide.location }}</strong></span>
        </div>
        <a class="btn btn-lg btn-outline-light mt-3 text-uppercase" v-bind:href="slide.link">{{ slide.buttonText }}</a>
      </div>
    </div>`});Vue.component("banner-slide",{props:{slide:Object,isActive:Boolean,noIndicators:Boolean},data:function(){return{width:1200,height:390}},computed:{imageUrl:function(){return`${this.slide.imageUrl}?width=${this.width}&height=${this.height}&mode=crop`}},methods:{setDimensions:function(){this.$el.parentElement.clientWidth<=480?(this.width=480,this.height=300):(this.width=1200,this.height=390)}},mounted:function(){window.addEventListener("resize",()=>{this.setDimensions()});this.setDimensions()},template:`
    <div class="carousel-item" :class="{ active: isActive }">
      <a v-if="slide.link" :href="slide.link" class="text-white">
        <img :src="imageUrl" class="d-block w-100" />
      </a>
      <img v-else :src="imageUrl" class="d-block w-100" />
      <div class="carousel-caption dak-banner-slider-caption px-1 w-100" :class="{ 'dak-no-indicators': noIndicators }">
        <a v-if="slide.link" :href="slide.link" class="text-white">
          <p class="m-0"><strong>{{ slide.title }}</strong> {{ slide.location }}</p>
        </a>
        <p v-else class="m-0"><strong>{{ slide.title }}</strong> {{ slide.location }}</p>
      </div>
    </div>`});Daktronics.Components.RegisterVues(".featureSlider, .bannerSlider");