<template>
	<div class="page">
		<div
			v-for="(section, index) in sections"
			:key="`section-${index}`"
		>
			<h2 class="section-label">{{ section.label }}</h2>

			<ul class="networks nolist">
				<li
					v-for="network in section.networks"
					:key="`network-${network.id}`"
					:title="network.name"
				>
					<a
						:href="`/${network.type}/${network.slug}`"
						class="network"
					>
						<img
							v-if="network.hasLogo"
							:src="`/logos/${network.slug}/network.png`"
							:alt="network.name"
							class="logo"
						>

						<span v-else>{{ network.name }}</span>
					</a>
				</li>
			</ul>
		</div>
	</div>
</template>

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

const pageContext = inject('pageContext');

const { pageProps } = pageContext;
const { networks } = pageProps;

const networksBySlug = Object.fromEntries(networks.map((network) => [network.slug, network]));

const popularNetworks = [
	'21sextury',
	'adulttime',
	'amateurallure',
	'analvids',
	'bamvisions',
	'bang',
	'bangbros',
	'blowpass',
	'brazzers',
	'burningangel',
	'digitalplayground',
	'dogfartnetwork',
	'dorcel',
	'elegantangel',
	'evilangel',
	'fakehub',
	'hookuphotshot',
	'hussiepass',
	'julesjordan',
	'kink',
	'mofos',
	'naughtyamerica',
	'newsensations',
	'pervcity',
	'pornpros',
	'private',
	'realitykings',
	'teamskeet',
	'vixen',
	'xempire',
].map((slug) => networksBySlug[slug]).filter(Boolean);

const sections = [
	{
		label: 'Popular',
		networks: popularNetworks,
	},
	{
		label: 'All network',
		networks,
	},
];
</script>

<style scoped>
.networks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .5rem;
	padding: .5rem;
}

.section-label {
	padding: 0 1rem;
	margin-bottom: .5rem;
	color: var(--shadow);
}

.network {
	display: flex;
	justify-content: center;
	align-items: center;
	aspect-ratio: 4/1;
	padding: 1rem;
	border-radius: .5rem;
	background: var(--grey-dark-40);
	color: var(--text-light);
	font-size: 1.25rem;
	font-weight: bold;

	&:hover {
		box-shadow: 0 0 3px var(--shadow);
	}
}

.logo {
	height: 100%;
	width: 100%;
	object-fit: contain;
}

@media(--small-30) {
	.networks {
		grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	}
}

@media(--small-50) {
	.networks {
		grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	}
}
</style>