{% extends "base.html" %}
{% load wagtailimages_tags wagtailcore_tags static core_tags gem_tags %}

{% block content %}
<div class="contact">
  <div class="banner">
    <div class="heading heading--hero">
      <h1 class="heading__title">{{ page.title }}</h1>
    </div>
  </div>
  <div class="contact__wrapper">
    <div class="contact__columns">
      <div class="contact__first-column">
        <div class="heading">
          <h2 class="heading__title">{{ page.introduction }}</h2>
        </div>
        <form action="{% if form_page.display_form_directly %}{% pageurl form_page %}{% else %}{% pageurl self.specific %}{% endif %}{% if self.multi_step or self.has_page_breaks %}?p={{ self.number|add:'1' }}{% endif %}" method="POST" class="contact__form" novalidate>
        {% csrf_token %}
          {% for field in form %}
            {% if field|fieldtype != 'HiddenInput' %}
              {% if field|fieldtype == 'CheckboxInput' %}
                <fieldset>
                  <div class="choice-group">
                    <input name="{{ field.name }}" id="{{ field.label|idfromlabel }}" type="checkbox" value="{{field.value}}"/>
                    <label for="{{ field.label|idfromlabel }}">{{ field.label|capfirst }}</label>
                  </div>
                </fieldset>
              {% elif field|fieldtype == 'CheckboxSelectMultiple' %}
                <fieldset>
                  {% for value, text in field.field.choices %}
                    <div class="choice-group">
                      <input name="{{ field.name }}" id="value-{{ field.label|idfromlabel }}-{{ forloop.counter }}" type="checkbox" value="{{ value }}" {% if field.value.0 == value %}checked="checked"{% endif %}/>
                      <label for="value-{{ field.label|idfromlabel }}-{{ forloop.counter }}">{{ text|capfirst }}</label>
                    </div>
                  {% endfor %}
                </fieldset>
              {% elif field|fieldtype == 'RadioSelect' %}
                <fieldset>
                  {% for value, text in field.field.choices %}
                    <div class="choice-group choice-group__radio">
                      <input name="{{ field.name }}"
                       id="value-{{ field.id_for_label }}-{{ forloop.counter }}" type="radio" value="{{ value }}" {% if field.value == value %}checked="checked"{% endif %}/>
                       <label for="value-{{ field.id_for_label }}-{{ forloop.counter }}">{{ text|capfirst }}</label>
                    </div>
                  {% endfor %}
                </fieldset>
              {% elif field|fieldtype == 'Select' %}
                <fieldset>
                  <div class="select-group">
                    <select id="{{ field.id_for_label }}"  name="{{field.name}}" class="select">
                       {% if field.value.0 %}
                         <option value="{{field.value}}" selected="selected">{{field.value}}</option>
                         {% for choice in field.field.choices %}
                           <option value="{{choice.0}}" {% if field.value == choice.0 %}selected="selected"{% endif %}>
                               {{choice.0}}
                           </option>
                         {% endfor %}
                       {% elif not field.value.0  %}
                         <option value selected="selected">Choose..</option>
                           {% for choice in field.field.choices %}
                           <option value="{{choice.0}}" {% if field.value == choice.0 %}selected="selected"{% endif %}>
                               {{choice.0}}
                            </option>
                           {% endfor %}
                       {% endif %}
                    </select>
                  </div>
                </fieldset>
              {% else %}
                <fieldset>
                  <div class="input-group">
                    <label for="{{ field.id_for_label }}">{{ field.label|capfirst }}</label>
                    {% if field.help_text %}
                      {% if field|fieldtype == 'CharacterCountWidget' %}
                        <p class="helptext helptext--counter">{{ field.help_text }}</p>
                      {% else %}
                        <p class="helptext">{{ field.help_text }}</p>
                      {% endif %}
                    {% endif %}
                    {{field}}
                  </div>
                </fieldset>
              {% endif %}
              {% if field.errors %}
                <ul class="error-list">
                {% for error in field.errors %}
                  <li class="error-list__item">{{ error }}</li>
                {% endfor %}
                </ul>
              {% endif %}
            {% endif %}
          {% endfor %}

          <button type="submit" class="call-to-action__button call-to-action__button--primary">
            {% if is_intermediate_step %}
              {% trans 'Next' %}
            {% elif page.submit_text %}
              {{page.submit_text}}
            {% else %}
              {% trans 'Submit Message' %}
            {% endif %}
          </button>
          {% if not fields_step or fields_step and fields_step.number == 1 %}
          <input type="hidden" name="article_page" {% if self.content_type|lower == 'article' %} value="{{ self.pk }}" {% endif %} />
          {% endif %}
        </form>
        {% if fields_step and fields_step.paginator.num_pages > 1 %}
          <div class="contact-pagination">
            <p class="contact-pagination__page">
              {% with page=fields_step.number pages=fields_step.paginator.num_pages %}
                {% trans "Page"  %}
                <span class="contact-pagination__number"> {{page}}</span>
                {% trans "of" %}
                <span class="contact-pagination__number">
                  {{pages}}
                </span>
              {% endwith %}
            </p>
          </div>
        {% endif %}
        {% if page.terms_and_conditions.exists and page.terms_and_conditions.first.terms_and_conditions.live %}
          <div class="contact__terms">
            <p>{% trans "Read:" %}
              <a href="{% pageurl page.terms_and_conditions.first.terms_and_conditions %}" class="contact__anchor">
                {{page.terms_and_conditions.first.terms_and_conditions.title}}
              </a>
            </p>
          </div>
      {% endif %}
      </div>
      <div class="contact__second-column">
        {% if self.description %}
          <div class="contact-inner">
            {% for block in self.description %}
              {% if forloop.counter %}
                {% if block.block_type == 'heading' %}
                  <div class="heading">
                    <h2 class="heading__title">{{ block.value }}</h2>
                  </div>
                {% else %}
                  {{ block }}
                {% endif %}
              {% endif %}
            {% endfor %}
          </div>
        {% endif %}
        <!-- {# {% include_block page.description %}  #}-->
      </div>
    </div>
  </div>
</div>
{% endblock %}