{% extends "_layouts/main" %}

{% if currentSite.language == 'es' %}
    {% set esUrl = 'es/' %}
{% else %}
    {% set esUrl = '' %}
{% endif %}

{% block main %}

{% set subpageHeader = placeholder.headerPhoto.one() %}

<div id="subpage-head" class="container-fluid" style="background-image: url({{ subpageHeader.getUrl('headerHd') }});">
	<div class="row">
		<div class="container">
			<div class="row align-v">
				<div class="col-10 offset-1">
					<h1>PQRS</h1>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="container main-section">
	<div class="row">

		<div class="col-12 col-md-8 offset-md-2">
			{% macro errorList(errors) %}
			    {% if errors %}
			        <ul class="errors">
			            {% for error in errors %}
			                <li>{{ error }}</li>
			            {% endfor %}
			        </ul>
			    {% endif %}
			{% endmacro %}

			{% from _self import errorList %}

			<form method="post" action="" accept-charset="UTF-8">

			    {{ csrfInput() }}
			    <input type="hidden" name="action" value="contact-form/send">
			    {{ redirectInput('pqrs/gracias') }}

				{# MENU FORMULAR #}
				<div class="form-group">
					<label for="pqrsMenu">Menú Formular</label>
					<select class="form-control" id="pqrsMenu" name="message[Tipo]">
						<option value="Queja">Queja</option>
						<option value="Reclamo">Reclamo</option>
						<option value="Petición de Información">Petición de Información</option>
						<option value="Manifestación">Manifestación</option>
						<option value="Petición de Consulta">Petición de Consulta</option>
						<option value="Denuncia Ambiental">Denuncia Ambiental</option>
					</select>
				</div>

				{# NOMBRE #}
				<div class="form-group">
					<label for="pqrsFirstName">Nombre</label>
					<div class="row">
						<div class="col">
							<input name="message[Nombre][]" id="pqrsFirstName" type="text" class="form-control" required="">
						</div>
						<div class="col">
							<input name="message[Nombre][]" id="pqrsLastName" type="text" class="form-control" required>
						</div>
					</div>
				</div>

				{# ID #}
				<div class="form-group">
					<label>ID</label>
					<input type="text" class="form-control" name="message[ID]" required>
				</div>

				{# EMAIL #}
				<div class="form-group">
					<label for="exampleInputEmail1">Email</label>
					<input type="email" class="form-control" name="fromEmail" id="exampleInputEmail1" aria-describedby="emailHelp" value="{{ message.fromEmail ?? '' }}">
				</div>
			    {{ message is defined and message ? errorList(message.getErrors('fromEmail')) }}

				{# TEXTO #}
				<div class="form-group">
					<label for="message">Texto</label>
					<textarea class="form-control" id="message" name="message[body]" rows="3">{{ message.message.body ?? '' }}</textarea>
				</div>
			    {{ message is defined and message ? errorList(message.getErrors('message')) }}

			    <input type="submit" class="btn btn-primary" value="Enviar">
			</form>
		</div>

	</div>
</div>

{% endblock %}