<template>
    <div
        v-if="site"
        class="content site"
    >
        <FilterBar :fetch-releases="fetchSite" />

        <div class="header">
            <a
                v-if="site.url"
                :href="site.url"
                target="_blank"
                rel="noopener noreferrer"
                class="title"
            >
                <img
                    :src="`/img/logos/${site.network.slug}/${site.slug}.png`"
                    :title="site.name"
                    :alt="site.name"
                    class="logo"
                >
            </a>

            <span class="link">
                <span class="networklogo-container">
                    Part of
                    <a
                        :href="`/network/${site.network.slug}`"
                        class="networklogo-link"
                    >
                        <img
                            :src="`/img/logos/${site.network.slug}/network.png`"
                            :title="site.network.name"
                            :alt="site.network.name"
                            class="logo"
                        >
                    </a>
                </span>
            </span>
        </div>

        <div class="content-inner">
            <Releases :releases="releases" />
        </div>
    </div>
</template>

<script>
import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue';

async function fetchSite() {
    this.site = await this.$store.dispatch('fetchSites', { siteSlug: this.$route.params.siteSlug });
    this.releases = this.site.releases;
}

async function mounted() {
    await this.fetchSite();

    this.pageTitle = this.site.name;
}

export default {
    components: {
        FilterBar,
        Releases,
    },
    data() {
        return {
            site: null,
            releases: null,
            pageTitle: null,
        };
    },
    mounted,
    methods: {
        fetchSite,
    },
};
</script>

<style lang="scss" scoped>
@import 'theme';

.header {
    background: $profile;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    border-bottom: solid 1px $shadow-weak;
}

.title {
    padding: 1rem;
}

.heading {
    padding: 0;
    margin: 0 0 1rem 0;
}

.link {
    display: flex;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
}

.logo {
    width: 20rem;
    max-height: 6rem;
    object-fit: contain;
    margin: 0 .5rem 1rem 0;
}

.networklogo-container {
    display: flex;
    align-items: center;
}

.sites,
.scenes {
    display: grid;
    grid-gap: 1rem;
    margin: 0 0 1rem 0;
}

.sites {
    grid-template-columns: repeat(auto-fit, 15rem);
}
</style>
