@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = "_LooperLayout";
}

@section Style {
    <link rel="stylesheet" href="~/assets/vendor/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css">
}

@section Script {
    <script src="~/assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="~/assets/vendor/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="~/assets/vendor/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js"></script>
    <script src="~/assets/javascript/pages/dataTables.bootstrap.js"></script>
    <script src="~/assets/javascript/custom/userlist.js" asp-append-version="true"></script>
}

<!-- .page-inner -->
<div class="page-inner">
    <!-- .page-title-bar -->
    <header class="page-title-bar">
        <!-- .breadcrumb -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">
                    <a href="#"><i class="breadcrumb-icon fa fa-angle-left mr-2"></i>使用者清單</a>
                </li>
            </ol>
        </nav><!-- /.breadcrumb -->
        <!-- title -->
        <h1 class="page-title"> 系統使用者清單 </h1>
        <p class="text-muted">  </p><!-- /title -->
    </header><!-- /.page-title-bar -->
    <!-- .page-section -->
    <div class="page-section">
        <button type="button" id="userNewModal" class="btn btn-primary btn-floated position-absolute" title="Add new client"><i class="fa fa-plus"></i></button>
        <!-- .card -->
        <div class="card card-fluid">
            <!-- .card-body -->
            <div class="card-body">
                <!-- .table -->
                <table id="dt-responsive" class="table dt-responsive nowrap w-100">
                    <thead>
                        <tr>
                            <th> 姓名 </th>
                            <th> 帳號 </th>
                            <th> 類型 </th>
                            <th> 權限 </th>
                            <th> 上次登入 </th>
                            <th> 功能 </th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th> 姓名 </th>
                            <th> 帳號 </th>
                            <th> 類型 </th>
                            <th> 權限 </th>
                            <th> 上次登入 </th>
                            <th> 功能 </th>
                        </tr>
                    </tfoot>
                </table><!-- /.table -->
            </div><!-- /.card-body -->
        </div><!-- /.card -->
    </div><!-- /.page-section -->
</div><!-- /.page-inner -->

<!-- Keep in mind that modals should be placed outsite of page sidebar -->
<!-- .modal -->
<form id="clientNewForm" name="clientNewForm">
    <div class="modal fade" id="clientNewModal" tabindex="-1" role="dialog" aria-labelledby="clientNewModalLabel" aria-hidden="true">
        <!-- .modal-dialog -->
        <div class="modal-dialog" role="document">
            <!-- .modal-content -->
            <div class="modal-content">
                <!-- .modal-header -->
                <div class="modal-header">
                    <h6 id="clientNewModalLabel" class="modal-title inline-editable">
                        <span class="sr-only">Client name</span> <input id="modelTitle" type="text" class="form-control form-control-lg" placeholder="使用者資料維護" required="">
                    </h6>
                </div><!-- /.modal-header -->
                <!-- .modal-body -->
                <div class="modal-body">
                    <input type="hidden" id="method"/>
                    <input type="hidden" id="user_uid"/>
                    <!-- .form-row -->
                    <div class="form-row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="cnCountry">帳號類型</label> <select id="user_type" class="custom-select d-block w-100">
                                    <option value="N"> E白板帳號 </option>
                                    <option value="Y"> 自建帳號 </option>
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12" id="user_elab_div">
                            <div class="form-group">
                                <label for="cnCountry">帳號名稱</label> <select id="user_elabName" class="custom-select d-block w-100">
                                    <option value=""> Choose... </option>
                                    
                                </select>
                            </div>
                        </div>

                        <div class="col-md-12" id="user_name_div">
                            <div class="form-group">
                                <label for="user_name">使用者名稱</label> <input type="text" id="user_name" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12" id="user_id_div">
                            <div class="form-group">
                                <label for="user_id">使用者帳號</label> <input type="text" id="user_id" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6" id="user_pwd_div">
                            <div class="form-group">
                                <label for="user_pwd">使用者密碼</label> <input type="password" id="user_pwd" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-6" id="user_chkpwd_div">
                            <div class="form-group">
                                <label for="user_chkpwd">密碼再確認</label> <input type="password" id="user_chkpwd" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12" id="user_email_div">
                            <div class="form-group">
                                <label for="user_email">使用者Email</label> <input type="email" id="user_email" class="form-control">
                            </div>
                        </div>
                        <div class="col-md-12" id="user_perm_div">
                            <div class="form-group">
                                <label for="user_perm">帳號權限</label> <select id="user_perm" class="custom-select d-block w-100">
                                    <option value=""> Choose... </option>
                                    <option value="user"> 一般用戶 </option>
                                    <option value="system"> 管理用戶 </option>
                                </select>
                            </div>
                        </div>

                    </div><!-- /.form-row -->
                </div><!-- /.modal-body -->
                <!-- .modal-footer -->
                <div class="modal-footer">
                    <button type="button" id="saveBtn" class="btn btn-primary">儲存</button> <button id="closeBtn" type="button" class="btn btn-light" data-dismiss="modal">關閉</button>
                </div><!-- /.modal-footer -->
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</form><!-- /.modal -->