{% extends 'chatbot/nav.html' %}
{% block content %}
{% load staticfiles %}

    <script type="text/javascript" src="{% static 'js/login.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/gt.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/captcha.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/loading.css' %}">
<div class="container">

    <div class="row">
        <div class="col-md-3">
            &nbsp;
        </div>
        <div class="col-md-6">
            <ul class="nav nav-tabs nav-fill" id="myTab" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" role="tab" data-toggle="tab"
                       href="#signup" id="chat-tab" aria-controls="signup" aria-selected="true">注册</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" role="tab" data-toggle="tab"
                       href="#signin" id="separation-tab" aria-controls="signin">登陆</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="row">
        <div class="col-md-3">&nbsp;</div>
        <div class="tab-content col-md-6" id="navContent">
            <!-- 注册 -->
            <div class="tab-pane fade show active" id="signup" role="tabpanel" aria-labelledby="signup-tab">
                <form id="signup-form">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="signup-name">用户名</label>
                        <input type="text" class="form-control" name="username" id="signup-name" placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="signup-psw1">密码</label>
                        <input type="password" class="form-control" name="password" id="signup-psw1"
                               placeholder="请输入密码">
                    </div>
                    <div class="form-group">
                        <label for="signup-psw2">重复密码</label>
                        <input type="password" class="form-control" name="signup-psw2" id="signup-psw2"
                               placeholder="请再次输入密码">
                    </div>
                    <div id="signup-captcha" style="height: 42px; width: 298px;">
                        <div class="loading"></div>
                    </div>
                    <p>&nbsp;</p>

                    <div id="signup-success" class="alert alert-success" role="alert" style="display: none;">
                      注册成功
                    </div>
                    <div id="signup-fail" class="alert alert-danger" role="alert" style="display: none;">
                      A simple success alert—check it out!
                    </div>
                    <button type="button" class="btn btn-primary" onclick="signup()">注册</button>
                </form>
            </div>
            <!-- 登陆 -->
            <div class="tab-pane fade" id="signin" role="tabpanel" aria-labelledby="signin-tab">
                <form id="signin-form">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="signin-name">用户名</label>
                        <input type="text" class="form-control" id="signin-name" name='username' placeholder="请输入用户名">
                    </div>
                    <div class="form-group">
                        <label for="signin-psw1">密码</label>
                        <input type="password" class="form-control" name="password" id="signin-psw1"
                               placeholder="请输入密码">
                    </div>
                    <div id="signin-captcha"></div>
                    <p>&nbsp;</p>
                    <div id="signin-success" class="alert alert-success" role="alert" style="display: none;">
                      登陆成功
                    </div>
                    <div id="signin-fail" class="alert alert-danger" role="alert" style="display: none;">
                      A simple success alert—check it out!
                    </div>
                    <button type="button" class="btn btn-primary" onclick="signin()">登陆</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div id="r"></div>
{% endblock %}