const ViewDates = {
	data () {
		return {
			edit: {
				id: 0,
			},
			form: false,
			list: [],
		}
	},
	created () {
		self = this
		self.refresh();
	},
	watch: {
		'$route': 'refresh'
	},
	methods: {
		refresh() {
			getJSON(`//${location.host}${location.pathname}api/date`).then(function(data){
				self.list = data;
			})
		},
		openAdd() {
			self.form = true;
			self.edit.id = 0;
		},
		send() {
			if (self.edit.id === 0) {
				httpJSON(`//${location.host}${location.pathname}api/date`,'POST', '"' + new Date(self.edit.date).toISOString() + '"')
					.then(function(data) {
						self.refresh();
						self.form = false;
					}, function (err) {
						alert("unable to add new date:" + err.message);
					})
			}
		},
		personen (date) {
			return 0;
		}
	},
	template: `<div class="row">
		<p>
			<span class="p-heading--one">Termine</span>
			<sub>
				<button v-on:click="openAdd()">New</button>
			</sub>
			<div class="p-modal" v-if="form">
				<div class="p-modal__dialog" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
					<header class="p-modal__header">
						<h2 class="p-modal__title" id="modal-title">Neuer Termin</h2>
						<button class="p-modal__close" aria-label="Close active modal" v-on:click="form=false">Close</button>
					</header>
					<p id="modal-description">
						<form class="p-form p-form--stacked">
							<div class="p-form__group">
								<label for="full-name-stacked" class="p-form__label">Date</label>
								<div class="p-form__control">
									<input type="date" v-model="edit.date"  required>
								</div>
							</div>
							<button class="p-button--positive u-float-right" v-on:click="send()">Add</button>
						</form>
					</p>
				</div>
			</div>
		</p>
		<table class="p-table--mobile-card" role="grid">
			<thead>
				<tr role="row">
					<th scope="col" role="columnheader" aria-sort="none">Datum</th>
					<th scope="col" role="columnheader" aria-sort="none" class="u-align--right">Personen</th>
				</tr>
			</thead>
			<tbody>
				<tr role="row" v-for="item in list">
					<td role="rowheader" aria-label="Datum">{{ new Date(item.date).toDateString() }}</td>
					<td role="gridcell" aria-label="Personen" class="u-align--right">
						<router-link :to="{ name: 'date.show', params: { id: item.id }}">
							{{ personen(item) }}
						</router-link>
					</td>
				</tr>
			</tbody>
		</table>
	</div>`,
}