<template>
	<div>
		<h2 v-if="pageTitle" class="h3 text-primary mb-2">{{ pageTitle }}</h2>
		<form method="post" action="/_hcms/protected/auth" data-hs-cf-bound="true">
			<input name="content_id" type="hidden" :value="pageId">
			<input name="redirect_url" type="hidden" :value="redirectUrl">
			<div class="d-flex align-items-center">
				<label for="hs-pwd-widget-password" class="hs-screen-reader-text">Password</label>
				<input name="password" class="form-control" type="password" placeholder="Password" id="hs-pwd-widget-password" />
				<input type="submit" value="Submit" class="ms-1 btn btn-primary" />
			</div>
			<div v-if="incorrectPassword" class="text-danger mt-1 small">Password is incorrect</div>
		</form>
	</div>
</template>

<script>
import { getQuery } from '../../../util/query'

export default {
	props : {
		pageTitle : {
			type : String
		},
		pageId : {
			type : String,
			required : true
		},
		redirectUrl : {
			type : String,
			required : true
		}
	},
	beforeMount(){
		this.incorrectPassword = getQuery('password_incorrect') || false;
	},
	data : () => ({
		incorrectPassword : false
	})
}
</script>

<style lang="scss" scoped></style>