{% extends 'base.html' %}
{% block header%}
    <h1> SciPy India Conference 2016 </h1>
{% endblock %}
{% block content %}
          <div class="modal fade" id="invalidModal" tabindex="-1" role="dialog" aria-labelledby="invalidModalLabel" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="invalidModalLabel">Invalid Category</h4>
                  </div>
                  <div class="modal-body">
                    The requested certificate is unavailable for your email address. Please select the appropriate category and retry.
                  </div>
                </div>
              </div>
          </div>
          <form class="col-lg-12" action="{% url 'certificate:scipy_download_2016' %}" method="post">
            {% csrf_token %}
            {{ message }}
            <hr>
            <p>Please choose the appropriate category</p>
            <input type="radio" name="type" id="P" value="P" checked="True">Participant
            &nbsp;&nbsp;<input type="radio" name="type" id="A" value="A">Speaker
            &nbsp;&nbsp;<input type="radio" name="type" id="W" value="W">Workshop Instructor
            <!-- &nbsp;&nbsp;<input type="radio" name="type" id="T" value="T">TA -->
            <hr>
            <div id ="paper">
            {% if user_papers %}
                <span><h3>Papers presented</h3><span>
                        <div class="radio" style="padding-left:350px;text-align:left">
                {% for user in user_papers %}
                <input type="radio" name="paper" value="{{ user.paper }}">{{ user.paper }}<br>
                {% endfor %}
                </div>
            {% endif %}
        </div>
            <div class="input-group" style="width:340px;text-align:center;margin:0 auto;">
            <input style="width:450;" class="form-control input-lg" placeholder="Enter the email address you used for registration" type="text" id="email" name=email>
              <span class="input-group-btn"><button class="btn btn-lg btn-primary" type="submit" id = 'myBtn' data-toggle = "modal">Mail Certificate</button></span>
           
              <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
              <div class="modal-dialog">
              <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                 <h4 class="modal-title" id="myModalLabel">Certificate Mailed</h4>

              </div>
              <div class="modal-body">The certificate is mailed to your email id.</div>
                   
                   <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
            </div>
            </div>
              </div>
              
              </form>
          <center><h4>Problem in downloading the certificate? Write to us at <a href="mailto:certificates@fossee.in">certificates[at]fossee[dot]in</a></h4>
{% endblock %}

{% block javascript %}
<script>
    $(document).ready(function(){
        value = "{{ v }}"
        email = ""
        error = "{{ error }}"
       
        if(error == "True"){
            $("#invalidModal").modal();
        }
        if(error == "False"){
            $("#myModal").modal();
        }
        if(value == "paper"){
            $('#A').prop('checked', true)
            email = "{{ user_papers.0.email }}";
        }
        $('#email').val(email);
        notreg = "{{ notregistered }}";
        if(notreg == "1"){
            $("#invalidModal").modal();
        }
        $("[name=type]").change(function(){
            $("#paper").remove();
        });
   });
</script>
{% endblock %}