<!DOCTYPE html>
<html>
<meta charset="utf-8">

<head th:include="system/user/include :: header"></head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <div class="ibox">
                <div class="ibox-title" style="padding-bottom: 0;">
                    <h3 class="text-center">个人资料中心</h3>
                    <div class="gg-nav">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#basic_info" data-toggle="tab">基本资料</a></li>
<!--                            <li><a href="#photo_info" data-toggle="tab">头像修改</a></li>-->
<!--                            <li><a href="#pwd_info" data-toggle="tab">修改密码</a></li>-->
                        </ul>
                    </div>
                </div>
                <div class="tab-content">
                    <!--basic info-->
                    <div class="ibox-content tab-pane fade in active" id="basic_info">
                        <form class="gg-form" role="form" id="basicInfoForm">
                            <input name="userId" type="hidden" th:value="${user.userId}"/>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>姓名:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="userName" name="name"
                                           th:value="${user.name}" placeholder="请输入姓名"/>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>性别:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <div class="radio i-checks">
                                        <label class="radio-inline" th:each="sex:${sexList}"> <input
                                                th:field="*{user.sex}" type="radio" name="sex" th:value="${sex.id}"
                                                th:text="${sex.name}"/>
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>岗位:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="post" name="post" th:value="${user.post}"
                                           placeholder="请输入岗位"/>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>职责:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="duty" name="duty" th:value="${user.duty}"
                                           placeholder="请输入职责"/>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>手机:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="phone" name="mobile"
                                           th:value="${user.mobile}" placeholder="请输入手机号"/>
                                </div>
                            </div>
                            <div class="gg-formGroup">
                                <div class="gg-formTitle">
                                    <em class="gg-star">*</em>
                                    <span>邮箱:</span>
                                </div>
                                <div class="gg-formDetail">
                                    <input type="text" class="form-control" id="email" name="email"
                                           th:value="${user.email}" placeholder="请输入邮箱"/>
                                </div>
                            </div>
<!--                            <div class="gg-formGroup">-->
<!--                                <div class="gg-formTitle">-->
<!--                                    <em class="gg-star">*</em>-->
<!--                                    <span>部门地址:</span>-->
<!--                                </div>-->
<!--                                <div class="gg-formDetail gg-font0" data-toggle="distpicker"-->
<!--                                     th:attr="data-province=${user.province},data-city=${user.city},data-district=${user.district}">-->
<!--                                    <div class="gg-area">-->
<!--                                        <select class="form-control" id="province" name="province" disabled="disabled">-->
<!--                                        </select>-->
<!--                                    </div>-->
<!--                                    <div class="gg-area">-->
<!--                                        <select class="form-control" id="city" name="city">-->
<!--                                        </select>-->
<!--                                    </div>-->
<!--                                    <div class="gg-area">-->
<!--                                        <select class="form-control" id="district" name="district">-->
<!--                                        </select>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                            <div class="gg-formGroup">-->
<!--                                <div class="gg-formTitle">-->
<!--                                    <em class="gg-star">*</em>-->
<!--                                    <span>详细地址:</span>-->
<!--                                </div>-->
<!--                                <div class="gg-formDetail">-->
<!--                                    <input type="text" class="form-control" id="address" name="liveAddress"-->
<!--                                           th:value="${user.liveAddress}" placeholder="请输入居住地址"/>-->
<!--                                </div>-->
<!--                            </div>-->
                        </form>
<!--                        <div class="gg-btnGroup">-->
<!--                            <button type="button" class="btn btn-sm btn-primary" id="base_save">保存</button>-->
<!--                        </div>-->
                    </div>
                    <!--photo_info-->
                    <div class="ibox-content tab-pane fade gg" id="photo_info">
                        <div class="ggcontainer" id="crop-avatar">
                            <form class="avatar-form" action="/sys/user/uploadImg" enctype="multipart/form-data"
                                  method="post">
                                <div class="avatar-body">
                                    <div class="avatar-upload">
                                        <input class="avatar-src" name="avatar_src" type="hidden">
                                        <input class="avatar-data" name="avatar_data" type="hidden">
                                        <label for="avatarInput">选取文件</label>
                                        <input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
                                    </div>
                                    <!-- Crop and preview -->
                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="avatar-wrapper"></div>
                                        </div>
                                        <div class="col-md-3">
                                            <div class="avatar-preview preview-lg"></div>
                                            <div class="avatar-preview preview-md"></div>
                                            <div class="avatar-preview preview-sm"></div>
                                        </div>
                                    </div>

                                    <div class="row avatar-btns">
                                        <div class="col-md-9">
                                            <div class="btn-group">
                                                <button class="btn btn-primary" data-method="rotate" data-option="-90"
                                                        type="button" title="Rotate -90 degrees">左旋转
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="-15"
                                                        type="button">-15°
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="-30"
                                                        type="button">-30°
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="-45"
                                                        type="button">-45°
                                                </button>
                                            </div>
                                            <div class="btn-group">
                                                <button class="btn btn-primary" data-method="rotate" data-option="90"
                                                        type="button" title="Rotate 90 degrees">右旋转
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="15"
                                                        type="button">15°
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="30"
                                                        type="button">30°
                                                </button>
                                                <button class="btn btn-primary" data-method="rotate" data-option="45"
                                                        type="button">45°
                                                </button>
                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <button class="btn btn-primary btn-block avatar-save" type="submit">完成裁剪
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                            <!-- Loading state -->
                            <div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<div th:include="system/user/include :: footer"></div>
<!--<script type="text/javascript" src="/js/appjs/sys/user/personal.js"></script>-->
</body>
</html>
