{% extends 'base.html' %}
{% load wagtailimages_tags wagtailcore_tags static core_tags gem_tags %}
{% wagtail_site as current_site %}
{% block content %}
<div class="{% if self.your_words_competition %}yourwords{% elif self.display_form_directly %}polls{% else %}surveys{% endif %}">
  <div class="{% if self.your_words_competition %}yourwords{% elif self.display_form_directly %}polls{% else %}surveys{% endif %}__wrapper">
    <div class="heading {% if self.your_words_competition %}heading--hero {% else %}heading--secondary{% endif %}">
      <h1 class="{% if self.your_words_competition %}heading__component {% else %}heading__title{% endif %}">
        {% if self.your_words_competition %}{% trans 'Share your story' %}{% elif self.display_form_directly %}{% trans 'Vote' %}{% else %}{% trans 'Quiz' %}{% endif %}
      </h1>
    </div>
    <div class="{% if self.your_words_competition %}yourwords{% elif self.display_form_directly %}polls{% else %}surveys{% endif %}__inner">
      {% if not self.display_form_directly %}
        {% if self.image %}
          <aside>
            {% image self.image width-480 as tmp_photo %}
            <img src="{{ tmp_photo.url }}" alt="{{ tmp_photo.title }}" class="{% if self.your_words_competition %}yourwords{% elif self.display_form_directly %}polls{% else %}surveys{% endif %}__image" />
          </aside>
        {% endif %}
      {% endif %}
      <section>
        <h2 class="heading__headline">{{self.title}}</h2>
        {% if self.introduction %}
          <p class="heading__subtitle">
            {{page.introduction|smarttruncatechars:550|safe}}
          </p>
        {% endif %}
        {% if user.is_authenticated and user.is_active or request.is_preview or self.allow_anonymous_submissions %}
            {% if self.description %}
              <div class="{% if self.your_words_competition %}yourwords{% elif self.display_form_directly %}polls{% else %}surveys{% endif %}__excerpt">
                {% for block in self.description %}
                  {% if forloop.counter %}
                    {% if block.block_type == 'heading' %}
                      <h3 class="{% if self.your_words_competition %}yourwords{% elif self.display_form_directly %}polls{% else %}surveys{% endif %}__title">
                        {{ block.value }}
                      </h3>
                    {% else %}
                      {{ block }}
                    {% endif %}
                  {% endif %}
                {% endfor %}
              </div>
            {% endif %}
            {% if page.terms_and_conditions.exists and page.terms_and_conditions.first.terms_and_conditions.live %}
              <h4 class="{% if self.your_words_competition %}yourwords{% elif self.display_form_directly %}polls{% else %}surveys{% endif %}__terms">
                {% trans "Read:" %}
                <a href="{% pageurl page.terms_and_conditions.first.terms_and_conditions %}" class="call-to-action__item call-to-action__item-text">
                  {{page.terms_and_conditions.first.terms_and_conditions.title}}
                </a>
              </h4>
            {% endif %}
            {% if fields_step and fields_step.paginator.num_pages > 1 %}
              <div class="pagination pagination--multi-step">
                <p class="call-to-action__item--text call-to-action__item--text-current">
                  {% if self.your_words_competition %}
                    {% blocktrans with pages=fields_step.paginator.num_pages %}
                    This competition has {{pages}} pages {% endblocktrans %}
                  {% elif not self.display_form_directly %}
                      {% blocktrans with pages=fields_step.paginator.num_pages %}This survey has {{pages}} pages{% endblocktrans %}
                  {% endif %}
                </p>
              </div>
            {% endif %}
            {% if form %}
              {% include "forms/form.html" with formtype="poll" formtypeClass="polls" %}
              {% comment %}
                <form action="{% if form.display_form_directly %}{% pageurl form %}{% else %}{% pageurl self.specific %}{% endif %}{% if self.multi_step or self.has_page_breaks %}?p={{ fields_step.number|add:"1" }}{% endif %}" method="post" class="{% if self.your_words_competition %}yourwords{% elif self.display_form_directly %}polls{% else %}surveys{% endif %}__form {% if self.your_words_competition %}yourwords{% elif self.display_form_directly %}polls{% else %}surveys{% endif %}__form--{{self.get_effective_extra_style_hints}}" novalidate>
                  {% csrf_token %}
                  {% if not is_via_freebasics %}
                    {{ form.media }}
                  {% endif %}
                  {% for field in form %}
                    {% if field|fieldtype == 'CheckboxInput' %}
                      <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>
                    {% endif %}
                    {% if field|fieldtype == 'CheckboxSelectMultiple' %}
                      <fieldset class="{% if self.display_form_directly %}choice-fieldset{% endif %}">
                        {% 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 class="{% if self.display_form_directly %}choice-fieldset{% endif %}">
                        {% 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 class="{% if self.display_form_directly %}choice-fieldset{% endif %}">
                        <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="{% if self.display_form_directly %}polls{% else %}surveys{% endif %}__helptext helptext">{{ field.help_text }}</p>
                              {% else %}
                                <p class="input-hint">{{ 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 %}
                    {% endfor %}
                    <div class="call-to-action--group">
                      {% if form.display_form_directly %}
                        {% if user.is_authenticated and user.is_active or request.is_preview or form.allow_anonymous_submissions %}
                          {% trans "Vote" as defaultText %}
                          <button type="submit" class="call-to-action__button call-to-action__button--primary">{{ form.submit_text|default:defaultText }}</button>
                        {% else %}
                          <a href="{{ LOGIN_URL }}?next={{request.path}}" class="call-to-action__button call-to-action__button--primary">
                            {% trans "Log in to vote" %}
                          </a>
                        {% endif %}
                      {% else %}
                        <button type="submit" class="call-to-action__button call-to-action__button--primary">{% if is_intermediate_step %} {% trans 'Next Question' %} {% elif self.submit_text %} {{self.submit_text}} {% else %} {% trans 'Submit' %} {% if self.your_words_competition %}{% trans 'competition' %}{% elif self.display_form_directly %}{% trans 'poll' %}{% else %}{% trans 'survey' %}{% endif %}{% endif %}</button>
                      {% endif %}
                    </div>
                    {% if fields_step and fields_step.paginator.num_pages > 1 %}
                      <div class="pagination">
                        <p class="call-to-action__item--text call-to-action__item--text-current">
                          {% with page=fields_step.number pages=fields_step.paginator.num_pages %}
                            {% trans "Page"  %} {{page}} {% trans "of" %} {{pages}}
                          {% endwith %}
                        </p>
                      </div>
                    {% endif %}
                </form>
              {% endcomment %}
            {% else %}
              <p class="error-list__item">
                {% trans 'You have already completed this ' %}
                {% if self.your_words_competition %}{% trans 'competition' %}{% elif self.display_form_directly %}{% trans 'poll' %}{% else %}{% trans 'survey' %}{% endif %}.
              </p>
              <div class="call-to-action--group">
                {% if request.path == "/" %}
                  <a href="{% url 'molo.forms:success' form_page.slug %}" class="call-to-action__button call-to-action__button--primary">
                    {% trans "Show Results" %}
                  </a>
                {% else %}
                  <a href="{{current_site.root_page.specific.url}}" class="call-to-action__button call-to-action__button--previous">
                    {% trans "Back home" %}
                  </a>
                {% endif %}
              </div>
            {% endif %}
          {% else %}
            <nav>
              <div class="call-to-action--group">
                <a href="{{ LOGIN_URL }}?next={{request.path}}" class="call-to-action__button call-to-action__button--primary">
                    {% trans "Log in to take" %} {% if self.your_words_competition %}{% trans 'competition' %}{% elif self.display_form_directly %}{% trans 'poll' %}{% else %}{% trans 'survey' %}
                    {% endif %}
                </a>
              </div>
            </nav>
          {% endif %}
        </section>
    </div>
  </div>
</div>
{% endblock %}