<template>

	<div id='CONTAINER'>

		<input class='card instant-search neutral' type='text' placeholder='Recherche instantannée'>

		<div class='card container'>


			<section v-if='gstore.professors.length <= 0'>Aucun enseignant trouvé</section>

			<section v-for='prof in gstore.professors' :data-id='prof.idProfesseur'>
				<span class='category'>{{ prof.categorie }}</span>
				<h1>{{ prof.firstName }} {{ prof.lastName }}</h1>

				<div class='table'>
					<div>
						<span>{{prof.hoursToDo}}</span>
						<span>heures à faire</span>
					</div>
					<div>
						<span>{{ prof.VHCours + prof.VHTd + prof.VHTp }}</span>
						<span>heures prévues</span>
					</div>
				</div>

				<div class='sub'><strong>{{ prof.equiTD }}h</strong> équivalents TD</div>

				<div class='footer'>
					<span :class="(prof.VHCours == 0) ? 'course' : 'course active'">{{ prof.VHCours }}</span><hr>
					<span :class="(prof.VHTd    == 0) ? 'td'     : 'td active'">{{ prof.VHTd }}</span><hr>
					<span :class="(prof.VHTp    == 0) ? 'tp'     : 'tp active'">{{ prof.VHTp }}</span>
				</div>
			</section>

		</div>



		<div class='card filter'>
			<div title='UEs'>
				<span class='active'>Systèmes d'Information</span>
				<span>Introduction aux systèmes numériques</span>
				<span class='active'>Graphes</span>
				<span>Introduction à la méthode B</span>
			</div>

			<div title='Formations'>
				<span>Master TI</span>
				<span class='active'>Master TI - Année 2</span>
				<span>Master TI - Année 2</span>
			</div>

			<div title='Catégories'>
				<span>Maîtres de conférence</span>
				<span class='active'>Intervenant externe</span>
				<span>Autres</span>
			</div>
		</div>

	</div>

</template>




<script>

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

</script>