{% extends "bases/bootstrap-with-nav.html" %}
{% load staticfiles %}
{% load bootstrap3 %}


{% block content %}

<script type="text/javascript">
    // This events list is generated for later input validation
    var events_list = [
    {% for event in events %}
        {% if not forloop.first %},{% endif %}
        {
            title: "{{ event.title }}",
            slug: "{{ event.EID }}"
        }
    {% endfor %}
    ];

    // This list of demo user emails will be used for input validation
    var user_emails = [
    {% for user in demo_users %}
        {% if not forloop.first %},{% endif %}
        {
            email: "{{ user.email }}"
        }
    {% endfor %}
    ];
</script>

<!-- The following UI was ported from the Election Authority UI in DEMOS1 by Vincent de Almeida -->
<!-- The DEMOS1 repository can be found at: https://github.com/mlevogiannis/demos-voting -->
<!-- TODO: look into i18n translations as this was a feature implemented in DEMOS1 -->
<hr/>
<div class="container">
    <div class="page-header">
        <h2>Create New Event with Polls</h2>
    </div>
    <div class="row">
        <div class="col-xs-12">
            <form id="election-form" class="form-horizontal" method="POST" novalidate>
                {% csrf_token %}
                <!-- TODO: Have not imported the if form not valid template code as this needs further investigating -->
                <!-- Name -->
                <div class="form-group">
                  <label for="name-input" class="col-sm-3 col-md-2 control-label">Name:</label> <!-- This text can be a template variable -->
                  <div class="col-sm-9 col-md-10">
                    <input type="text" class="form-control input-control" id="name-input" placeholder="Example: My poll" name="name-input" maxlength="255">
                    <span id="name-input-hint-block" class="help-block">
                        A short and clear name.
                    </span>
                    <span id="name-input-error-block" class="help-block errorText">
                        <!-- Errors flagged here -->
                    </span>
                  </div>
                </div>
                <!-- Slug / Identifier -->
                <div class="form-group">
                  <label for="identifier-input" class="col-sm-3 col-md-2 control-label">Identifier:</label> <!-- This text can be a template variable -->
                  <div class="col-sm-9 col-md-10">
                    <input type="text" class="form-control input-control" id="identifier-input" placeholder="Example: My-poll" name="identifier-input" maxlength="255">
                      <span id="identifier-input-help-block" class="help-block">
                        Used in the election URL, it must only consist of letters, numbers, underscores or hyphens; no whitespace is permitted.
                      </span>
                      <span id="identifier-input-error-block" class="help-block errorText">
                        <!-- Errors flagged here -->
                      </span>
                  </div>
                </div>
                <!-- Voting start time -->
                <div class="form-group ">
                  <label for="vote-start-input" class="col-sm-3 col-md-2 control-label">Voting starts at:</label>
                  <div class="col-sm-9 col-md-10">
                    <div class="input-group date">
                      <input type="text" class="form-control input-control" data-date-format="YYYY-MM-DD H:mm Z" id="vote-start-input" name="vote-start-input">
                      <span class="input-group-addon btn">
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                        /
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                      </span>
                    </div>
                    <span id="vote-start-input-help-block" class="help-block">
                      Date and time when registered voters can commence voting. This includes the UTC offset starting with '+'.
                    </span>
                      <span id="vote-start-input-error-block" class="help-block errorText">
                        <!-- Errors flagged here -->
                      </span>
                  </div>
                </div>
                <!-- Voting end time -->
                <div class="form-group ">
                  <label for="vote-end-input" class="col-sm-3 col-md-2 control-label">Voting ends at:</label>
                  <div class="col-sm-9 col-md-10">
                    <div class="input-group date">
                      <input type="text" class="form-control input-control" data-date-format="YYYY-MM-DD H:mm Z" id="vote-end-input" name="vote-end-input">
                      <span class="input-group-addon btn">
                        <i class="fa fa-calendar" aria-hidden="true"></i>
                        /
                        <i class="fa fa-clock-o" aria-hidden="true"></i>
                      </span>
                    </div>
                    <span id="vote-end-input-help-block" class="help-block">
                      Date and time when registered voters can no longer vote. This includes the UTC offset starting with '+'.
                    </span>
                      <span id="vote-end-input-error-block" class="help-block errorText">
                        <!-- Errors flagged here -->
                      </span>
                  </div>
                </div>
                <!-- Question / Statement -->
                <div class="form-group">
                  <label for="question-input" class="col-sm-3 col-md-2 control-label">Question / Statement:</label> <!-- This text can be a template variable -->
                  <div class="col-sm-9 col-md-10">
                      <input type="text" class="form-control input-control" id="question-input" placeholder="Example: Elections for the European Parliament" name="question-input" maxlength="200">
                      <span id="question-input-help-block" class="help-block">
                        Question / Statement that will be put forward to voters along with the below options.
                      </span>
                      <span id="question-input-error-block" class="help-block errorText">
                        <!-- Errors flagged here -->
                      </span>
                  </div>
                </div>
                <!-- Options -->
                <div class="form-group">
                  <label for="options-input" class="col-sm-3 col-md-2 control-label">Options:</label> <!-- This text can be a template variable -->
                  <div class="col-sm-9 col-md-10">
                    <div class="form-group">
                        <table id="options-input-table" class="table table-hover">
                          <thead>
                            <tr>
                              <th class="text-center">#</th>
                              <th>Option</th>
                              <th class="text-center">Actions</th>
                            </tr>
                          </thead>
                          <tbody id="sort" class="formset option-formset" data-formset-prefix="questions" data-formset-type="inline">
                            <!-- Option -->
                            <tr class="formset-form sorting-row" data-formset-form-prefix="question">
                              <!-- # -->
                              <th class="formset-form-index text-center" scope=row>
                                1
                              </th>
                              <!-- Option Label -->
                              <td>
                                <div>
                                  <!-- TODO: Add an invisible screen reader label to associate with this and other inputs -->
                                    <input type="text" class="form-control input-sm input-control" placeholder="Example: Candidate 1" id="option-name-input" name="option-name-input" maxlength="200">
                                </div>
                              </td>
                              <!-- Delete Action -->
                              <td class="formset-form-actions text-center">
                                <button type="button" class="btn btn-sm btn-default formset-form-remove" aria-label="Remove">
                                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </button>
                              </td>
                            </tr>
                            <!-- Option -->
                            <tr class="formset-form sorting-row" data-formset-form-prefix="question">
                              <!-- # -->
                              <th class="formset-form-index text-center" scope=row>
                                2
                              </th>
                              <!-- Option Label -->
                              <td>
                                <div>
                                    <!-- TODO: Add an invisible screen reader label to associate with this and other inputs -->
                                    <input type="text" class="form-control input-sm input-control" placeholder="Example: Candidate 2" id="option-name-input" name="option-name-input" maxlength="200">
                                </div>
                              </td>
                              <!-- Delete Action -->
                              <td class="formset-form-actions text-center">
                                <button type="button" class="btn btn-sm btn-default formset-form-remove" aria-label="Remove">
                                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </button>
                              </td>
                            </tr>
                            <!-- Option -->
                            <tr class="formset-form sorting-row formset-form-empty hidden" data-formset-form-prefix="question">
                              <!-- # -->
                              <th class="formset-form-index text-center" scope=row>
                                X
                              </th>
                              <!-- Option Label -->
                              <td>
                                <div>
                                    <!-- TODO: Add an invisible screen reader label to associate with this and other inputs -->
                                    <input type="text" class="form-control input-sm input-control" placeholder="Example: Candidate X" id="option-name-input" name="option-name-input" maxlength="200">
                                </div>
                              </td>
                              <!-- Delete Action -->
                              <td class="formset-form-actions text-center">
                                <button type="button" class="btn btn-sm btn-default formset-form-remove" aria-label="Remove">
                                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </button>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <div class="clearfix">
                          <button type="button" class="btn btn-primary formset-add" data-formset-prefix="questions">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            Add Question Option
                          </button>
                        </div>
                        <span id="question-input-help-block" class="help-block">
                            Drag and drop to re-order options.
                        </span>
                        <span id="options-input-error-block" class="help-block errorText">
                            <!-- Errors flagged here -->
                        </span>
                      </div>
                  </div>
                </div>
                <!-- Number of option selections -->
                <div class="form-group">
                  <label for="selections-input" class="col-sm-3 col-md-2 control-label">Number of Selections:</label> <!-- This text can be a template variable -->
                  <div class="col-sm-9 col-md-10">
                      <div class="row">
                          <div class="col-xs-6">
                            <label class="sr-only" for="minimum-input">Minimum</label>
                            <input type="number" class="form-control input-control" id="minimum-input" placeholder="Minimum" value="" name="minimum-input" min="0"> <!-- TODO: Max should be set to the number of options -->
                          </div>
                          <div class="col-xs-6">
                            <label class="sr-only" for="maximum-input">Maximum</label>
                            <input type="number" class="form-control input-control" id="maximum-input" placeholder="Maximum" value="" name="maximum-input" min="1"> <!-- TODO: Max should be set to the number of options -->
                          </div>
                      </div>
                      <span id="question-input-help-block" class="help-block">
                        Minimum and maximum number of option selections that a voter can make for the specified question / statement.
                      </span>
                        <span id="selections-input-error-block" class="help-block errorText">
                            <!-- Errors flagged here -->
                        </span>
                  </div>
                </div>
                <!-- Organisers -->
                <div class="form-group">
                  <label for="organisers-input" class="col-sm-3 col-md-2 control-label">Organisers:</label> <!-- This text can be a template variable -->
                  <div class="col-sm-9 col-md-10">
                    <div class="form-group">
                        <table id="organisers-input-table" class="table table-hover">
                          <thead>
                            <tr>
                              <th class="text-center">#</th>
                              <th>Email</th>
                              <th class="text-center">Actions</th>
                            </tr>
                          </thead>
                          <tbody class="formset organiser-formset" data-formset-prefix="organisers" data-formset-type="inline">
                            <!-- Organiser -->
                            <tr class="formset-form sorting-row" data-formset-form-prefix="organiser">
                              <th class="formset-form-index text-center" scope=row>
                                <!-- # -->
                                1
                              </th>
                              <td>
                                <!-- Email -->
                                <div>
                                  <!-- TODO: Add an invisible screen reader label to associate with this and other inputs -->
                                    <input type="text" class="form-control input-sm input-control" placeholder="Example: organiser@example.com" id="organiser-email-input" name="organiser-email-input" value="{{ user_email }}" maxlength="255">
                                </div>
                              </td>
                              <td class="formset-form-actions text-center">
                                <!-- Action -->
                                <button type="button" class="btn btn-sm btn-default formset-form-remove" aria-label="Remove">
                                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </button>
                              </td>
                            </tr>
                            <!-- Organiser -->
                            <tr class="formset-form sorting-row" data-formset-form-prefix="question">
                              <th class="formset-form-index text-center" scope=row>
                                <!-- # -->
                                2
                              </th>
                              <td>
                                <!-- Email -->
                                <div>
                                    <!-- TODO: Add an invisible screen reader label to associate with this and other inputs -->
                                    <input type="text" class="form-control input-sm input-control" placeholder="Example: organiser@example.com" id="organiser-email-input" name="organiser-email-input" maxlength="255">
                                </div>
                              </td>
                              <td class="formset-form-actions text-center">
                                <button type="button" class="btn btn-sm btn-default formset-form-remove" aria-label="Remove">
                                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </button>
                              </td>
                            </tr>
                            <!-- Organiser -->
                            <tr class="formset-form sorting-row formset-form-empty hidden" data-formset-form-prefix="question">
                              <th class="formset-form-index text-center" scope=row>
                                <!-- # -->
                                X
                              </th>
                              <td>
                                <!-- Email -->
                                <div>
                                    <!-- TODO: Add an invisible screen reader label to associate with this and other inputs -->
                                    <input type="text" class="form-control input-sm input-control" placeholder="Example: organiserX@example.com" id="organiser-email-input" name="organiser-email-input" maxlength="255">
                                </div>
                              </td>
                              <td class="formset-form-actions text-center">
                                <button type="button" class="btn btn-sm btn-default formset-form-remove" aria-label="Remove">
                                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </button>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <div class="clearfix">
                          <button type="button" class="btn btn-primary formset-add" data-formset-prefix="organisers">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            Add Organiser Email
                          </button>
                        </div>
                        <span id="question-input-help-block" class="help-block">
                            Drag and drop to re-order emails.
                        </span>
                        <span id="organisers-input-error-block" class="help-block errorText">
                            <!-- Errors flagged here -->
                        </span>
                      </div>
                  </div>
                </div>
                <!-- Trustees -->
                <div class="form-group">
                  <label for="trustees-input" class="col-sm-3 col-md-2 control-label">Trustees:</label> <!-- This text can be a template variable -->
                  <div class="col-sm-9 col-md-10">
                    <div class="form-group">
                        <table id="trustees-input-table" class="table table-hover">
                          <thead>
                            <tr>
                              <th class="text-center">#</th>
                              <th>Email</th>
                              <th class="text-center">Actions</th>
                            </tr>
                          </thead>
                          <tbody class="formset trustee-formset" data-formset-prefix="trustees" data-formset-type="inline">
                            <!-- Trustee -->
                            <tr class="formset-form sorting-row" data-formset-form-prefix="trustee">
                              <th class="formset-form-index text-center" scope=row>
                                <!-- # -->
                                1
                              </th>
                              <td>
                                <!-- Email -->
                                <div> <!-- Has error conditional class removed -->
                                  <!-- TODO: Add an invisible screen reader label to associate with this and other inputs -->
                                    <input type="text" class="form-control input-sm input-control" placeholder="Example: trustee@example.com" id="trustee-email-input" name="trustee-email-input" value="{{ user_email }}" maxlength="255">
                                </div>
                              </td>
                              <td class="formset-form-actions text-center">
                                <!-- Action -->
                                <button type="button" class="btn btn-sm btn-default formset-form-remove" aria-label="Remove">
                                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </button>
                              </td>
                            </tr>
                            <!-- Trustee -->
                            <tr class="formset-form sorting-row" data-formset-form-prefix="trustee">
                              <th class="formset-form-index text-center" scope=row>
                                <!-- # -->
                                2
                              </th>
                              <td>
                                <!-- Email -->
                                <div> <!-- Has error conditional class removed -->
                                    <!-- TODO: Add an invisible screen reader label to associate with this and other inputs -->
                                    <input type="text" class="form-control input-sm input-control" placeholder="Example: trustee@example.com" id="trustee-email-input" name="trustee-email-input" maxlength="255">
                                </div>
                              </td>
                              <td class="formset-form-actions text-center">
                                <button type="button" class="btn btn-sm btn-default formset-form-remove" aria-label="Remove">
                                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </button>
                              </td>
                            </tr>
                            <!-- Trustee -->
                            <tr class="formset-form sorting-row formset-form-empty hidden" data-formset-form-prefix="trustee">
                              <th class="formset-form-index text-center" scope=row>
                                <!-- # -->
                                X
                              </th>
                              <td>
                                <!-- Email -->
                                <div> <!-- Has error conditional class removed -->
                                    <!-- TODO: Add an invisible screen reader label to associate with this and other inputs -->
                                    <input type="text" class="form-control input-sm input-control" placeholder="Example: trusteeX@example.com" id="trustee-email-input" name="trustee-email-input" maxlength="255">
                                </div>
                              </td>
                              <td class="formset-form-actions text-center">
                                <button type="button" class="btn btn-sm btn-default formset-form-remove" aria-label="Remove">
                                  <i class="fa fa-trash-o" aria-hidden="true"></i>
                                </button>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                        <div class="clearfix">
                          <button type="button" class="btn btn-primary formset-add" data-formset-prefix="trustees">
                            <i class="fa fa-plus-circle" aria-hidden="true"></i>
                            Add Trustee Email
                          </button>
                        </div>
                        <span id="trustees-input-help-block" class="help-block">
                            Drag and drop to re-order emails.
                        </span>
                        <span id="trustees-input-error-block" class="help-block errorText">
                            <!-- Errors flagged here -->
                        </span>
                      </div>
                  </div>
                </div>
                <!-- Voters List -->
                <div class="form-group">
                  <label for="voters-list-input" class="col-sm-3 col-md-2 control-label">Voters List:</label> <!-- This text can be a template variable -->
                  <div class="col-sm-9 col-md-10">
                      <textarea class="form-control input-control" id="voters-list-input" placeholder="alice@example.com, bob@example.com..." name="voters-list-input" rows="4"></textarea>
                      <span id="voters-list-input-help-block" class="help-block">
                        Manually enter email addresses separated with commas. Alternatively, you can also upload a CSV file:
                      </span>
                      <label for="files" class="btn btn-primary">
                            Upload CSV
                      </label>
                      <input type="file" id="files" name="file" class="btn-info">
                      <h4 id="result" class="hidden"></h4>
                        <span id="voters-input-error-block" class="help-block errorText">
                            <!-- Errors flagged here -->
                        </span>
                  </div>
                </div>
                <!-- reCAPTCHA -->
                <div class="form-group">
                  <label for="recaptcha-input" class="col-sm-3 col-md-2 control-label">reCAPTCHA:</label> <!-- This text can be a template variable -->
                  <div class="col-sm-9 col-md-10">
                      <div class="g-recaptcha"
                           data-callback="reCVerificationCallback"
                           data-expired-callback="reCExpiredCallback"
                           data-sitekey="{{ G_R_SITE_KEY }}"></div> <!-- Need to finish server implementation and import key from settings -->
                      <span id="recaptcha-input-help-block" class="help-block">
                        Tick the box to prove that you're not a robot.
                      </span>
                  </div>
                </div>
                <hr>
                <input class="btn btn-success" type="submit" value="Create Event" id="submit-event-create" disabled/>
                <input class="btn btn-danger" type="button" value="Cancel" id="cancel-event-create" onclick="location.href='{% url 'polls:index' %}'" />
                <span id="all-errors-help-block" class="help-block errorText">
                    <!-- Place a summary of all errors here -->
                </span>
            </form>
        </div>
    </div>
</div>


{% endblock %}