<template>
	<div class="consents-page">
		<!---------------------------------- Section 1 ------------------------------------->
		<section class="s1-Img-BG">
			<div
				class="parallax"
				:style="{background: `linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),url(${cover ? cover : defaultCover})`}"
			>
				<h1 class="h1 anim-fadeIn" :style="{ color: $route.params.lang === 'fa' && '#fff' }">{{ content.s1.t1 }}</h1>
			</div>
		</section>

		<!---------------------------------- Section 2 ------------------------------------->
		<section class="s2-Img-BG">
			<div class="parallax section">
				<div class="container">
					<div class="row">
						<div class="col-12 col-md-6 col-lg-3 view-img" v-for="item in 53" :key="item + '_orsiOxinConsent'">
							<a :href="`/img/ConsentsPage/${item}.jpg`">
								<img :src="`/img/ConsentsPage/${item}.jpg`" title="consent" alt="OrisOxin-consents" class="img" />
							</a>
						</div>
					</div>
				</div>
			</div>
		</section>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				defaultCover: '/img/GalleryPage/page-title.png',
				consentsCount: 53
			}
		},
		mounted() {
			$(document).ready(() => {
				// certificates
				new SimpleLightbox('.s2-Img-BG .view-img a')
			})
		},
		computed: {
			content() {
				return this.$store.state.content.consents[this.$route.params.lang]
			},
			cover() {
				return this.$store.state.global.cover?.consent
			}
		}
	}
</script>
