{{define "style"}}
{{end}}

{{define "content"}}
<div id="user-inquire">
    <div class="alert alert-primary" role="alert">
        <button type="button" class="btn btn-primary" id="add-user"><i class="bi bi-plus-square"></i> 创建用户</button>
    </div>
</div>
<div id="user-table">
    <table class="table table-bordered">
        <thead>
        <tr class="table-primary">
            <th scope="col">ID</th>
            <th scope="col">用户名</th>
            <th scope="col">用户权限</th>
            <th scope="col">备注</th>
            <th scope="col">创建时间</th>
            <th scope="col">更新时间</th>
            <th scope="col">操作</th>
        </tr>
        </thead>
        <tbody id="tbody-user">
        {{ range .Data.Data }}
        <tr>
            <td>{{.ID}}</td>
            <td>{{.Username}}</td>
            {{ if .IsSuper }}
            <td>
                <span class="badge badge-success">超级管理</span>
            </td>
            {{ else }}
            <td>
                <span class="badge badge-secondary">普通用户</span>
            </td>
            {{end}}
            <td>{{.Remark}}</td>
            <td>{{.CreatedAt.Format "2006-01-02 15:04:05"}}</td>
            <td>{{.UpdatedAt.Format "2006-01-02 15:04:05"}}</td>
            <td>操作</td>
        </tr>
        {{ end }}
        </tbody>
    </table>
</div>
<div id="user-pagination" class="form-inline">
    <!--    <nav aria-label="Page navigation">-->
    <!--        <ul class="pagination">-->
    <!--            <li class="page-item">-->
    <!--                <div class="btn-group">-->
    <!--                    <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">-->
    <!--                        10-->
    <!--                    </button>-->
    <!--                    <div class="dropdown-menu">-->
    <!--                        <a class="dropdown-item" href="#">10</a>-->
    <!--                        <a class="dropdown-item" href="#">20</a>-->
    <!--                        <a class="dropdown-item" href="#">30</a>-->
    <!--                    </div>-->
    <!--                </div>-->
    <!--            </li>-->
    <!--            <li class="page-item">-->
    <!--                <a class="page-link" href="#" aria-label="Previous">-->
    <!--                    <span aria-hidden="true">&laquo;</span>-->
    <!--                </a>-->
    <!--            </li>-->
    <!--            <li class="page-item"><a class="page-link" href="#">1</a></li>-->
    <!--            <li class="page-item"><a class="page-link" href="#">2</a></li>-->
    <!--            <li class="page-item"><a class="page-link" href="#">3</a></li>-->
    <!--            <li class="page-item">-->
    <!--                <a class="page-link" href="#" aria-label="Next">-->
    <!--                    <span aria-hidden="true">&raquo;</span>-->
    <!--                </a>-->
    <!--            </li>-->
    <!--        </ul>-->
    <!--    </nav>-->
    <!-- 分页导航 -->
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-sm">
            <li class="page-item mr-2">
                <select class="form-control" style="max-height: 31px; line-height: 31px; padding: 0 0 0 6px;">
                    <option value="10" selected>10条/页</option>
                    <option value="20">20条/页</option>
                    <option value="50">50条/页</option>
                </select>
            </li>
            <!-- 上一页 -->
            <li class="page-item{{if eq .Data.CurrentPage 1}} disabled{{end}}">
                <a class="page-link" href="javascript:void(0);" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
            </li>
            <!-- 当前页左边是否显示 ...  -->
            {{if .Data.LeftHasMore}}
            <li class="page-item"><a class="page-link" href="javascript:void(0);" data-page="1">1</a></li>
            <li class="page-item disabled"><span class="page-link">...</span></li>
            {{end}}
            <!-- 当前页左边显示按钮 -->
            {{ range .Data.LeftPages }}
            <li class="page-item"><a class="page-link" href="javascript:void(0);" data-page="{{.}}">{{.}}</a></li>
            {{end}}

            <!-- 当前页 -->
            <li class="page-item active"><a class="page-link" href="javascript:void(0);" data-page="{{.Data.CurrentPage}}">{{.Data.CurrentPage}}</a></li>

            <!-- 当前页右边显示按钮 -->
            {{ range .Data.RightPages }}
            <li class="page-item"><a class="page-link" href="javascript:void(0);" data-page="{{.}}">{{.}}</a></li>
            {{end}}
            <!-- 当前页右边是否显示 ... -->
            {{if .Data.RightHasMore}}
            <li class="page-item disabled"><span class="page-link">...</span></li>
            <li class="page-item"><a class="page-link" href="javascript:void(0);" data-page="{{.Data.NumPages}}">{{.Data.NumPages}}</a></li>
            {{end}}
            <!-- 下一页 -->
            <li class="page-item {{if eq .Data.CurrentPage .Data.NumPages}} disabled{{end}}">
                <a class="page-link" href="javascript:void(0);" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <!-- 跳到第x页 -->
            <li class="page-item disabled ml-2"><span class="page-link" style="border: none">到第</span></li>
            <li class="page-item"><input type="text" class="form-control" style="max-width: 40px;max-height: 31px"></li>
            <li class="page-item ml-1 disabled"><span class="page-link" style="border: none">页</span></li>
            <li class="page-item ml-2"><a class="page-link" href="javascript:void(0);">确定</a></li>
            <!-- 数据总数 -->
            <li class="page-item disabled ml-2"><span class="page-link" style="border: none">共 {{.Data.Total}} 条</span></li>
        </ul>
    </nav>
</div>
{{end}}

{{define "script"}}
<script src="/static/js/lib/modal.js"></script>
<script src="/static/js/user.js"></script>
{{end}}