{% extends "sakai/base.html" %}{% load molly_sakai %}{% load molly_utils %}{% load i18n %}

{% block content %}

{% if poll.mayVote %}
<form method="POST" action="">
  {% csrf_token %}
{% endif %}

<div class="section">
  <div class="header">
    <h2>{{ poll.text }}</h2>

    {% if error %}
      <div class="sakai-error-message">
        <p>
          {{ error }}
        </p>
      </div>
    {% endif %}

    {% if not poll.hasVoted and not poll.isOpen %}
      <div class="sakai-error-message">
        <p>
          {% if poll.hasClosed %}
              {% blocktrans with poll.voteClose|timesince as time_since_closed %}You are unable to vote in this poll as it closed {{ time_since_closed }} ago.{% endblocktrans %}
          {% else %}
              {% blocktrans with poll.voteOpen|timeuntil as time_until_open %}This poll has not yet opened. Please try again in {{ time_until_open }}.{% endblocktrans %}
          {% endif %}
        </p>
      </div>
    {% endif %}
    {% if not poll.hasVoted and poll.isOpen %}
      <div class="sakai-notice-message">
        {% blocktrans with poll.voteClose|timeuntil as time_until_close %}This poll closes {{ time_until_close }} from now.{% endblocktrans %}
      </div>
    {% endif %}
    {% if poll.minOptions > 1 %}
      <div class="sakai-notice-message">
        {% if poll.maxOptions > poll.minOptions %}
          <p>{% blocktrans with poll.minOptions as min_options and poll.maxOptions as max_options %}You must select at least {{ min_options }} and at most {{ max_options }} options.{% endblocktrans %}</p>
        {% else %}
          <p>{% blocktrans with poll.minOptions as options %}You must select {{ options }} options.{% endblocktrans %}</p>
        {% endif %}
      </div>
    {% else %}
      {% if poll.maxOptions > 1 %}
        <div class="sakai-notice-message">
          <p>{% blocktrans with poll.maxOptions as max_options %}You can select up to {{ max_options }} options.{% endblocktrans %}</p>
        </div>
      {% endif %}
    {% endif %}

    {% if poll.details %}
      <div class="content">
        {{ poll.details|sanitize_html }}
      </div>
    {% endif %}
  </div>

  <table class="content">
    <thead>
      <tr>
        <th>{% trans "Vote" %}</th>
        <th>{% trans "Option detail" %}</th>
        {% if vote_count %}
          <th>{% trans "Results" %}</th>
        {% endif %}
      </tr>
    </thead>
    
    <tbody>
        {% for option in options %}
            <tr class="poll-option">
                <td class="poll-choice">
                    {% if poll.mayVote %}
                    <label>
                        <input
                          type="{{ poll.maxOptions|pluralize:"radio,checkbox" }}"
                          name="pollOption" id="pollOption-{{ option.id }}"
                          value="{{ option.id }}"
                        />
                    </label>
                    {% else %}
                        {% if option.votedFor %}
                            <img src="{{ STATIC_URL }}sakai-polls/images/voted.png" alt="&#10007;"/>
                        {% endif %}
                    {% endif %}
                </td>
                <td>
                    {{ option.text|sanitize_html }}
                </td>
                {% if vote_count %}
                    <td class="vote-count">
                        <span>{{ option.voteCount }} ({% widthratio option.voteCount vote_count 100 %}%)</span><br/>
                        <div class="vote-box">
                            <div class="vote-box-voted" style="width:{% widthratio option.voteCount vote_count 100 %}%;"></div>
                        </div>
                    </td>
                {% endif %}
            </tr>
        {% endfor %}
    </tbody>
    
    {% if poll.mayVote %}
        <tfoot class="may-vote">
            <tr>
                <td colspan="{% if vote_count %}3{% else %}2{% endif %}" class="center">
                    <input type="submit" value="{% trans "Vote" %}"/>
                </td>
            </tr>
        </tfoot>
    {% endif %}
  </table>
</div>

{% if poll.mayVote %}
</form>
{% endif %}

{% endblock %}
