<script setup>
import { inject } from 'vue';

const pageContext = inject('pageContext');
const { env } = pageContext;
</script>

<template>
	<footer class="footer">
		<div class="footer-row">
			<a
				v-if="env.links.matrix"
				:href="env.links.matrix"
				target="_blank"
				rel="noopener noreferrer"
				class="footer-segment footer-link nolink matrix"
			><Icon icon="matrix-full" /></a>

			<a
				v-if="env.links.discord"
				:href="env.links.discord"
				target="_blank"
				rel="noopener noreferrer"
				class="footer-segment footer-link nolink discord"
			><Icon icon="discord-full" /></a>

			<a
				v-if="env.links.content"
				:href="env.links.content"
				target="_blank"
				class="footer-segment footer-link"
			>Content Removal (DMCA)</a>
		</div>

		<div class="footer-row">
			<span class="footer-segment">© traxxx v{{ env.version }}</span>
		</div>
	</footer>
</template>

<style scoped>
.footer {
	display: flex;
	flex-direction: column;
	background: var(--background-base-20);
	box-shadow: inset 0 0 3px var(--shadow-weak-30);
	font-size: .75rem;
	font-weight: bold;
}

.footer-row {
	display: flex;
	justify-content: center;
	align-items: stretch;

	&:first-child .footer-segment {
		padding-top: .6rem;
	}

	&:not(:first-child) {
		border-top: solid 1px var(--glass-weak-30);
	}
}

.footer-segment {
	display: inline-flex;
	align-items: center;
	padding: .5rem 1rem;
	color: var(--glass);

	&:not(:first-child) {
		border-left: solid 1px var(--glass-weak-30);
	}
}

.footer-link:hover {
	color: var(--primary);

	.icon {
		fill: var(--primary);
	}
}

.discord .icon,
.matrix .icon {
	height: 1.25rem;
	width: 3.5rem;
	fill: var(--glass-strong-10);
}
</style>
