<table id="itemtable">
    <tr>
        <th>
            <div class="material-input">
                <input class="input-item" type="text" required>
                <label>Name</label>
                <i class="icon icon-search disabled icon-filter"></i>

            </div>
            <div class="sort-arrows">
                <div class="arrow-up active"></div>
                <div class="arrow-down"></div>
            </div>
        </th>
        <th>
            <div class="material-input">
                <input class="input-item" type="text" required>
                <label>Username</label>
                <i class="icon icon-search disabled icon-filter"></i>

            </div>
            <div class="sort-arrows">
                <div class="arrow-up"></div>
                <div class="arrow-down"></div>
            </div>
        </th>
        <th>
            <div class="material-input">
                <input class="input-item" type="text" required>
                <label>Email</label>
            </div>
            <div class="sort-arrows">
                <div class="arrow-up"></div>
                <div class="arrow-down"></div>
            </div>
        </th>

        <th>
            <div class="material-input" data-toggle="tooltip" data-placement="right" title="Session timeout tooltip">
                <input class="input-item" type="text" required>
                <label>Session timeout</label>
                <i class="icon icon-search disabled icon-filter"></i>

            </div>
            <div class="sort-arrows">
                <div class="arrow-up"></div>
                <div class="arrow-down"></div>
            </div>
        </th>

        <th>
            <div class="material-input">
                <input class="input-item" type="text" required>
                <label>Phone</label>
                <i class="icon icon-search disabled icon-filter"></i>

            </div>
            <div class="sort-arrows">
                <div class="arrow-up"></div>
                <div class="arrow-down"></div>
            </div>
        </th>
        <th>
            <div class="inputwrapper usergroupselector">
                <div class="imageinput dropdown ">
                    <input type="text" class="dropdown-toggle" placeholder="User Groups" data-toggle="dropdown" role="button">
                    <i class="icon icon-filter"></i>
                    <div class="dropdown-menu" aria-labelledby="reportDropdown">
                        <table>
                            <tr>
                                <td>
                                    <input type="checkbox"> Administrator
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"> Oneview User</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"> Technician
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"> Manager</td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"> Operator
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <input type="checkbox"> Guest
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <button class="btn">OK</button>
                                </td>
                            </tr>

                        </table>
                    </div>
                </div>
            </div>
        </th>
        <th class="text-right">
            <div class="dropdown createuser">
                <button class="btn" data-toggle="modal" data-target="#newuserModal">+ Add user</button>

        </th>
    </tr>
    <tr class="datarow">
        <td>John Doe</td>
        <td>JohntheDoeman</td>
        <td>jd@scada-international.com</td>
        <td>20 minutes
        </td>
        <td>+45 22 66 55 99</td>
        <td>Administrator, OneView User</td>
        <td class="text-right">
            <i class="icon icon-user" data-toggle="tooltip" data-original-title="Edit user"></i>
            <i class="icon icon-minus" data-toggle="tooltip" data-original-title="Delete user"></i>

        </td>
    </tr>
    <tr class="datarow">
        <td>John Doe</td>
        <td>JohntheDoeman</td>
        <td>jd@scada-international.com</td>
        <td>20 minutes
        </td>
        <td>+45 22 66 55 99</td>
        <td>Administrator, OneView User</td>
        <td class="text-right">
            <i class="icon icon-user" data-toggle="tooltip" data-original-title="Edit user"></i>
            <i class="icon icon-minus" data-toggle="tooltip" data-original-title="Delete user"></i>

        </td>
    </tr>
    <tr class="datarow">
        <td>John Doe</td>
        <td>JohntheDoeman</td>
        <td>jd@scada-international.com</td>
        <td>20 minutes
        </td>
        <td>+45 22 66 55 99</td>
        <td>Administrator, OneView User</td>
        <td class="text-right">
            <i class="icon icon-user" data-toggle="tooltip" data-original-title="Edit user"></i>
            <i class="icon icon-minus" data-toggle="tooltip" data-original-title="Delete user"></i>

        </td>
    </tr>
</table>
<div class="modal  fade" id="newuserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">
                    <i class="icon icon-user"></i> Add new user</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="container-fluid">

                    <div class="row">
                        <div class="col-7">
                            <table class="inputs">
                                <tbody>
                                    <tr>
                                        <td>Name:</td>
                                        <td>
                                            <div class="material-input">
                                                <input class="" required="">

                                                <span class="icon-stack validationIconStackWrapper errortrigger"  data-toggle="tooltip" data-custom-class="tooltip-alert" data-original-title="Error  message">
                                                    <i class="icon-cirk_bg"></i>
                                                    <i class="icon-details color-alert"></i>
                                                </span>                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Username:</td>
                                        <td>
                                            <div class="material-input">
                                                <input class="" required="">

                                                <span class="icon-stack validationIconStackWrapper errortrigger"  data-toggle="tooltip" data-custom-class="tooltip-alert" data-original-title="Enter Username">
                                                    <i class="icon-cirk_bg"></i>
                                                    <i class="icon-details color-alert"></i>
                                                </span>
                                    </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Password:</td>
                                        <td>
                                            <div class="material-input">
                                                <input class="" required="">
                                                <span class="icon-stack validationIconStackWrapper errortrigger"  data-toggle="tooltip" data-custom-class="tooltip-alert" data-original-title="Error message">
                                                    <i class="icon-cirk_bg"></i>
                                                    <i class="icon-details color-alert"></i>
                                                </span>                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Unit access Group:</td>
                                        <td>
                                            <div class="inputwrapper">
                                                <div class="imageinput dropdown">
                                                    <input type="text" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                                    <i class="icon icon-down"></i>
                                                    <div class="dropdown-menu" aria-labelledby="reportDropdown" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 33px, 0px); top: 0px; left: 0px; will-change: transform;">
                                                        <table>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Group 1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 5</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 6</td>
                                                                </tr>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Email: </td>
                                        <td>
                                            <div class="material-input">
                                                <input class="" required="">
                                                <span class="icon-stack validationIconStackWrapper errortrigger"  data-toggle="tooltip" data-custom-class="tooltip-alert" data-original-title="Error message">
                                                    <i class="icon-cirk_bg"></i>
                                                    <i class="icon-details color-alert"></i>
                                                </span>                                              </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Phone:</td>
                                        <td>
                                            <div class="material-input">
                                                <input class="" required="">
                                                <span class="icon-stack validationIconStackWrapper errortrigger"  data-toggle="tooltip" data-custom-class="tooltip-alert" data-original-title="Error message">
                                                    <i class="icon-cirk_bg"></i>
                                                    <i class="icon-details color-alert"></i>
                                                </span>                                              </div>
                                        </td>
                                    </tr>

                                    <tr>
                                        <td>Session idle timeout:</td>
                                        <td>
                                            <div class="inputwrapper">
                                                <div class="imageinput dropdown">
                                                    <input type="text" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                                                    <i class="icon icon-down"></i>
                                                    <div class="dropdown-menu" aria-labelledby="reportDropdown" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 33px, 0px); top: 0px; left: 0px; will-change: transform;">
                                                        <table>
                                                            <tbody>
                                                                <tr>
                                                                    <td>Group 1</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 2</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 3</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 4</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 5</td>
                                                                </tr>
                                                                <tr>
                                                                    <td>Group 6</td>
                                                                </tr>

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>


                                </tbody>
                            </table>
                        </div>
                        <div class="col-2"></div>
                        <div class="col-3">
                            <div class="checkboxlist">
                                <p>User Groups</p>
                                <label>
                                    <input type="checkbox">Administrator</label>
                                <label>
                                    <input type="checkbox">Oneview User</label>
                                <label>
                                    <input type="checkbox">Technician</label>
                                <label>
                                    <input type="checkbox">Manager</label>
                                <label>
                                    <input type="checkbox">Operator</label>
                                <label>
                                    <input type="checkbox">Guest</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="col-6">
                    <button type="button" class="btn" data-dismiss="modal">Cancel</button>
                </div>
                <div class="col-6 text-right">
                    <button type="button" class="btn" data-dismiss="modal">Save User</button>
                </div>
            </div>
        </div>
    </div>
</div>