<template>
	<div class="contact-bar">
		<div class="contact-bar__contents">
			<a :href="`tel:${telephoneLink}`"
			   class="contact-bar__support"
			   aria-label="support number">
				{{ telephone }}
				<i class="icon-support contact-bar__icon" />
			</a>
			<span class="contact-bar__mail">
				{{ $t("contactEmailValue") }}
				<i class="icon-mail_outline contact-bar__icon" />
			</span>
			<span class="contact-bar__times">
				<i class="icon-access_time contact-bar__icon" />
				{{ $t("contactWorkTimes") }}
			</span>
			<a :href="$t('contactLinkdin')"
			aria-label="linkedin account"
			   class="contact-bar__social-link">
				<i class="icon-linkedin" />
			</a>
			<a :href="$t('contactYoutubeLink')"
			aria-label="youtube account"
			   class="contact-bar__social-link">
				<i class="icon-youtube" />
			</a>
			<a :href="$t('contactTelegramLink')"
			aria-label="telegram account"
			   class="contact-bar__social-link">
				<i class="icon-telegram" />
			</a>
			<a :href="$t('contactInstagramLink')"
			aria-label="instagram account"
			   class="contact-bar__social-link">
				<i class="icon-instagram" />
			</a>
		</div>
	</div>
</template>
<script>

export default {
	name: "NavigationContactBar",
	computed: {
		instagramLink() {
			return this.$t("contactInstagramLink");
		},
		telegramLink() {
			return this.$t("contactTelegramLink");
		},
		telephone() {
			return this.$t("contactSupportPhoneValue");
		},
		telephoneLink() {
			return this.$t("contactSupportPhonePureValue");
		},
		twitterLink() {
			return this.$t("contactTwitterLink");
		},
	},
};
</script>
<style lang="scss" scoped>
.contact-bar {
	background: $color-accent;
	color: $color-white;
	height: $contact-bar-height;
	font-size: 13px;
	line-height: $contact-bar-height;
	overflow: hidden;
	position: relative;
	white-space: nowrap;
	z-index: $navigation-bar-z-index + 2;

	&__contents {
		margin: 0 auto;
		max-width: $app-max-width;
		padding: 0 $padding-default;
	}

	&__icon {
		display: inline-block;
		font-size: 20px;
		vertical-align: middle;
	}

	&__support,
	&__mail {
		color: $color-white;
		display: inline-block;
		direction: ltr;
		text-decoration: none;
		vertical-align: middle;
	}

	&__support {
		contain: strict;
		height: 32px;
		width: 116px;
		text-align: right;
	}

	&__mail {
		float: left;
		text-align: left;
	}

	&__times,
	&__social-link {
		display: none;
	}

	@media (min-width: $desktop) {

		&__support,
		&__mail,
		&__times {
			display: inline-block;
			float: none;
			margin-left: $padding-default * 2;
		}

		&__social-link {
			color: $color-white;
			display: block;
			float: left;
			font-size: 17px;
			margin-right: $padding-default * 2;
			margin-top: 3px;
			text-decoration: none;
		}
	}
}

[data-lang="en"] {
	.contact-bar {
		&__support {
			float: right;
			text-align: right;
		}

		&__icon {
			float: left;
			margin-left: 0;
			margin-right: 4px;
			margin-top: 4px;
		}

		@media (min-width: $desktop) {
			&__social-link {
				float: right;
				margin-left: $padding-default * 2;
				margin-right: 0;
			}

			&__support,
			&__mail,
			&__times {
				float: none;
				margin-left: 0;
				margin-right: $padding-default * 2;
			}
		}
	}
}
</style>