<template>
    <fragment>
        <thead class="thead-light">
            <tr>
                <th v-for="item in week" v-bind:class="{'text-right': true, 'text-muted': !item.currentMonth}">
                    {{ item.day }}
                </th>
            </tr>
        </thead>
        <tr>
            <td v-for="item in week" v-bind:class="{'bg-light': !item.currentMonth}">
                <div v-for="event in item.events">
					<details v-if="event.description">
						<summary>
							<span class="font-weight-bold">
								<span class="text-muted">
									[{{ event.startAt }}]
								</span>
								{{ event.summary }}
							</span>
						</summary>

						<p v-html="event.description.replace(/\n/g, '<br>')" class="mt-3"></p>

						<div class="mt-3">
							<a v-bind:href="route('admin_speaker_show', {entity: speaker.id})" v-for="speaker in event.speakers" v-bind:class="['d-block mr-1 mt-1 btn btn-xs', 'btn-' + speaker.color].join(' ')">
								{{ speaker.name }}
							</a>

							<a v-bind:href="route('admin_project_show', {entity: project.id})" v-for="project in event.projects" class="d-block mr-1 mt-1 btn btn-xs border btn-light">
								{{ project.label }}
							</a>
						</div>
					</details>
					<div v-else>
						<span class="font-weight-bold">{{ event.summary }}</span>

						<div class="mt-3">
							<a v-bind:href="route('admin_speaker_show', {entity: speaker.id})" v-for="speaker in event.speakers" v-bind:class="['d-block mr-1 mt-1 btn btn-xd', 'btn-' + speaker.color].join(' ')">
								{{ speaker.name }}
							</a>

							<a v-bind:href="route('admin_project_show', {entity: project.id})" v-for="project in event.projects" class="d-block mr-1 mt-1 btn btn-xs border btn-light">
								{{ project.label }}
							</a>
						</div>
					</div>
                </div>
            </td>
        </tr>
    </fragment>
</template>

<style scoped>
td {
  height: calc((100vh - 190px) / 8);
  width: calc(100% / 7);
}

.btn-xs {
  font-size: 12px;
  padding: 3px 4px;
}
</style>

<script>
import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js'
import { Fragment } from 'vue-fragment'

const routes = require('../../../public/js/fos_js_routes.json')

Routing.setRoutingData(routes)

export default {
  name: 'Week',
  components: {
    Fragment
  },
  props: {
    week: {
      type: Array,
      required: true
    }
  },
  methods: {
	route(route, params) {
		return Routing.generate(route, params)
	}
  },
  data () {
    return {
    }
  }
}
</script>
