Vue.component('login-panel', {
    template: `
		<div class="loginModal modal" tabindex="-1" role="dialog">
			<div class="modal-dialog" role="document">
    			<div class="modal-content">
    				<div class="modal-header">
        				<h5 class="modal-title">Login</h5>
    				</div>
    				<div class="modal-body">
						<form>
							<div class="form-group">
								<label class="bmd-label-floating"> User (Ohmportal)</label>
								<input type="text" class="form-control" length=20 ref=userField v-model=user>
							</div>
							<div class="form-group">
								<label class="bmd-label-floating">Password</label>
								<input type=password class="form-control" length=20 v-model=pwd>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-primary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Login</button>
						<button type="button" class="btn btn-secondary" data-dismiss="modal" v-on:click="closeLogin(this.Event)">Close</button>
					</div>
    			</div>
			</div>
		</div>`,
    data: function () {
		return {
			user: "",
			pwd:"",
		};
    },
    methods: {
		logIn(event){
			this.$emit('clicked', true)
		},

    	closeLogin (event) {
    		this.$emit('clicked', false)
    	}
    },
	mounted: function () {
		$(".loginModal").modal ('show');
	},
});