<style>

    .modal-header{
        background: #263238;
    }

    .modal-title{
        color: white;
        margin-bottom: 15px;
    }

    /* .panel-heading{
        padding: 0px 20px;
        
    } */

    
</style>
<!-- Basic datatable -->

<div class="content-wrapper">
  
    <div class="content">
        
        <div class="page-header-content">
            <div class="page-title">
                <h4><i class="icon-arrow-left52 position-left"></i> <span class="text-semibold">User Pages</span> - Profile</h4>

                <ul class="breadcrumb position-right">
                    <li><a href="index.html">Home</a></li>
                    <li><a href="user_pages_profile.html">User pages</a></li>
                    <li class="active">Profile</li>
                </ul>
           

            <!-- <div class="heading-elements">
                <div class="heading-btn-group">
                    <a href="#" class="btn btn-link btn-float has-text"><i class="icon-bars-alt text-primary"></i><span>Statistics</span></a>
                    <a href="#" class="btn btn-link btn-float has-text"><i class="icon-calculator text-primary"></i> <span>Invoices</span></a>
                    <a href="#" class="btn btn-link btn-float has-text"><i class="icon-calendar5 text-primary"></i> <span>Schedule</span></a>
                </div>
            </div> -->
        </div>

        <!-- <div class="panel panel-default">
            <div class="panel-heading">
                <h6 class="content-group text-semibold">
                    User list
                    <small class="display-block">Menampilkan kelola data user</small>
                    <span class="pull-right" style="margin-top: -36px;">
                        <span  id="btn-add-add" class="btn btn-success btn-icon btn-lg" data-popup="lightbox"><i class="icon-plus2"></i></span>
                    </span>
                </h6>
            </div>
            <div class="panel-flat">
                <table class="table datatable-basic">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nama</th>
                            <th>Username</th>
                            <th>Role</th>
                            <th>Status</th>
                            <th class="text-center">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        
                    </tbody>
                </table>
            </div>
        </div> -->

        <div class="panel panel-white">
            <div class="panel-heading">
                <h6 class="panel-title text-semibold">User List</h6>
                <div class="heading-elements">
                    <ul class="icons-list">
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-menu7"></i> <span class="caret"></span></a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li id="addPopUp"><a id="addPopUp">Tambah Mahasiswa</a></li>
                                <li id="upPopUp"><a >Upload Mahasiswa</a></li>
                               
                                <!-- <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">One more separated line</a></li> -->
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
            
            <div class="panel-flat">
                <div class="table-responsive">
                    <table class="table data-list table-stripped table-lg datatable-dom-position table-hover" id="mahasiswalist">
                        <thead>
                            <tr>
                                <th scope="col" class="text-center text-muted" style="width: 30px;">#No</th> 
                                
                                <th>Nama</th>
                                <th>Username</th>
                                <th>Role</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <!-- modal add -->
        <div id="modal-add" class="modal fade" data-keyboard="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h6 class="modal-title">Tambah User</h6>
                    </div>

                    <div class="modal-body">
                        
                        <div class="row">
                            <div class="panel panel-flat">
                                <div class="panel-body">
                                    <form id="form" action="#">
                                        <div class="col-lg-12">
                                            
                                            <div class="form-group">
                                                <label>Role:</label>
                                                <select id="userrole" class="select">
                                                    <option value="10" >Akademik</option>
                                                    <option value="20" selected>Mahasiswa</option>
                                                    <option value="30" >Dosen</option>
                                                    <!-- <option value="40">Perusahaan</option> -->
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label>Name:</label>
                                                <input type="text" class="form-control" placeholder="Enter name" id="name">
                                            </div>

                                            <div id="username" class="form-group">
                                                <label>Nomor Induk Mahasiswa:</label>
                                                <input type="number" class="form-control" placeholder="Enter NIM..." >
                                            </div>

                                            <div class="form-group">
                                                <label class="display-block">Gender:</label>

                                                <label class="radio-inline">
                                                    <input type="radio" value ="Laki-laki" class="styled" name="gender" checked="checked">
                                                    Male
                                                </label>

                                                <label class="radio-inline">
                                                    <input type="radio" value ="Perempuan" class="styled" name="gender">
                                                    Female
                                                </label>
                                            </div>

                                            <!-- <div id="nid"class="form-group">
                                                <label>Nomor Induk Dosen:</label>
                                                <input type="text" class="form-control" placeholder="Enter NID..." id="mhsnim">
                                            </div> -->

                                            
                                        </div>

                                        <!-- <div class="col-lg-6"> -->
                                            <!-- <div id="fakultas" class="form-group">
                                                <label class="text-semibold">Faculty:</label>
                                                <input id="faculty" value = "Fakultas Teknik Mesin dan Dirgantara"type="text" class="form-control" placeholder="Major" disabled>
                                            </div> -->

                                            <!-- <div id="major" class="form-group">
                                                <label>Major:</label>
                                                <select id="jurusan" class="select">
                                                    <option value="Perancangan Mesin">Perancangan Mesin</option>
                                                    <option value="Konversi Energi">Konversi Energi</option>
                                                    <option value="Ilmu dan Teknik Material">Ilmu dan Teknik Material</option>
                                                    <option value="Teknik Produksi Mesin">Teknik Produksi Mesin</option>
                                                    <option value="Desain, Operasi dan Perawatan Pesawat Terbang">Desain, Operasi dan Perawatan Pesawat Terbang</option>
                                                    <option value="Fisika Terbang">Fisika Terbang</option>
                                                    <option value="Struktur Ringan">Struktur Ringan</option>
                                                </select>
                                            </div> -->

                                            

                                        <!-- </div> -->
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                        <button id="submit-user" type="button" class="btn btn-primary">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>