{% extends "base.html" %}

{% block header_script_files %}
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
{% endblock %}

{% block header %}
{{ emit_tep('all_collections_page_header') }}
{% endblock %}

{% block content %}

<div id="app">
    <collections v-bind:collections='collections'></collections>
</div>

{% endblock %}

{% block modals %}
{{ emit_tep('all_collections_modals') }}
{% endblock %}

{% block button_container %}
{{ emit_tep('all_collections_button_container') }}
{% endblock %}

{% block script %}

Vue.component('collections', {
    props: ['collections'],
    template: `
    <div>
        <div class="mb-3 px-5">
            <input type="text" v-model="search" class="form-control" placeholder="Search Collections..." />
        </div>
        <ul class="d-flex flex-wrap w-100 m-0 p-0 py-2 justify-content-center">
            <collection
                v-for="collection in filteredList"
                v-bind:collection="collection"
                v-bind:key="collection.collection_id"
            ></collection>
        </ul>
    </div>
    `,
    data() { return { search: '', } },
    computed: {
        filteredList() {
            return this.collections.filter(collection => {
                return collection.collection_name.toLowerCase().includes(this.search.toLowerCase())
            })
        },
    },
    delimiters: ["[[","]]"],
})

Vue.component('collection', {
    props: ['collection'],
    template: `
    <li class='stashr-cover_size m-2'
        @mouseover="hover = true"
        @mouseleave="hover = false"
    >
        <div class='stashr-poster_wrapper rounded'>
            <div class="stashr-poster_container border rounded">
                <div class="stashr-overlay_bottom w-100 center" v-if="hover">
                    <a href="#">[[ collection.collection_name ]]</a>
                </div>
                <img class="stashr-poster_background w-100" loading="eager" src="/static/assets/cover.svg" />
                <a class="stashr-poster_link" v-bind:href="'/collections/'+collection.collection_slug">
                    <img class="w-100" loading="lazy" v-bind:src="'/images/issues/'+collection.collection_cover_image+'.jpg'" onerror="this.src='/static/assets/cover.svg'" />
                </a>
            </div>
        </div>
    </li>
    `,
    data() { return { hover: false, } },
    delimiters: ["[[","]]"],
})

var app = new Vue({
    el: '#app',
    data: {
        collections: [],
    },
    created() {
        /*
        axios.get('{{ url_for('api.api_get_all_collections') }}')
            .then(res => this.collections = res.data.results)
            .catch(err => console.log(err))
        */
        this.getCollections()
    },
    methods: {
        getCollections() {
            axios.get('{{ url_for('api.api_get_all_collections') }}', {
                params: {
                    offset: this.collections.length
                }
            })
                .then(res => {
                    if(res.data.number_of_page_results > 0) {
                        res.data.results.forEach(result => {
                            this.collections.push(result)
                        })
                        if(this.collections.length < res.data.number_of_total_results) {
                            this.getCollections()
                        }
                    }
                })
        },
    },
    delimiters: ["[[","]]"]
})

{{ emit_tep('all_collections_page_script') }}

{% endblock %}