<template>
	<div v-show="visible" class="block">
		<div class="field">
			<label class="label">Contraseña del barrio</label>
			<div class="field has-addons">
				<div class="control">
					<input required class="input" :type="this.passwordType" name="password"  placeholder="Contraseña del barrio">
				</div>
				<div class="control">
					<a class="button is-info" @click="togglePassword">
						{{ (passwordVisible ? 'Ocultar' : 'Mostrar') + ' contraseña'}} 
					</a>
				</div>
			</div>
			<p class="help">Si no la sabés, consultá a tus compañerxs.</p>
		</div>
		<div class="field">
			<div class="control">
			    <input type="submit" class="button is-success" value="Ingresar"/>
		    </div>
	    </div>
	</div>
</template>

<script>
	export default {
		name: 'Login',
		data() {
			return {
				visible: false,
				gdc: this.$root.gdc,
				passwordVisible: false,
				passwordType: "password",
			}
		},
		mounted() {
			Event.$on('gdc-seleccionado', (gdc) =>  {
				this.$root.gdc = gdc;
				this.visible = true;
			});
		},
		methods: {
			togglePassword() {
				if (this.passwordVisible) this.passwordType = "password";
				else this.passwordType = "text"
				this.passwordVisible = !this.passwordVisible
			}
		}
	}
</script>

<style>
	.help {
		font-size: 1rem;
	}
</style>