<script lang="ts">
import Modal from "../Modal.vue"
export default {
    props: {
        users: {
            type: Array,
            required: true
        },
				spieltag: {
						type: Number,
						required: false
				},
				tipps: {
						type: Array,
						required: true
				},
				paarungen: {
						type: Array,
						required: true
				}
    },
		data(){
				return {
						currentuser: null,
						modalOpen: false
				}
		},
		components: {
				Modal
		}
}
</script>
<template>
		<section class="uebersicht scroll-x">	
    <table>
        <tbody>
      <tr>
        <td v-for="user in users" @click="currentuser=user; modalOpen=true">{{ user.kuerzel }}</td>
      </tr>
      <tr>
					<td v-for="user in users" :style='{"color": user.hatgetippt()?"green":"red"}' @click="currentuser=user; modalOpen=true">{{ user.points }}</td>
      </tr>
      </tbody>
    </table>
  </section>
		<Modal v-if="modalOpen" @closemodal="modalOpen=false">
				<div v-if="spieltag!=undefined">
						<h1>Detailansicht für {{ currentuser.username }}, {{ spieltag }}. Spieltag</h1>
						<table>
								<thead>
										<tr>
												<td>Paarung</td>
												<td>Tipp von {{ currentuser.username }}</td>
										</tr>
								</thead>
								<tbody>
										<tr v-for="tipp, i in tipps.filter(t=>t.user==currentuser.id)">
												<td>{{ paarungen[i].heim }} - {{ paarungen[i].gast }}</td>
												<td>{{ tipp.tipp.heim }} - {{ tipp.tipp.gast }}</td>
										</tr>
								</tbody>
						</table>
				</div>
				<div v-else>
						<h1>Lade...</h1>
				</div>
		</Modal>
</template>
<style scoped>

@import "../../assets/css/bulitipp2.css";
</style>
