<template>
    <div v-show="visible" class="block">
        <div class="field">
            <label class="label has-text-white">Contraseña de administración del barrio</label>
            <div class="field has-addons">
				<div class="control">
					<input required class="input" :type="this.passwordType" name="password"  placeholder="Contraseña de admin del barrio">
				</div>
				<div class="control">
					<a class="button is-warning" @click="togglePassword">
						{{ (passwordVisible ? 'Ocultar' : 'Mostrar') + ' contraseña'}}
					</a>
				</div>
			</div>
            <p class="help has-text-white">Si no la sabés, consultá a la comisión informática.</p>
        </div>
        <div class="field">
            <div class="control">
                <input type="submit" class="button is-warning" value="Ingresar"/>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                visible: false,
                gdc: null,
				passwordVisible: false,
				passwordType: "password",
            }
        },
        mounted() {
            Event.$on('gdc-seleccionado', (gdc) =>  {
                this.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>