{% extends 'checkIn/layout.html' %}
{% load staticfiles %}

{% block script %}
<script src="{% static '/JS/userCheckIn.js' %}"></script>
<link href="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="{% static '/JS/datepickerCN.js' %}"></script>
{% endblock %}

{% block body %}
    <div class="container" style="background-color:lightgoldenrodyellow">
        <h3>{{checkIn.description}}：</h3>
        <form id="checkIn" method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <table class="table">
                {% for item in items %}
                <tr>
                    <th>{{item.description}}{% if item.unique %}(这个内容不能和别的签到者重复){% endif %}:</th>

                    <td>
                        {% if item.type == 0 %}<input type="text" required="required" name="{{item.description}}" style="width:100%"/>{% endif %}
                        {% if item.type == 1 %}<input type="number" required="required" name="{{item.description}}" style="width:100%" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />{% endif %}
                        {% if item.type == 2 %}<input type="email" required="required" name="{{item.description}}" style="width:100%"/>{% endif %}
                        {% if item.type == 3 %}
                        <input type="date" required="required" name="{{item.description}}" id="{{item.ID}}" style="width:100%"/>
                        <script>
                            var userAgent = navigator.userAgent;
                            if (userAgent.indexOf("Trident") > -1 || userAgent.indexOf("MSIE") > -1) {
                                $(function() {$("#{{item.ID}}").datepicker();});
                            }
                        </script>
                        {% endif %}
                        {% if item.type == 4 %}
                        <select name="{{item.description}}">
                            {% for option in item.option %}
                            <option value="{{option}}">{{option}}</option>
                            {% endfor %}
                        </select>
                        {% endif %}
                        {% if item.type == 5 %}
                        {% for option in item.option %}
                        <input type="checkbox" name="{{item.description}}" value="{{option}}">{{option}}</input>
                        {% endfor %}
                        {% endif %}
                        {% if item.type == 6 %}<input type="file" required="required" name="{{item.description}}" accept="{{ item.option }}" style="width:100%"/>{% endif %}
                        {% if item.type == 7 %}<input type="file" required="required" name="{{item.description}}" accept=".jpg,.jpeg,.tiff,.png" style="width:100%"/>{% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% if captcha %}
                    {{captcha}}
                {% endif %}
            </table>
            <div style="text-align:center">
                <input id="submit" type="submit" value="提交" class="btn btn-default" />
            </div>
        </form>
        <p><a href="/" target="_blank">如果你也想创建一个签到，报名活动的话，请访问我们的网站。</a></p>
    </div>
{% endblock %}