<template>
	<tab-item :title="$t('manualFiles')"
			  icon="icon-file_download"
			  :is-active="isActive">
		<div>
			<div class="section-title">
				{{ $t("getDocuments") }}
			</div>
			<a href="https://files.parsmega.com/PM-Soft.rar"
			   download
			   class="download-file">
				<img alt=""
					loading="lazy"
					decoding="async"
						width="18" height="18"
					 src="@/assets/images/download-file.svg"
					 class="download-file__icon" />
				{{ $t("productApp") }}
			</a>
			<a v-for="file in dataSource"
			   :key="file.url"
			   :href="file.url"
			   target="_blank"
			   class="download-file">
				<img alt=""
					loading="lazy"
					decoding="async"
					width="18" height="18"
					 src="@/assets/images/download-file.svg"
					 class="download-file__icon" />
				{{ file.name }}
			</a>
		</div>
		<br />
		<div class="section-title"
			 v-show="videos.length > 0">
			{{ $t("watchVideos") }}
		</div>
		<div v-for="video in videos"
			 class="video__item"
			 :key="video"
			 v-html="video">
		</div>
	</tab-item>
</template>
<script>
import tabItem from "./product_tab_item";

export default {
	name: "ProductTabsFiles",
	components: {
		tabItem,
	},
	props: {
		dataSource: {
			required: true,
		},
		isActive: {
			required: true,
			type: Boolean,
		},
		videos: {
			required: false,
		},
	},
};
</script>
<style lang="scss" scoped>
.section-title {
	font-size: 14px;
	font-weight: bold;
	margin: $padding-default auto $padding-default/2 auto;
}

.download-file {
	border-radius: 4px;
	color: $color-text;
	display: block;
	font-size: 12px;
	margin: 10px auto;
	padding: 8px 8px;
	text-decoration: none;

	&__icon {
		display: inline-block;
		height: 18px;
		vertical-align: middle;
		width: 18px;
	}

	&:hover {
		background: $color-white--dark;
		color: $color-primary;
	}
}

.video__item {
	display: block;
	margin: 0 auto;

	@media (min-width: 680px) {
		border: none;
		display: inline-block;
		margin: ($padding-default/4);
		margin-top: 0;
		vertical-align: top;
		width: calc(50% - #{$padding-default});
	}
}
</style>