/**
 * Component to render data for site media (photos and videos)
 * @class SiteMedia
 */
export class SiteMedia {
    /**
     * @param {object} data
     */
    set siteData(data) {
        this._siteData = data;
    }

    renderPhotos() {
		return `
			<div class="content has-text-centered mb-5 pb-5">
				<p class="is-size-5 mt-3">Fotografie</p>
				<div style="max-width: 70%; margin: 0 auto">
					<p class="is-size-6">Cliccare sull'immagine per aprire la gallery</p>
					<figure class="is-relative is-clickable has-text-centered" id="gallery-2">
						<img src="img/${this._siteData.filename}" width="300"/>
						<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
							<i class="is-flex fa fa-2x fa-play-circle"></i>
						</div>
					</figure>
				</div>
			</div>
		`;
    }

    renderVideos() {
		return `
			<div class="content has-text-centered mb-5 pb-5">
				<p class="is-size-5 mt-3">Video</p>
				<div style="max-width: 70%; margin: 0 auto">
					<p class="is-size-6 has-text-centered">Gallery video</p>
					<figure class="is-relative is-clickable has-text-centered" id="gallery-video">
						<img src="video/${this._siteData.filename.replace('mp4', 'png')}" width="300"/>
						<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
							<i class="is-flex fa fa-2x fa-play-circle"></i>
						</div>
					</figure>
				</div>
			</div>
		`;
    }
}