Vue.component("customer-quotes",{props:{keywords:String,itemLimit:Number,color:String,id:String},data:function(){return{testimonials:[]}},watch:{testimonials:function(){this.$nextTick(function(){let $this=$("#"+this.id);$this.carousel("dispose");$this.carousel({ride:"carousel"})})}},created:function(){let getUrl=new URL("/api/testimonials",window.location.href);this.keywords&&getUrl.searchParams.append("keywords",this.keywords);this.itemLimit&&getUrl.searchParams.append("itemLimit",this.itemLimit);$.ajax(getUrl.href).then(data=>{this.testimonials=data,this.$emit("loaded",{quoteCount:data.length})})},template:`
<div v-if="testimonials.length > 0" class="carousel slide carousel-fade" data-interval="15000" :id="id">
    <div class="carousel-inner dak-quote-carousel-inner">
    <quote-slide v-for="(testimonial, index) in testimonials" :key="testimonial.quote"
                 :testimonial="testimonial"
                 :color="color"
                 :isActive="index === 0" />
    </div>
</div>`});Vue.component("quote-slide",{props:{testimonial:Object,color:String,isActive:Boolean},computed:{quoteSource:function(){let quoteSource=[];return this.testimonial.sourceName&&quoteSource.push(this.testimonial.sourceName),this.testimonial.sourceJobTitle&&quoteSource.push(this.testimonial.sourceJobTitle),this.testimonial.sourceCompany&&quoteSource.push(this.testimonial.sourceCompany),quoteSource.join(", ")}},template:`
    <div class="carousel-item dak-quote-item text-center" :class="{active: isActive}">
      <div class="dak-quote-outer">
        <div class="dak-quote" :class="'text-' + color">
          <q>{{ testimonial.quote }}</q>
        </div>
        <div class="text-center" :class="{'text-white': color === 'white'}">
          <em>{{ quoteSource }}</em>
        </div>
        <a v-if="testimonial.buttonText && testimonial.link" class="btn" :href="testimonial.link">{{ testimonial.buttonText }}</a>
      </div>
    </div>`});Daktronics.Components.RegisterVues(".customer-quotes");
var showSingleVideoMediaQuery="(min-width:768px)";Vue.component("video-search",{props:{keywords:String,itemLimit:Number,supportOnly:Boolean,showPaging:Boolean,searchFields:Array},data:function(){return{videos:[],selectedVideo:null,showSingleVideo:!0,totalResults:0,skipResults:0,autoplay:!1}},watch:{keywords(){this.getResults()}},methods:{getResults:function(setSelectedVideo=false){let requestBody={searchQuery:this.keywords,itemLimit:this.itemLimit,skip:this.skipResults,searchFields:this.searchFields,otherOptions:{supportOnly:this.supportOnly}};$.ajax({url:"/api/videos/search",method:"POST",contentType:"application/json",context:this,data:JSON.stringify(requestBody)}).then(response=>{this.totalResults=response.totalCount,this.videos=response.results,(!this.selectedVideo||setSelectedVideo)&&(this.selectedVideo=this.videos[0])})},changePage:function(skipResults){let changeSelectedVideo=this.itemLimit===1;this.skipResults=skipResults;this.getResults(changeSelectedVideo)},selectionChange:function(videoId){this.autoplay=!0;this.selectedVideo=this.videos.find(v=>v.id===videoId)}},mounted:function(){this.getResults()},template:`
<div class="">
	<div v-show="videos.length">
		<video-embed v-if="selectedVideo" :embed-url="selectedVideo.embedUrl" :autoplay="autoplay" :title="selectedVideo.title"></video-embed>
		<div v-if="totalResults > 1" class="row justify-content-center mt-4">
			<video-search-result v-for="video in videos"
								 :key="video.id"
								 :video="video"
								 :selected="video.id === selectedVideo.id"
								 @selection-change="selectionChange($event)"></video-search-result>
		</div>
		<search-paging v-if="showPaging"
						class="mt-4"
						:totalRows="totalResults"
						:start-row="skipResults"
						:row-limit="itemLimit"
						:page-limit="3"
						@change-page="changePage($event)"></search-paging>
	</div>
	<div v-if="!videos.length" class="text-center">
		Sorry, we couldn't find any relevant videos.
	</div>
</div>`});Vue.component("video-embed",{props:{embedUrl:String,title:String,autoplay:Boolean,lazyLoad:{type:Boolean,"default":!0}},computed:{embedCode(){if(!this.embedUrl)return null;let $embed=$(this.embedUrl),url=new URL($embed.attr("src")||$embed.attr("data-src")),autoplayUrlParamValue=this.autoplay?"1":"0";return url.searchParams.set("autoplay",autoplayUrlParamValue),this.lazyLoad?($embed.addClass("embed-responsive-item lazyload"),$embed.attr("loading","lazy"),$embed.attr("data-src",url.toString()),$embed.removeAttr("src")):$embed.attr("src",url.toString()),$embed.attr("title")||$embed.attr("title",this.title),$embed[0].outerHTML}},template:'<div class="embed-responsive embed-responsive-16by9 mx-auto w-100" v-html="embedCode"><\/div>'});Vue.component("video-search-result",{props:{video:Object,selected:Boolean},data:function(){return{thumbnailSize:"mqdefault"}},computed:{thumbnail:function(){let thumbnail=null,$embed=$(this.video.embedUrl),embedSrc=$embed.attr("data-src")||$embed.attr("src"),videoIdMatches=/(\/embed\/)(.*?)(\?|$)/gi.exec(embedSrc),videoId;return videoIdMatches&&(videoId=videoIdMatches[2],thumbnail=`https://i.ytimg.com/vi/${videoId}/${this.thumbnailSize}.jpg`),thumbnail}},template:`
<div class="card col-4 border-0 p-2 p-sm-3" :class="[selected ? 'gray-background selected' : '']">
  <img class="card-img-top" :src="thumbnail" :alt="video.title">
  <div class="card-body p-0 pt-1">
    <p class="caption text-right">Length: {{ video.videoLength }}</p>
    <a v-if="!selected" href="#" class="stretched-link" @click.prevent="$emit('selection-change', video.id)"><h4 class="mt-2">{{ video.title }}</h4></a>
    <h4 v-else class="mt-2">{{ video.title }}</h4>
  </div>
</div>`});Daktronics.Components.RegisterVues(".video-search");Vue.component("video-gallery",{props:{searchQuery:String,defaultKeywords:String,searchFields:String,itemLimit:{type:Number,"default":5},showPaging:{type:Boolean,"default":!1},supportOnly:{type:Boolean,"default":!1},facetFields:{type:Array,"default":function(){return[]}}},computed:{videoResults(){return this.$store.state.results.search},totalResults(){return this.$store.state.results.totalCount},skipResults(){return this.$store.state.query.skip}},methods:{changePage(skipResults){this.$store.dispatch("skipResults",skipResults)},changeSelection(videoId){let video=this.videoResults.find(v=>v.id===videoId);this.$emit("selection-change",video)},loadVideoFromUrlName(urlName){$.ajax({url:`/api/videos/getByName/${urlName}?supportOnly=${this.supportOnly}`,method:"GET"}).then(response=>{response&&this.$emit("selection-change",response)}).catch(error=>{this.$emit("selection-change",{error})})},setSelectedVideoOnLoad(){let urlName=this.$route.query.video;if(urlName){let video=this.videoResults.find(v=>v.urlName===urlName);video?this.changeSelection(video.id):this.loadVideoFromUrlName(urlName)}}},created:function(){this.$store.dispatch("init",{context:{url:"/api/videos/search"},query:{userKeywords:this.searchQuery,defaultKeywords:this.defaultKeywords,itemLimit:this.itemLimit,facetFields:this.facetFields,otherSearchOptions:{supportOnly:this.supportOnly}}}).then(()=>{this.setSelectedVideoOnLoad()})},template:`
<div>
	<div class="row justify-content-center mt-4">
		<template v-if="videoResults && videoResults.length">
			<video-search-result v-for="video in videoResults" :key="video.id"
								:video="video"
								@selection-change="changeSelection"></video-search-result>
		</template>
		<div class="col-auto" v-else>
			Sorry, we couldn't find any relevant videos.
		</div>
	</div>
	<search-paging v-if="showPaging" class="my-5"
				:total-rows="totalResults"
				:start-row="skipResults"
				:row-limit="itemLimit"
				:page-limit="5"
				@change-page="changePage($event)"></search-paging>
</div>`});Vue.component("video-details",{props:{video:{type:Object,"default":function(){return null}}},data(){return{modalSelector:"#video-details-modal"}},computed:{error(){var _a;if((_a=this.video)!==null&&_a!==void 0)return _a.error}},methods:{setUrl(urlName){if(!this.error){let routeQuery=this.$route.query,query=Object.assign({},routeQuery);urlName?query.video=urlName:delete query.video;query.video!==routeQuery.video&&(routeQuery.video?this.$router.replace({query}):this.$router.push({query}))}},close(){this.setUrl(null);this.$emit("close")}},mounted(){this.setUrl(this.video.urlName);$(this.modalSelector).modal("show").on("hidden.bs.modal",()=>{this.close()});window.onpopstate=()=>{$(this.modalSelector).modal("hide")}},template:`
<div id="video-details-modal" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
			<div class="modal-header align-items-center">
				<h4 class="m-0">{{ video.title }}</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div v-if="error" class="modal-body text-center">
				<div v-if="error.status === 404">
                    <h2>Not Found</h2>
                    <p>Sorry, we couldn't find the requested video.</p>
                </div>
				<div v-else-if="error.status === 401">
					<h2>Sorry, you don't have access.</h2>
					<p>You do not have access to this video. <a href="/Account/Login">Make sure you're logged in</a>, then talk to your sales rep if that does not resolve the issue.</p>
				</div>
                <div v-else>
                    <h2>Error Occured</h2>
                    <p>Sorry, there was a problem getting details for this video.</p>
                </div>
			</div>
			<div v-else class="modal-body">
				<div class="row justify-content-center">
					<div class="col-12 col-lg-9">
						<video-embed :embed-url="video.embedUrl" :autoplay="false" :lazy-load="false" :title="video.title"></video-embed>
						<p class="caption text-right"></p>
						<h1 class="mt-5">{{ video.title }}</h1>
						<h2 class="pageSubTitle">{{ video.subTitle }}</h2>
						<div v-html="video.marketingHTML"></div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>`});$("#video-gallery-search").length&&new Vue({el:"#video-gallery-search",router:Daktronics.Components.GetVueRouter(),store:makeSearchComponentStore(),data:{selectedVideo:null},computed:{searchQuery(){return this.$store.state.query.userKeywords}},methods:{updateUserSearchQuery(keywords){this.$store.dispatch("newKeywordQuery",keywords).then(()=>{$("#video-gallery-search input[type=text]").get(0).blur()})},restartSearch(){this.$store.dispatch("reset")}},created:function(){this.$store.commit("setRouter",this.$router)}});
Daktronics.Conversions=Daktronics.Conversions||{millimeterToFeet:function(mm){return mm/304.8},millimeterToInch:function(mm){return mm/25.4},feetToMillimeter:function(ft){return ft*304.8},meterToInches:function(m){return m*39.3700787},millimeterToMeter:function(mm){return mm/1e3},millimeterToCentimeter:function(mm){return mm/10},meterToMillimeter:function(m){return m*1e3},feetToMeter:function(ft){return Daktronics.Conversions.millimeterToMeter(Daktronics.Conversions.feetToMillimeter(ft))},meterToFeet:function(m){return Daktronics.Conversions.millimeterToFeet(Daktronics.Conversions.meterToMillimeter(m))},poundToKilo:function(lb){return lb/2.2046},inchesToFeet:function(inches,inchesFactionDigits=1){var feet=Math.floor(inches/12),inchesPrecision=Math.pow(10,inchesFactionDigits),inchesRemainder=Math.round(inches%12*inchesPrecision)/inchesPrecision,inchesRounded,returnVal;if(inchesRemainder>0&&inchesRemainder<12){let inchesFormat=new Intl.NumberFormat("en-US",{maximumFractionDigits:inchesFactionDigits});inchesRounded=inchesFormat.format(inchesRemainder)}else inchesRemainder===12&&feet++;return returnVal=feet+"'",inchesRounded&&(returnVal+=` ${inchesRounded}"`),returnVal},inchesToFeetDecimal:function(inches){return inches/12},inchesToFeetRounded:function(inches,feetDecimalPlaces=0){const feetPrecision=Math.pow(10,feetDecimalPlaces);return Math.round(Daktronics.Conversions.inchesToFeetDecimal(inches)*feetPrecision)/feetPrecision},inchesToCentimeter:function(inches){return inches*2.54},inchesToMeters:function(inches,formatted=false){let val=inches/39.3700787;return formatted?Daktronics.Conversions.decimalRoundedToHundreths(val)+"m":val},feetToInches:function(ft){return ft*12},mmToInches:function(mm){return mm*.03937},kiloToPound:function(kg){return kg*2.2046},decimalRoundedToHundreths:function(value){let epsilon=Number.EPSILON||Math.pow(2,-52);return Math.round((value+epsilon)*100)/100},decimalRoundedToTenths:function(value){let epsilon=Number.EPSILON||Math.pow(2,-52);return Math.round((value+epsilon)*10)/10}};Daktronics.Dimensions=Daktronics.Dimensions||function(heightInches=0,lengthInches=0,depthInches=0){this.heightInches=heightInches;this.lengthInches=lengthInches;this.depthInches=depthInches;this.heightInFeet=function(){return this.heightInches?Daktronics.Conversions.inchesToFeet(this.heightInches):null};this.lengthInFeet=function(){return this.lengthInches?Daktronics.Conversions.inchesToFeet(this.lengthInches):null};this.depthInFeet=function(){return this.depthInches?Daktronics.Conversions.inchesToFeet(this.depthInches):null};this.heightInMeters=function(){return this.heightInches?Daktronics.Conversions.inchesToMeters(this.heightInches,!0):null};this.lengthInMeters=function(){return this.lengthInches?Daktronics.Conversions.inchesToMeters(this.lengthInches,!0):null};this.depthInMeters=function(){return this.depthInches?Daktronics.Conversions.inchesToMeters(this.depthInches,!0):null}};Daktronics.Dimensions.prototype.toString=function(standardOnly=false,metricOnly=false){let stdSB=[],metricSB=[],stringVal="";if(this.heightInFeet()&&stdSB.push(this.heightInFeet()),this.lengthInFeet()&&stdSB.push(this.lengthInFeet()),this.depthInFeet()&&stdSB.push(this.depthInFeet()),this.heightInMeters()&&metricSB.push(this.heightInMeters()),this.lengthInMeters()&&metricSB.push(this.lengthInMeters()),this.depthInMeters()&&metricSB.push(this.depthInMeters()),stdSB.length&&(stringVal=stdSB.join(" x "),standardOnly))return stringVal;if(metricSB.length){let metricVal=metricSB.join(" x ");if(metricOnly)return metricVal;stringVal+=` (${metricVal})`}return stringVal};
Vue.component("project-assets",{props:{assets:{type:Array,"default":function(){return[]}},videos:{type:Array,"default":function(){return[]}},selectedAssetId:String},data:function(){return{loading:!0,carouselSelector:"#project-details-assets>.carousel"}},computed:{selectedAssetNumber:{get:function(){let selection=null;return this.assets.length&&(selection=this.assets[0].id),this.selectedAssetId&&(selection=this.selectedAssetId),selection},set:function(value){this.$emit("selection-changed",value)}},selectedAsset:function(){return this.assets.find(a=>a.id===this.selectedAssetNumber)},selectedAssetIndex:function(){return this.assets.findIndex(a=>a.id===this.selectedAssetNumber)},systemsInSelectedPhoto:function(){var _a;let systemsInPhoto=null;return this.selectedAsset&&(systemsInPhoto=(_a=this.selectedAsset.systemNames)===null||_a===void 0?void 0:_a.join(", ")),systemsInPhoto},showControls:function(){var _a,_b;let assetCount=((_a=this.assets)===null||_a===void 0?void 0:_a.length)||0,videoCount=((_b=this.videos)===null||_b===void 0?void 0:_b.length)||0;return assetCount+videoCount>1}},watch:{selectedAssetNumber:function(){this.setUrl()}},methods:{prevSlide:function(){$(this.carouselSelector).carousel("prev")},nextSlide:function(){$(this.carouselSelector).carousel("next")},goToSlide:function(index){$(this.carouselSelector).carousel(index)},getSizedUrl:function(photoUrl){let sizedUrl=photoUrl,paddingColor="e8e8e8",image=new Daktronics.Image(photoUrl,null,1364,null);return image.type==="widen"?(image.options={crop:!1,color:paddingColor},sizedUrl=image.toString()):(image.options={bgcolor:paddingColor},sizedUrl=image.toString()),sizedUrl},setUrl:function(){let query=Object.assign({},this.$route.query);query.media=this.selectedAssetNumber;query.media!==this.$route.query.media&&this.$router.replace({query})}},created:function(){this.selectedAsset&&Daktronics.ImageUtils.Preload([this.getSizedUrl(this.selectedAsset.photoUrl)]).then(()=>{this.loading=!1,this.$emit("loaded")});this.$nextTick(function(){$(this.carouselSelector).carousel({interval:!1}).on("slid.bs.carousel",event=>{let i=event.to,asset=this.assets[i];asset||(asset=this.videos[i-this.assets.length]);this.selectedAssetNumber=asset.id})})},template:`
<div>
    <div v-if="loading" class="mt-5" style="min-height:95vh"><loading /></div>
    <div id="project-details-assets" v-show="!loading">
        <div class="carousel slide">
            <div class="carousel-inner mx-auto">
                <div v-for="asset in assets" 
                        :key="asset.id" 
                        class="carousel-item" 
                        :class="{ 'active': asset.id === selectedAssetNumber }">
                    <img :src="getSizedUrl(asset.photoUrl)" 
                         class="d-block mx-auto img-fluid"
                         style="max-height:95vh"/>
                </div>
                <div v-for="video in videos" :key="video.id" class="carousel-item" :class="{ 'active': video.id === selectedAssetNumber }">
                    <div class="mx-auto" style="width: 70%">
                        <video-embed :embed-url="video.embedUrl" :autoplay="false" :lazy-load="video.id !== selectedAssetNumber"></video-embed>
                    </div>
                </div>
            </div>
            <a v-if="showControls" class="carousel-control-prev" href="#" role="button" @click.prevent="prevSlide">
                <span class="fa-stack fa-2x" aria-hidden="true">
                    <i class="fas fa-square-full fa-stack-2x"></i>
                    <i class="fas fa-chevron-left fa-stack-1x fa-inverse"></i>
                </span>
                <span class="sr-only">Previous</span>
            </a>
            <a v-if="showControls" class="carousel-control-next" href="#" role="button" @click.prevent="nextSlide">
                <span class="fa-stack fa-2x" aria-hidden="true">
                    <i class="fas fa-square-full fa-stack-2x"></i>
                    <i class="fas fa-chevron-right fa-stack-1x fa-inverse"></i>
                </span>
                <span class="sr-only">Next</span>
            </a>
        </div>
        <p class="caption"><span v-if="systemsInSelectedPhoto">Systems in photo: </span>{{ systemsInSelectedPhoto }}&nbsp;</p>
        <div v-if="showControls" class="row justify-content-center no-gutters">
            <div v-for="(asset, index) in assets" :key="asset.id" class="col-4 col-sm-3 col-md-2 p-1">
                <project-gallery-photo class="img-fluid" style="cursor:pointer"
                                        :photo-url="asset.photoUrl"
                                        :aspect-ratio="16/9"
                                        :size-on-screen-lg="16.7"
                                        :size-on-screen-md="33.3"
                                        :size-on-screen="50"
                                        :default-width="400"
                                        @click="goToSlide(index)"></project-gallery-photo>
            </div>
            <div v-for="(video, index) in videos" :key="video.id" class="col-4 col-sm-3 col-md-2 p-1">
                <project-gallery-video-thumb :video="video" @click="goToSlide(assets.length + index)"></project-gallery-video-thumb>
            </div>
        </div>
    </div>
</div>`});Vue.component("project-gallery-video-thumb",{props:{video:Object},computed:{thumbnail:function(){let thumbnail=null,$embed=$(this.video.embedUrl),embedSrc=$embed.attr("data-src")||$embed.attr("src"),videoIdMatches=/(\/embed\/)(.*?)(\?|$)/gi.exec(embedSrc),videoId;return videoIdMatches&&(videoId=videoIdMatches[2],thumbnail=`https://i.ytimg.com/vi/${videoId}/mqdefault.jpg`),thumbnail}},template:`
<div v-on="$listeners" class="video-thumbnail-overlay-container">
    <img class="video-thumbnail-overlay-image img-fluid" :src="thumbnail" :alt="video.title">
    <div class="video-thumbnail-overlay">
        <i class="fab fa-youtube fa-3x"></i>
    </div>
</div>`});
Vue.component("project-systems",{props:{systems:Array},computed:{},methods:{getInstallYear(installDate){let year=null,date;return installDate&&(date=new Date(installDate),year=date.getFullYear()),year}},template:`
<div>
    <div v-for="system in systems" :key="system.id" class="mt-5">
        <div class="row mb-3 align-items-end">
            <div class="col">
                <h3 class="mb-0">{{ system.name }}</h3>
            </div>
            <div class="col-auto" v-if="system.installDate">
                <p class="caption">Install year: {{ getInstallYear(system.installDate) }}</p>
            </div>
        </div>
        <project-equipment :equipment="system.equipment" class="w-100"></project-equipment>
    </div>
</div>`});Vue.component("project-equipment",{props:{equipment:Array},computed:{tableData(){return this.equipment.map(e=>{let row={},pixelSpacingValue=`${e.spacing||""} ${e.pixelLayout||""}`.trim()||null,linesColumnsValue=this.getLinesColumnsValue(e.lines,e.columns);return dimensionsValue=this.getDimensionsValue(e.height,e.length,e.depth),e.product.category&&(row["Product Line"]=e.product.category),e.product.model&&(row.Series=e.product.model),pixelSpacingValue&&(row["Pixel Spacing"]=pixelSpacingValue),e.lEDColor&&(row["LED Color"]=e.lEDColor),e.access&&(row["Sign Access"]=e.access),e.displayConfiguration&&(row["Display Configuration"]=e.displayConfiguration),e.screenSize&&(row["Screen Size"]=e.screenSize),linesColumnsValue&&(row["Lines & Columns"]=linesColumnsValue),dimensionsValue&&(row["Approx. Dimensions"]=dimensionsValue),e.quantity&&(row.Quantity=e.quantity),row}).filter(e=>!objectIsEmpty(e))},columnHeadings(){let headingsInData=[];this.tableData.forEach(row=>{Object.keys(row).forEach(heading=>{let existingHeading=headingsInData.find(h=>h===heading);existingHeading||headingsInData.push(heading)})});return["Product Line","Series","Pixel Spacing","LED Color","Sign Access","Display Configuration","Screen Size","Lines & Columns","Approx. Dimensions","Quantity",].filter(h=>headingsInData.includes(h))}},methods:{getDataForColumn(columnHeading){let column=this.columnData.find(c=>c.heading===columnHeading);return column.data},getLinesColumnsValue(lines,columns){let sb=[];return lines&&sb.push(lines),columns&&sb.push(columns),sb.join(" x ")},getDimensionsValue(height,length,depth){let dimensions=new Daktronics.Dimensions(height,length,depth),english=dimensions.toString(!0),metric=dimensions.toString(!1,!0),value=english;return metric&&(value+=`</br>(${dimensions.toString(!1,!0)})`),value}},template:`
<table class="dak-table-content dak-tbl-twoaxis">
    <thead>
        <tr>
            <th v-for="heading in columnHeadings" :key="heading">{{ heading }}</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(row, rowIndex) in tableData" :key="rowIndex">
            <td v-for="heading in columnHeadings" :key="heading" :data-title="heading" v-html="row[heading]"></td>
        </tr>
    </tbody>
</table>`});
Vue.component("project-detail-news",{props:{projectNumber:String},store:makeSearchComponentStore(),computed:{searchQuery(){return`CustomerNumber:"${this.projectNumber}"`},hasResults(){return this.$store.state.results.totalCount>0}},watch:{searchQuery(val){this.$store.dispatch("newKeywordQuery",val)},hasResults(){this.$emit("has-results-updated",this.hasResults)}},template:`
<div v-show="hasResults">
    <news-releases :search-query="searchQuery"
                   :item-limit="3"
                   :show-paging="false"
                   :only-recent-articles="true"></news-releases>
</div>`});Vue.component("project-detail",{props:{projectNumber:String,assetId:String,language:String,hasNextProject:Boolean,hasPrevProject:Boolean},data:function(){return{loading:!0,assetsLoaded:!1,modalSelector:"#projectDetailsModal",projectDetails:{},hasQuotes:!1,hasNews:!1,selectedAssetId:null,error:null}},computed:{name:function(){return this.projectDetails.customerName},city:function(){return this.projectDetails.city},stateProvince:function(){var _a;if((_a=this.projectDetails.stateProvince)!==null&&_a!==void 0)return _a.name},country:function(){var _a;if((_a=this.projectDetails.country)!==null&&_a!==void 0)return _a.name},location:function(){let location=[];return this.city&&location.push(this.city),this.stateProvince&&location.push(this.stateProvince),this.country&&location.push(this.country),location.join(", ")},loaded(){return this.loading===!1&&this.assetsLoaded===!0}},watch:{projectNumber(){this.loadDetails()},loaded(){this.loaded&&this.$emit("loaded")}},methods:{loadDetails:function(){this.loading=!0;this.setUrl(this.projectNumber,this.assetId);let url=`/api/projects/${this.projectNumber}`;this.language&&(url+=`?language=${this.language}`);$.ajax(url).then(response=>{this.projectDetails=response,this.$nextTick(function(){$(this.modalSelector).modal("handleUpdate")}),document.title=response.customerName}).catch(error=>{this.error=error.status}).always(()=>{this.loading=!1})},setUrl:function(projectNumber,assetId){let routeQuery=this.$route.query,query=Object.assign({},routeQuery);projectNumber?query.project=projectNumber:delete query.project;assetId?query.media=assetId:delete query.media;(query.project!==routeQuery.project||query.media!==routeQuery.media)&&(routeQuery.project?this.$router.replace({query}):this.$router.push({query}))},close:function(){this.setUrl(null,null);this.$emit("close")},changeProject:function(back=false){this.selectedAssetId=null;this.hasQuotes=!1;this.hasNews=!1;back?this.$emit("prev-project"):this.$emit("next-project")}},mounted:function(){this.loadDetails();$(this.modalSelector).modal("show").on("hidden.bs.modal",()=>{this.close()});window.onpopstate=()=>{$(this.modalSelector).modal("hide")}},template:`
<div id="projectDetailsModal" class="modal fade" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="min-height:calc(100vh - 1rem)">
            <div class="modal-header align-items-stretch px-3 px-md-4">
                <div class="w-100">
                    <div class="row">
                        <div class="col">
                            <h1>{{ name }}</h1>
                        </div>
                        <div class="col-auto">
                            <button type="button" class="close text-right" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                    </div>
                    <div class="row align-items-end">
                        <div class="col-12 col-md">
                            <h2 class="pageSubTitle mb-0">{{ location }}</h2>
                        </div>
                        <div class="col-12 col-md text-center text-sm-right mt-3 mt-md-0">
                            <button v-if="hasPrevProject" 
                                    class="btn btn-outline-secondary btn-sm" 
                                    @click="changeProject(true)">Previous Project</button>
                            <button v-if="hasNextProject" 
                                    class="btn btn-secondary btn-sm"
                                    @click="changeProject(false)">Next Project</button>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="loading" class="modal-body px-3 px-md-4"><loading /></div>
            <div v-else-if="!error" class="modal-body px-3 px-md-4">
                <project-assets :assets="projectDetails.assets"
                                :videos="projectDetails.videos"
                                :selected-asset-id="selectedAssetId || assetId"
                                @selection-changed="selectedAssetId = $event"
                                @loaded="assetsLoaded = true"></project-assets>
                <div class="container-fluid p-0">
                    <div v-if="projectDetails.story" class="row justify-content-center no-gutters">
                        <div class="col-12 col-lg-9 col-xl-8 project-story mt-5" v-html="projectDetails.story"></div>
                    </div>
                    <div class="row justify-content-center no-gutters my-5" id="project-details-accordion">
                        <div class="col-12 col-lg-9 col-xl-8">
                            <div class="accordionHeading media collapsed align-items-center"
                                 role="button"
                                 data-toggle="collapse"
                                 data-target="#project-details-accordion-systems"
                                 aria-expanded="false">
                                 <div class="media-body row align-items-center">
                                    <div class="col">
                                        <h2>Product Details</h2>
                                    </div>
                                    <div class="col-auto">
                                        <i class="fas fa-caret-down fa-2x"></i>
                                    </div>
                                 </div>
                            </div>
                            <div class="collapse" id="project-details-accordion-systems" data-parent="#project-details-accordion">
                                <project-systems class="pb-3" :systems="projectDetails.systems"></project-systems>
                            </div>
                            <div v-show="hasNews">
                                <div class="accordionHeading media collapsed align-items-center"
                                     role="button"
                                     data-toggle="collapse"
                                     data-target="#project-details-accordion-news"
                                     aria-expanded="false">
                                     <div class="media-body row align-items-center">
                                        <div class="col">
                                            <h2>News</h2>
                                        </div>
                                        <div class="col-auto">
                                            <i class="fas fa-caret-down fa-2x"></i>
                                        </div>
                                     </div>
                                </div>
                                <div class="collapse" id="project-details-accordion-news" data-parent="#project-details-accordion">
                                    <project-detail-news class="pt-3" :project-number="projectNumber" @has-results-updated="hasNews = $event"></project-detail-news>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row justify-content-center no-gutters" v-show="hasQuotes">
                        <div class="col-12 col-lg-9 col-xl-8">
                            <hr class="mt-0 mb-5"/>
                            <customer-quotes class="mt-5"
                                             :keywords="'CustomerNumberOWSTEXT:' + projectNumber"
                                             :item-limit="10"
                                             color="green"
                                             id="project-quotes-carousel"
                                             @loaded="hasQuotes = $event.quoteCount > 0"/>
                        </div>
                    </div>
                </div>
            </div>
            <div v-else class="modal-body text-center">
                <div v-if="error === 404">
                    <h2>Not Found</h2>
                    <p>Sorry, we couldn't find the requested project.</p>
                </div>
                <div v-else>
                    <h2>Error Occured</h2>
                    <p>Sorry, there was a problem getting details for this project.</p>
                </div>
            </div>
        </div>
    </div>
</div>`});
//# sourceMappingURL=/sb/nmap/js-project-details.js.v638802134746373307