<script lang="ts" setup>
const route = useRoute()

const selected = ref("");
if(route.path.startsWith("/tierlist/")) {
    const lane = route.params.lane as string
    selected.value = lane
}
</script>

<template>
<div>
    <h2 style="padding-left: 20px; font-size: 2.4rem; margin-bottom: 10px;">Tierlist</h2>
    <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
        <div :class="selected == pos ? 'sidebar-link-selected' : ''" 
            class="sidebar-link" style="padding-left: 35px; display: flex; align-items: center;">
            <img width="40" height="40" :src="LANE_IMAGES[i]" :alt="POSITIONS_STR[i]" />
            <h3 style="font-size: 2.1rem; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
        </div>
    </NuxtLink>
</div>
</template>
