const ViewDate = {
	data () {
		return {
			form: false,
			data: {},
		}
	},
	created () {
		self = this;
		self.refresh()
	},
	watch: {
		'$route': 'refresh'
	},
	methods: {
		refresh() {
			getJSON(`//${location.host}${location.pathname}api/date/`+self.$route.params.id).then(function(data){
				self.data = data;
			})
		},
		openAdd() {
			self.form = true;
			self.edit.id = 0;
		},
		send() {
			if (self.edit.id === 0) {
				httpJSON(`//${location.host}${location.pathname}api/date`,'POST', self.edit)
					.then(function(data) {
						self.form = false;
					}, function (err) {
						alert("unable to add new date:" + err.message);
					})
			}
		},
	},
	template: `<div class="row">
		<p>
			<span class="p-heading--one">Termin: {{new Date(data.date).toDateString()}} </span>
			<sub>{{$route.params.id}}</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>
			</tbody>
		</table>
	</div>`,
}