{% extends 'base.html' %}
{% load wagtailcore_tags wagtailimages_tags molo_forms_tags %}
{% wagtail_site as current_site %}
{% block content %}
  <!-- {# HEADING #} -->
  {% if self.your_words_competition and not self.personalisableform %}
    <div class="gcn-competition{% if form.your_words_competition %}{% if form.get_effective_extra_style_hints %}  gcn-competition{{form.get_effective_extra_style_hints}}{% endif %}{% endif %}">
      {% if self.image %}
        <div class="surveys--page__image-wrapper">
          {% image self.image width-98 as tmp_photo_small %}
          {% image self.image width-320 as tmp_photo_large %}
          <img src="{{ tmp_photo_small.url }}" srcset="{{ tmp_photo_large.url }}" alt="{{ form.image.title }}" class="surveys--page__image" />
        </div>
      {% else %}
        <div class="surveys--page__image gcn-competition__default"></div>
      {% endif %}
  {% elif self.display_form_directly and not self.personalisableform  %}
    <div class="polls polls--call-to-action">
      <div class="polls__bubble-icon"></div>
      <div class="polls__container">
        <div class="heading heading__micro">
          <p>{% trans "Take a vote!" %}</p>
        </div>
  {% elif self.article_form_only and not self.personalisableform %}
    <div class="reaction-questions-success__block">
      {% if self.image %}
        <div class="reaction-questions-success__image">
          {% image self.image width-165 as icon_small %}
          <img src="{{ icon_small.url }}" alt="{{ self.title }}" class="reaction-questions-success__thumbnail" />
        </div>
      {% else %}
        <div class="reaction-questions-success__image--default"></div>
      {% endif %}
  {% else %}
    <div class="surveys surveys--call-to-action">
      <div class="heading heading__article">
        <h1>{{self.title}}</h1>
      </div>
      {% if self.image %}
        <div class="surveys--page__image-wrapper">
          {% image self.image width-165 as icon_small %}
          <img src="{{ icon_small.url }}" alt="{{ self.title }}" class="surveys--page__image" />
        </div>
      {% else %}
        <div class="identity-image identity-image--survey"></div>
      {% endif %}
  {% endif %}
  <!-- {# END HEADING #}-->

  {% if not self.article_form_only %}
    <div class="heading heading__{% if self.display_form_directly %}article{% else %}component{% endif %}">
      <h1>{{self.title}}</h1>
    </div>
  {% endif %}

  <!-- {# ENABLED RESULTS #} -->
  {% if self.show_results and results %}
    <div class="heading heading__subheading">
      <h4>
        {% trans 'Your' %}
        {% if self.your_words_competition %}
          {% trans 'GCN competition' %}
        {% elif self.display_form_directly and not self.personalisableform %}
          {% trans 'poll' %}
        {% else %}
          {% trans 'survey!' %}
        {% endif %}
        {% trans 'has been completed successfully. See results' %}
      </h4>
    </div>
    <ul class="polls-results-list">
      {% for question, answers in results.items %}
        <label class="polls__question">{{ question|capfirst }}</label>
        {% for answer, count in answers.items %}
        <li class="polls-results-list__item">
          {% if self.show_results_as_percentage %}
            {{answer}}
            <div class="polls-results-list__percent">
              <div class="polls-results-list__percent-bar" style="width:{{ count }}%">
                <span class="choice-percentage">{{ count }}%</span>
              </div>
            </div>
          {% else %}
            <h4 class="polls__answers-counter">
              {{answer}} -
              {{ count }} vote{{ count|pluralize }}</h4>
          {% endif %}
        </li>
        {% endfor %}
      {% endfor %}
    </ul>
  {% else %}
    {% if self.thank_you_text %}
      <div class="heading heading__subheading">
        <h3>{{self.thank_you_text|url_to_anchor|safe}}</h3>
      </div>
    {% else %}
      <div class="heading heading__subheading">
        {% if self.your_words_competition %}
          <h4>{% trans 'Your GCN competition has been completed successfully!' %}</h4>
        {% else %}
          <h3>
            {% trans "Thank you for submitting" %}
            {% if self.display_form_directly and not self.personalisableform %}
              {% trans 'this poll.' %}
            {% elif self.contact_form %}
              {% trans 'this form!' %}
            {% elif self.article_form_only %}
              {% trans 'a response for this article' %}.
            {% else %}
              {% trans 'this survey!' %}
            {% endif %}
          </h3>
        {% endif %}
      </div>
    {% endif %}
  {% endif %}

  <!-- {# DIV CLOSE #} -->
  {% if self.your_words_competition and not self.personalisableform %}
    </div>
  {% elif self.display_form_directly and not self.personalisableform %}
      </div>
    </div>
  {% elif self.article_form_only and not self.personalisableform %}
    </div>
  {% else %}
    </div>
  {% endif %}
  <!-- {# END DIV CLOSE #} -->

  <!-- AMMEND: RETURN TO PAGE IF NOT FROM HOMEPAGE --->
  {% if not self.article_form_only %}
    <div class="call-to-action call-to-action--wide-back">
      <a href="{{current_site.root_page.specific.url}}" class="call-to-action__nav-item-text call-to-action__nav-item-text--left">
        {% trans "Back home" %}
      </a>
    </div>
  {% else %}
  <div class="call-to-action call-to-action--wide-back">
    <a href="{{current_site.root_page.specific.url}}" class="call-to-action__nav-item-text call-to-action__nav-item-text--left">
      {% trans "Back to Article" %}
    </a>
  </div>
  {% endif %}
{% endblock %}
{% block breadcrumbs %}
  <div class="breadcrumbs">
    <ul class="breadcrumbs-list breadcrumbs-list--pipe">
      <li class="breadcrumbs-list__item breadcrumbs-list__item--pipe">
        <a href="{{current_site.root_page.specific.url}}" class="breadcrumbs-list__anchor ">{% trans "Home" %}</a>
      </li>
      <li class="breadcrumbs-list__item breadcrumbs-list__item--pipe">
        <span class="breadcrumbs-list__anchor breadcrumbs-list__anchor--is-active">{{ self }}</span>
      </li>
    </ul>
  </div>
{% endblock %}