{% extends "bee_django_crm/base.html" %}
{% load static %}
{% block styles %}
    <style>
        body {
            background-color: #1d9bca;
            background-image: none;
            padding: 10px;
        }

        .container {
            margin: auto;
            max-width: 512px;
        }

        .reg_div {
            background-color: #FFFFFF;
            border: 2px solid #1b5b8b;
            border-radius: 10px;
            text-align: center;
        }

        .reg_title_div img {
            width: 70%;
        }

        .reg_body_div {
            margin-top: 10px;
            padding: 20px;

        }

        .name_div {
            margin: 5px;
            color: #1b5b8b;
            font-size: 18px;

        }

        .info_div {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .row_div {
            width: 100%;
            border: 1px solid #bababa;
            margin: 10px auto;
            height: 45px;
            padding: 10px;
        }

        .icon_div {
            display: inline-block;
            padding-right: 10px;
            border-right: 1px solid #bababa;
            background: url({% static 'bee_django_crm/img/preuser_reg_icon.png' %}) no-repeat;
            width: 40px;
            height: 100%;

        }

        .icon_name {
            background-position: 0 -68px;
        }

        .icon_mobile {
            background-position: 0 -140px;
        }

        .icon_gender {
            background-position: -72px -105px;
        }

        .icon_city {
            background-position: 0 0;

        }

        .icon_wx {
            background-position: 0 -211px;
        }

        .input_div {
            padding-left: 5px;
            display: inline-block;
            position: relative;
            top: -5px;

        }

        input {
            border: 0;
            max-width: 150px;
        }

        #id_gender {
            padding: 0;

        }

        li {
            list-style-type: none;
            float: left;
            padding-right: 10px;
        }

        .errorlist {
            float: right;
            color: red;
        {#            padding-top: 10px;#}
        }


    </style>
{% endblock %}
{% block content %}
    <div class="reg_div reg_body_div">
        <div class="text-center name_div">来自{{ source_reg_name }}的邀请</div>
        <form method="post">
            {% csrf_token %}
            {{ form.non_field_errors }}
            <div class="row_div text-left" onclick="click_row(this)">
                <div class="icon_div icon_name"></div>
                <div class="input_div">{{ form.name }}{{ form.name.errors }}</div>
            </div>
            <div class="row_div text-left" onclick="click_row(this)">
                <div class="icon_div icon_mobile">
                </div>
                <div class="input_div">{{ form.mobile }}{{ form.mobile.errors }}</div>
            </div>
            <div class="row_div text-left">
                <div class="icon_div icon_gender"></div>
                <div class="input_div">{{ form.gender }}
                </div>
            </div>
            <div class="row_div text-left" onclick="click_row(this)">
                <div class="icon_div icon_city"></div>
                <div class="input_div">{{ form.province }} {{ form.city }}</div>
            </div>
            <div class="row_div text-left" onclick="click_row(this)">
                <div class="icon_div icon_wx"></div>
                <div class="input_div">{{ form.wx }}</div>
            </div>
            <input type="submit" class="btn btn-warning" value="确定"/>
        </form>
    </div>

    {#    <div style="margin: 20px;">#}
    {#        {{ source_reg_name }}#}
    {#        <table class="table">#}
    {#            <form method="post">#}
    {#                {% csrf_token %}#}
    {##}
    {#    {{ form.as_ul }}#}
    {##}
    {#                <input type="submit" value="提交"/>#}
    {#            </form>#}
    {#        </table>#}
    {#    </div>#}
{% endblock %}


{% block scripts %}
    <script>
        $(document).ready(function () {
            //时间
            {#            $.datetimepicker.setLocale('ch');#}
            {#            var $birthday = $("#id_birthday");#}
            {#            $birthday.datetimepicker({#}
            {#                format: 'Y-m-d',#}
            {#                timepicker: false,#}
            {#                scrollMonth: false,#}
            {#                scrollTime: false,#}
            {#                scrollInput: false#}
            {#            });#}

        });
        function click_row(_this) {
            var $row = $(_this);
            $row.find('input').focus();
        }

    </script>
{% endblock %}