{% if component.active %}
	<article class="subscribeBlock bg-{{ index.index0 }} py-5" data-sb-0102 id="{{ id }}">
		<section class="container py-4 subscribe">
			<h2 class="title mb-2">
				{{ (component.subscribeTitle|length) > 0
          ? component.subscribeTitle
          : 'Suscríbete'|t }}
			</h2>
			<div class="description">
				{{ component.subscribeDescription }}
			</div>

			{% set form =
        craft.freeform.form(
          'newsletter',
          {
            id: 'myform',
            class: 'row subscribe__form',
            submitClass: 'button'
          }
        )
      %}

			{{
        form.renderTag({
          class: 'row subscribe__form'
        })
      }}

			{% if form.hasErrors %}
				<div class="freeform-form-has-errors">
					{{ 'There was an error submitting this form'|t }}

					{% if form.errors|length %}
						<ul>
							{% for error in form.errors %}
								<li>{{ error }}</li>
							{% endfor %}
						</ul>
					{% endif %}
				</div>
			{% endif %}

			{% set email = form.get('email') %}
			<div class="col-11 col-md-7 col-lg-5 mx-auto pt-4">
				<div class="input-group mb-3">
					<input type="email" name="{{ email.handle }}" class="form-control ps-4" placeholder="{{ 'Correo electrónico'|t }}" aria-describedby="basic-addon2"/>
					<button class="btn px-lg-5" data-freeform-action="submit" type="submit" id="button-addon2">
						{{ 'SUSCRÍBETE'|t|upper }}
					</button>
				</div>
				{{ email.renderErrors() }}
			</div>

			{{ form.renderClosingTag }}

		{# <form class="row subscribe__form"> #}
			{# <div class="col-11 col-md-7 col-lg-5 mx-auto pt-4"> #}
			{# <div class="input-group mb-3"> #}
			{# <input type="email" #}
			{# class="form-control ps-4" #}
			{# placeholder="{{ 'Correo electrónico'|t }}" #}
			{# aria-describedby="basic-addon2" /> #}
			{# <button class="btn px-lg-5" type="submit" id="button-addon2"> #}
			{# {{ 'SUSCRÍBETE'|t }} #}
			{# </button> #}
			{# </div> #}
			{# </div> #}
			{# </form> #}
		</section>
	</article>
{% endif %}