{% extends 'layouts/master.html' %}
{% load static %}

{% block title %} Denuncia a un servidor público {% endblock title %}

{% block content %}
	
	<section class="uk-margin-medium uk-margin-medium-top">
		<div class="uk-container uk-container-small">
			<div class="uk-text-center">
				<img src="{% static 'home/img_monitos/monito-denuncia.png' %}">
			</div>
			<h2 class="uk-text-center uk-margin-remove-top">
				<p class="show-date uk-margin-remove fs-16 fw-semibold c-304145 uk-text-right"></p>
				Denuncia a un servidor público.
			</h2>
			<p class="uk-margin-remove uk-text-meta">Ten en cuenta que el sistema no guarda datos, por lo que se recomienda no abandonar la página, hasta recibir el código.</p>

			<form id="formComplaints" method="post" class="uk-form-stacked" enctype="multipart/form-data">
				<div>
					<div class="uk-margin">

						<div class="slide-form uk-margin-medium-top" tabindex="-1">

							<ul class="slide-form__items">
								<li>
									<div>
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											{% if form.recaptcha.errors %}
												{% for error in form.recaptcha.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											<div class="g-recaptcha" data-sitekey="{{ site_key }}"></div>
										</div>
										
										<div class="uk-padding-small bgc-rojo-8 uk-margin-medium-top">
											<h2 class="c-blanco uk-h3 uk-margin-remove">Datos del denunciante</h2>
										</div>
				
										{% comment %} {{ form.informer_type }} {% endcomment %}
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											<label class="uk-text-bold" for="{{ form.informer_type.name }}">
												{{ form.informer_type.label }}
												<!-- {% if form.informer_type.field.required %}
													<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
												{% else %}
													<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
												{% endif %} -->
											</label>
											{% if form.informer_type.errors %}
												{% for error in form.informer_type.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											{{ form.informer_type }}
										</div>
				
										<div id="informer-3" data-id="3" class="uk-margin uk-hidden">
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer1_name.name }}">
													{{ form.informer1_name.label }}
													<!-- <span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span> -->
												</label>
												{% if form.informer1_name.errors %}
													{% for error in form.informer1_name.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_name.errors %}
													{% for error in form.informer_name.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer1_name }}
											</div>
				
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer_age.name }}">
													{{ form.informer_age.label }}
													<!-- {% if form.informer_age.field.required %}
														<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
													{% else %}
														<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
													{% endif %} -->
												</label>
												{% if form.informer_age.errors %}
													{% for error in form.informer_age.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_age.errors %}
													{% for error in form.informer_age.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer_age }}
											</div>
				
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer1_email.name }}">
													{{ form.informer1_email.label }}
													<!-- {% if form.informer1_email.field.required %}
														<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
													{% else %}
														<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
													{% endif %} -->
												</label>
												{% if form.informer1_email.errors %}
													{% for error in form.informer1_email.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_email.errors %}
													{% for error in form.informer_email.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer1_email }}
											</div>
				
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer1_phone.name }}">
													{{ form.informer1_phone.label }}
													<!-- {% if form.informer1_phone.field.required %}
														<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
													{% else %}
														<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
													{% endif %} -->
												</label>
												{% if form.informer1_phone.errors %}
													{% for error in form.informer1_phone.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_phone.errors %}
													{% for error in form.informer_phone.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer1_phone }}
											</div>
										</div>
				
				
				
										<div id="informer-2" data-id="2" class="uk-margin uk-hidden">
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer1_name.name }}">
													{{ form.informer1_name.label }}
													<!-- <span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span> -->
												</label>
												{% if form.informer1_name.errors %}
													{% for error in form.informer1_name.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_name.errors %}
													{% for error in form.informer_name.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer1_name }}
											</div>
				
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer_age.name }}">
													{{ form.informer_age.label }}
													<!-- {% if form.informer_age.field.required %}
														<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
													{% else %}
														<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
													{% endif %} -->
												</label>
												{% if form.informer_age.errors %}
													{% for error in form.informer_age.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_age.errors %}
													{% for error in form.informer_age.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer_age }}
											</div>
				
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer1_email.name }}">
													{{ form.informer1_email.label }}
													<!-- {% if form.informer1_email.field.required %}
														<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
													{% else %}
														<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
													{% endif %} -->
												</label>
												{% if form.informer1_email.errors %}
													{% for error in form.informer1_email.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_email.errors %}
													{% for error in form.informer_email.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer1_email }}
											</div>
				
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer1_phone.name }}">
													{{ form.informer1_phone.label }}
													<!-- {% if form.informer1_phone.field.required %}
														<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
													{% else %}
														<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
													{% endif %} -->
												</label>
												{% if form.informer1_phone.errors %}
													{% for error in form.informer1_phone.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_phone.errors %}
													{% for error in form.informer_phone.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer1_phone }}
											</div>
										</div>

										<div id="informer-1" data-id="1" class="uk-margin uk-hidden">
											<div class="uk-padding-small bgc-cafe-4 uk-margin-medium-top">
												<p class="uk-text-justify uk-margin-remove">Para proteger su anonimato, las notificaciones relacionadas con el trámite de su denuncia se realizarán a través de la dirección de correo electrónico que proporcionó, por lo que esta  deberá ser una cuenta válida.</p>
											</div>
				
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer2_email.name }}">
													{{ form.informer2_email.label }}
													<!-- <span class="uk-text-metinformer_contenta fs-12 fw-regular">(campo obligatorio)</span> -->
												</label>
												{% if form.informer2_email.errors %}
													{% for error in form.informer2_email.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_email.errors %}
													{% for error in form.informer_email.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer2_email }}
											</div>
											
											<div class="uk-form-label uk-margin-medium-top uk-margin">
												<label class="uk-text-bold" for="{{ form.informer_age.name }}">
													{{ form.informer_age.label }}
													<!-- {% if form.informer_age.field.required %}
														<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
													{% else %}
														<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
													{% endif %} -->
												</label>
												{% if form.informer_age.errors %}
													{% for error in form.informer_age.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
												{% if form.informer_age.errors %}
													{% for error in form.informer_age.errors %}
														<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
													{% endfor %}
												{% endif %}
											</div>
											<div class="uk-form-controls">
												{{ form.informer_age }}
											</div>
										</div>
				
				
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											<label class="uk-text-bold" for="{{ form.informer_reason.name }}">
												{{ form.informer_reason.label }}
											</label>
											<p class="uk-margin-remove uk-text-meta">{{ form.informer_reason.field.help_text }}</p>
											{% if form.informer_reason.errors %}
												{% for error in form.informer_reason.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											{{ form.informer_reason }}
										</div>
										<!--Se añade un area de texto para que se descirba lo sucedido, a petición del usuario-->
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											<label class="uk-text-bold" for="{{ form.informer_description.name}}">
												{{ form.informer_description.label }}
											</label>
											{% if form.informer_reason.errors %}
												{% for error in form.informer_reason.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											{{form.informer_description}}
										</div>
										<!--Termina el área de texto y la modificación-->
									</div>
								</li>
								<li>
									<div>
										<div class="uk-padding-small bgc-rojo-8 uk-margin-medium-top">
											<h2 class="c-blanco uk-h3 uk-margin-remove">Datos del Servidor Público</h2>
											<p class="c-blanco uk-margin-remove uk-text-meta">Si los conoces, proporciona los datos que permitan su identificación y que se solicitan a continuación</p>
										</div>
										
										{% comment %} {% if form.errors %}
											<div id="form-error">
												{% for field in form %}
													<p>{{ field.errors|striptags }}</p>
												{% endfor %}
											</div>
										{% endif %} {% endcomment %}
				
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											<label class="uk-text-bold" for="{{ form.person_name.name }}">
												{{ form.person_name.label }}
												<!-- {% if form.person_name.field.required %}
													<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
												{% else %}
													<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
												{% endif %} -->
											</label>
											{% if form.person_name.errors %}
												{% for error in form.person_name.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											{{ form.person_name }}
										</div>
				
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											<label class="uk-text-bold" for="{{ form.physical_description.name }}">
												{{ form.physical_description.label }}
												<!-- {% if form.physical_description.field.required %}
													<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
												{% else %}
													<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
												{% endif %} -->
											</label>
											{% if form.physical_description.errors %}
												{% for error in form.physical_description.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											{{ form.physical_description }}
										</div>
				
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											<label class="uk-text-bold" for="{{ form.gender.name }}">
												{{ form.gender.label }}
												<!-- {% if form.gender.field.required %}
													<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
												{% else %}
													<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
												{% endif %} -->
											</label>
											{% if form.gender.errors %}
												{% for error in form.gender.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											{{ form.gender }}
										</div>
				
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											<label class="uk-text-bold" for="{{ form.dependence.name }}">
												{{ form.dependence.label }}
												<!-- {% if form.dependence.field.required %}
													<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
												{% else %}
													<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
												{% endif %} -->
											</label>
											{% if form.dependence.errors %}
												{% for error in form.dependence.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											{{ form.dependence }}
										</div>
				
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											<label class="uk-text-bold" for="{{ form.company_charge.name }}">
												{{ form.company_charge.label }}
												<!-- {% if form.company_charge.field.required %}
													<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
												{% else %}
													<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
												{% endif %} -->
											</label>
											{% if form.company_charge.errors %}
												{% for error in form.company_charge.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											{{ form.company_charge }}
										</div>
				
										<div class="uk-form-label uk-margin-medium-top uk-margin">
											<label class="uk-text-bold" for="{{ form.municipality.name }}">
												{{ form.municipality.label }}
												<!-- {% if form.municipality.field.required %}
													<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
												{% else %}
													<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
												{% endif %} -->
											</label>
											{% if form.municipality.errors %}
												{% for error in form.municipality.errors %}
													<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
												{% endfor %}
											{% endif %}
										</div>
										<div class="uk-form-controls">
											{{ form.municipality }}
										</div>
				
										{% for file in form_files %}
											<div class="file-complaint-content uk-margin uk-hidden">
												<div class="uk-form-label uk-margin-medium-top uk-margin">
													<label class="uk-text-bold" for="{{ file.file.name }}">
														{{ file.file.label }}
														<!-- {% if file.file.field.required %}
															<span class="uk-text-meta fs-12 fw-regular">(campo obligatorio)</span>
														{% else %}
															<span class="uk-text-meta fs-12 fw-regular">(campo NO obligatorio)</span>
														{% endif %} -->
													</label>
													{% if file.file.errors %}
														{% for error in file.file.errors %}
															<p class="uk-text-danger uk-text-meta uk-margin-small uk-margin-left">{{ error }}</p>
														{% endfor %}
													{% endif %}
												</div>
												<div class="uk-form-controls">
													<div uk-form-custom="target: true" class="uk-width-1 uk-width-1-2@m">
														<a class="uk-form-icon uk-form-icon-flip" href="#" uk-icon="icon: search"></a>
														{{ file.file }}
														<input class="uk-input uk-form-width-medium uk-width-1" type="text" placeholder="Seleccione un archivo" disabled>
													</div>
													<button class="uk-button c-rojo-6 c:h-rojo-6 file-complaint-content__new uk-margin-top uk-margin-remove-top@m" uk-icon="icon: plus">
														<span class="uk-hidden@m">Nuevo archivo</span>
													</button>
												</div>
											</div>
										{% endfor %}
										<div class="uk-form-label uk-margin-medium-top uk-margin">
								<div class="uk-margin uk-grid-small uk-child-width-auto uk-grid">
									<label for="my_checkbox"><input class="uk-checkbox" type="checkbox" id="my_checkbox" name="my_checkbox" >   He leído y acepto el <a href="http://prointegridad.puebla.gob.mx/media/files_avisos/avisodeprivacidad.pdf" target="_blank" style="color: #a8123d;">Aviso de Privacidad</a> </label>
								</div>
							</div>
									</div>
								</li>
							</ul>
							
							
						
							<div uk-grid class="uk-child-width-1 uk-child-width-1-3@m uk-margin-large-top">
								<div class="uk-posi">
									<div class="uk-position-relative">
										<a data-click="#formComplaintsToTop" href="#formComplaints" uk-scroll class="uk-button uk-button-primary uk-width-1"  slide-form-control="previous">Anterior</a>
									</div>
								</div>
								<div><a id="formComplaintsToTop" class="uk-hidden" href="#formComplaints" uk-totop uk-scroll></a></div>
								<div>
									<div class="uk-position-relative">
										<a data-click="#formComplaintsToTop" href="#formComplaints" uk-scroll class="uk-position-absolute uk-button uk-button-primary uk-width-1" slide-form-control="next">Siguiente</a>
										<input  id="my_button" style="display: none;" class="uk-position-absolute uk-button uk-button-primary uk-width-1" slide-form-control="send" type="submit" value="Enviar">
									</div>
								</div>
							</div>
						
						</div>
					</div>
				</div>
				{% csrf_token %}
			</form>
		</div>
	</section>

{% endblock content %}

{% block js %}
	<script src="https://www.google.com/recaptcha/api.js" async defer></script>

	<script>
		new SlimSelect({
			select: '#informer_reason',
			placeholder: 'Seleccione un valor',
			hideSelectedOption: true,
			showSearch: false,
			showContent: 'up'
		});
	</script>

	<script>

		function enable_control( content = null, control = null )
		{
			if ( content ) content.classList.remove( 'uk-hidden' );
			if ( control ) control.disabled = false;
		}

		function disable_control( content = null, control = null )
		{
			if ( content ) content.classList.add( 'uk-hidden' );
			if ( control ) control.disabled = true;
		}

		function enable_file( content, key, length, first = false )
		{
			if ( ! content ) return false;

			var message = 'Puede añadir máximo ' + length + ( length > 1 ? ' archivos.' : ' archivo.' );

			if ( ( key + 1 ) < ( length - 1 ) ) message = 'Añadir nuevo archivo.';

			if ( key !== ( length - 1 ) || first )
			{
				var new_file = content.querySelector( '.file-complaint-content__new' ),
					file = content.querySelector( '.file-complaint-content__file' );

				enable_control( content, file );

				UIkit.tooltip( new_file, { title:message } );
			}
		}

		var contents_file_complaint = document.querySelectorAll( '.file-complaint-content' ),
			contents_file_complaint_length = contents_file_complaint.length;

		contents_file_complaint.forEach( function ( content_file_complaint, key ) {

			var new_file = content_file_complaint.querySelector( '.file-complaint-content__new' );

			if ( contents_file_complaint_length == 1 ) new_file.classList.add( 'uk-hidden' )

			if ( key == 0 ) enable_file( content_file_complaint, key, contents_file_complaint_length, true );

			new_file.addEventListener( 'click', function ( e ) {
				e.preventDefault();
				enable_file( content_file_complaint.nextElementSibling, key, contents_file_complaint_length );
			} );
			
		} );

		function enable_contact( content )
		{
			var labels = content.querySelectorAll( '.uk-form-label label' );

			labels.forEach( function ( label ) {
				var control = content.querySelector( '#' + label.htmlFor );
				if ( control ) enable_control( null, control );
			} );

			enable_control( content );
		}

		function disable_contact( content )
		{
			var labels = content.querySelectorAll( '.uk-form-label label' );

			labels.forEach( function ( label ) {
				var control = content.querySelector( '#' + label.htmlFor );
				if ( control ) disable_control( null, control );
			} );

			disable_control( content );
		}

		var informer_type = document.querySelector( '#informer_type' );
		var informer_content = document.querySelector( '#informer-' + informer_type.value );
		if ( informer_content ) enable_contact( informer_content );

		informer_type.addEventListener( 'change', function ( e ) {
			for (var i = 0; i < informer_type.options.length; i++)
			{
				var informer_content = document.querySelector( '#informer-' + informer_type.options[ i ].value );
				if ( informer_content ) disable_contact( informer_content );
			}

			var informer_content = document.querySelector( '#informer-' + this.value );
			if ( ! informer_content ) return false;
			
			enable_contact( informer_content );
		} );
		
		document.addEventListener('DOMContentLoaded', function() {
    	const checkbox = document.getElementById('my_checkbox');
    	const button = document.getElementById('my_button');

    	checkbox.addEventListener('change', function() {
      	button.style.display = checkbox.checked ? 'block' : 'none';
    	});
  });

	</script>
{% endblock js %}