<template>

    <div id='CONTAINER' class='card' style="top: 0; height: 100%">

        <div class="card container" style="width: 100%">
            <section v-if='gstore.ues.length <= 0'>Aucun enseignant trouvé</section>

            <section v-for='ue in gstore.ues' :data-id='ue.code'>
                <span class='category'>{{ ue.code }}</span>
                <h1>{{ ue.label }}</h1>

                <div class='table'>
                    <div>
                        <span>{{ue.volumeCours}}</span>
                        <span>heures de cours</span>
                    </div>
                    <div>
                        <span>{{ue.volumeTD}}</span>
                        <span>heures de TD</span>
                    </div>
                    <div>
                        <span>{{ue.volumeTP}}</span>
                        <span>heures de TP</span>
                    </div>
                </div>

                <div class='sub'><strong>ZOU</strong> équivalents TD</div>

                <div class='footer'>
                    <span :class="(ue.volumeCours == 0) ? 'course' : 'course active'">{{ ue.volumeCours }}</span><hr>
                    <span :class="(ue.volumeTD    == 0) ? 'td'     : 'td active'">{{ ue.volumeTD }}</span><hr>
                    <span :class="(ue.volumeTP    == 0) ? 'tp'     : 'tp active'">{{ ue.volumeTP }}</span>
                </div>
            </section>
        </div>

    </div>

</template>




<script>

    export default {
        name: 'CONTAINER_VIEW',
        data(){
            return { gstore: gstore.get }
        }
    }

</script>s