{% extends "layouts/election_layout.html" %}

{% block header %}
<title>Cryptovote | Create Election</title>
<link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/multiple-emails.css') }}" />
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" />
{% endblock %}

{% block content %}
<section class="portfolio-block contact">
    <div class="container">
        <form action="{{ url_for('election.register_voters', election=election.name) }}" method="post">
            <div class="text-center" style="font-size:3em;">Register Voters</div>
            <p class="text-center mb-4">Input the email addresses of voters to add</p>
            <div class="form-group" style="margin-top: 50px;">
              <input type='text' id='voter_emails' name='voter_emails' class='form-control' value=''>
            </div>
            <div class="form-group" style="margin-top: 50px;">
              <button type="submit" class="btn btn-primary btn-block btn-lg" style="background-color: #0084da;">Register</button>
            </div>
        </form>
    </div>
</section>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="{{ url_for('static', filename='js/multiple-emails.js') }}"></script>
<script type="text/javascript">
  $(function() {
    $('#voter_emails').multiple_emails({
      position: "bottom"
    });
    $(document).on("keydown", "form", function(event) {
      return event.key != "Enter";
    });
  });
</script>
{% endblock %}