<template>
    
    <b-row>

<b-col md='12' v-if="materials.length > 0 && !loading">



<b-row  class="material-list" v-for="material in materialsList" :key="material.id">


<b-col md="12" class="text-center">
<p class="text-center">{{material.title}}</p>
<div v-html="material.embed">

</div>
<p class="text-center">
    {{material.description}}
</p>
</b-col>

</b-row>

</b-col>

<b-col md='12' v-if="materials.length == 0 && !loading">
<b-alert show variant="warning">Não há vídeos para exibir</b-alert>

</b-col>

<b-col md='12' v-if="loading">

 <b-spinner type="grow" label="Loading..."></b-spinner>

</b-col>

    </b-row>

</template>

<script>

import SupportMaterialService from '@/services/resources/SupportMaterialService';

const service = SupportMaterialService.build();

export default {
    data(){
        return {
            materials: [],
            loading: false
        }
    },
    computed:{
        materialsList(){
            return this.materials;
        }
    },
    methods: {
        search(){
            this.loading = true;
            var vm = this;
            service.search({
                has_embed: true
            })
            .then( resp => {
                vm.loading = false;
                vm.materials = resp;
            })
            .catch(err => {

                vm.$fire({
                    title: "Erro ao buscar Materiais",
                    icon: "error",
                });
                vm.loading = false;
            });
        }
    },
    mounted(){
        this.search();
    }
}
</script>

<style scoped lang="scss">

.material-list{
text-align: center;
border: solid 1px;
border-radius: 20px;
margin: 20px;
padding: 10px;
}

</style>