const CreateMsgRouter = {
	template: `
<div class="card om-card">
	<h4>Neue Nachricht erstellen</h4>
	<form class="new-msg-form" @submit.prevent=createMsg>
        <div class="form-group">
			<label class="bmd-label-floating">User*</label>
			<input type="text" class="form-control" id="user">
		</div>
		<div class="form-group bmd-form-group">
			<label class="bmd-label-floating">Betreff*</label>
			<input type="text" class="form-control" id="subject">
		</div>
		<div class="form-group bmd-form-group">
			<label class="bmd-label-floating">Tags</label>
			<input type="text" class="form-control" id="tag">
		</div>



				  <v-combobox
					v-model="select"
					:items="items"
					label="I use chips"
					multiple
					chips
				  ></v-combobox>


		<div class="form-group">
			<label class="bmd-label-floating">Nachricht*</label>
			<textarea class="form-control" id="message" rows="5"></textarea>
		</div>
		<button class="btn btn-default"><a @click="$router.go(-1)">ABBRECHEN </a></button>
		<button type="submit" class="btn btn-raised om-btn"><a @click="$router.push('/home')">SENDEN</a></button>
	</form>


</div>
`,
	data: function () {
		return {
			select: ['Design', 'jj'],
			items: [
				'Programming',
				'Design',
				'Vue',
				'Vuetify'
      		]
		};
	},
	methods: {
		createMsg: function () {
			var subject = $("#subject").val();
			var message = $("#message").val();
			var tag = $("#tag").val();
			var user = $("#user").val();
			console.log("Message Created: " + tag + " " + message + " " + user);
			$.ajax({
				url: "api/createMsg",
				data: {
					sub: subject,
					mess: message,
					use: user,
					ta: tag
				},
				method: "POST"
			}).done(have_result).fail(have_error);

			function have_result(res) {
				console.log(res);
			}

			function have_error(err) {
				console.log("error: " + err.responseText);
				console.log(err);
			}
		},
	},
	mounted: function () {
		if ($(this).bootstrapMaterialDesign)
			$(this).bootstrapMaterialDesign();
	},
};