<script context="module" lang="ts">
import Performers2021 from '@/data/performers/2021';
import type Performer from '@/types/Performer';

export default {
    data(): { performers2021: Array<Performer> } {
        return {
            performers2021: Performers2021
        }
    }
}
</script>

<template>
    <section class="main">
        <h1 id="archive-start">Arkisto</h1>

        <p v-if="pageIsVisible">ASDsa</p>
        <div v-else="!pageIsVisible">
            <h2>2021</h2>
            <div class="performers-container">
                <div class="performer-name" v-for="p in performers2021" :key="p.name">
                    <span class="fa fa-chevron-right" />
                    <a>{{ p.name }}</a>
                </div>
            </div>
        </div>
    </section>
</template>

<style scoped lang="scss">
.performer-img {
    max-width: 57%;
    margin-top: 10px;
}

@media screen and (max-width: 600px) {
    .performer-img {
        max-width: 100%;
    }
}

.performer-paragraph {
    text-align: left;
}

.performers-container {
    display: flex;
    flex-wrap: wrap;
    width: 80%;
    justify-content: space-evenly;
    font-size: 1.2em;

    .performer-name {
        width: 40%;
        margin-bottom: 4%;
        border-radius: 3px;
        display: flex;
        align-items: center;
        padding: 5px;
    }

    a {
        color: #2f273e;
        margin-left: 10px;
        text-align: left;
    }
}

@media screen and (max-width: 600px) {
    .performers-container {
        .performer-name {
            width: 100%;
            margin-bottom: 10%;
            text-align: left;
            padding-left: 5%;

            a {
                text-decoration: underline;
            }
        }
    }
}

.performer-link {
    color: blue;
}
</style>