<template>
    <div class="content-inner">
        <span
            v-if="!loading"
            class="summary"
        >Found {{ releases.length }} results for '{{ query }}'</span>

        <span
            v-else
            class="summary"
        >Searching...</span>

        <Releases :releases="releases" />
    </div>
</template>

<script>
import Releases from '../releases/releases.vue';

async function mounted() {
    const results = await this.$store.dispatch('searchReleases', {
        query: this.query,
        limit: 100,
    });

    this.loading = false;

    if (results) {
        this.releases = results;
    }
}

export default {
    components: {
        Releases,
    },
    data() {
        return {
            loading: true,
            releases: [],
            query: this.$route.query.query || this.$route.query.q,
        };
    },
    mounted,
};
</script>

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

.summary {
    display: block;
    margin: 0 0 1rem 0;
    color: $shadow;
    font-weight: bold;
}
</style>