class GuidesListView extends EICDomContent {
    
    constructor() { super(); }

    DOMContentLoaded(options) {
        ui.eicfy(this.el)

        this.guides = options.guides;
        this.thumbs = this.find('.guides .list');
        this.fillGuides()
    }

    fillGuides(){
        if((app.Assets.Store.json.videoGuides) && app.Assets.Store.json.videoGuides.guides){
            let guidesList = app.Assets.Store.json.videoGuides.guides
            for(let item of guidesList) {
                let tile = ui.create(`<article eiccard>
                    <header>
                        <h1>${item.title || ''}</h1>
                    </header>
                    <section>
                        <img src="/app/assets/videos/guides/thumbnails/${item.thumbnail}">
                    </section>
                    <footer></footer>
                </article>`);

                let button = new Button(null, {label:'watch', severity: 'primary', size: 'xsmall'});
                button.el.addEventListener('click', this.onGuideWatch.bind(this, item.id))
                tile.querySelector('footer').append(button.el)
                this.thumbs.append(tile);
            }
        }
    }

    onGuideWatch(guideID, event){
        event.stopPropagation();
        event.preventDefault();
        app.Router.route(`/about/guide/${guideID}`, { });
    }

}

app.registerClass('GuidesListView', GuidesListView);