<section class="users container">
    <p>
    <div class="row">
        <div class="col-lg-12">

        </div>
    </div>
    </p>
    <div class="panel panel-default">
        <div class="panel-heading clearfix">
            <h2 style="margin: 0" class="pull-left">User</h2>
            <div class="btn-group pull-right">
                <a href="javascript:void(0)" class="btn btn-primary" data-bind="click: save">Save</a>
                <a href="javascript:void(0)" class="btn btn-success" data-bind="click: saveClose">Save and Close</a>
                <a href="javascript:void(0)" class="btn btn-warning" data-bind="click: cancel">Cancel</a>
                <a href="javascript:void(0)" class="btn btn-danger" data-bind="click: deleteUser">Delete</a>
                <a href="javascript:window.history.back()" class="btn btn-success">Back</a>
            </div>
        </div>
        <div class="panel-body" data-bind="with: user">
            <div class="row">
                <div class="col-lg-12">
                    <fieldset>
                        <legend>Detail</legend>
                        <form class="form-horizontal" role="form" data-bind="submit: $parent.save">
                            <div class="form-group">
                                <label for="inputName3" class="col-sm-2 control-label">Name</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" id="inputName3" placeholder="Name" data-bind="value: name">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
                                <div class="col-sm-10">
                                    <input type="text" class="form-control" name="email" id="inputEmail3" placeholder="Email" data-bind="value: email"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
                                <div class="col-sm-10">
                                    <input type="password" class="form-control" name="password" id="inputPassword3" placeholder="Password" data-bind="value: password"/>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="emailConfirmed" class="col-sm-2 control-label">Email Confirmed</label>
                                <div class="col-sm-10">
                                    <input type="checkbox" name="emailConfirmed" id="emailConfirmed" data-bind="checked: emailConfirmed"/>
                                </div>
                            </div>
                        </form>
                    </fieldset>
                    <fieldset>
                        <legend>Tokens <span class="fa fa-plus-circle pull-right text-success" data-bind="click: $parent.addToken"></span></legend>
                        <!--ko if: $parent.editingToken-->
                        <div data-bind="with: $parent.editingToken">
                            <form class="form-horizontal" role="form" data-bind="submit: $parents[1].saveToken">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Token</label>
                                    <div class="col-sm-10">
                                        <input type="text" class="form-control" placeholder="Token" data-bind="value: token" disabled>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Allowed Sites</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" name="allowed" cols="30" rows="3" data-bind="value: allowed"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Restricted Sites</label>
                                    <div class="col-sm-10">
                                        <textarea class="form-control" name="restricted" cols="30" rows="3" data-bind="value: restricted"></textarea>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-2 col-sm-10">
                                        <a href="javascript:void(0)" class="btn btn-success" data-bind="click: $parents[1].saveToken">Save</a>
                                        <a href="javascript:void(0)" class="btn btn-warning" data-bind="click: $parents[1].cancelToken">Cancel</a>
                                        <a href="javascript:void(0)" class="btn btn-danger" data-bind="click: $parents[1].removeToken">Remove</a>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!--/ko-->
                        <!--ko if: tokens().length-->
                        <div class="list-group" data-bind="foreach: tokens" style="max-height: 560px;overflow: auto;">
                            <a href="#" class="list-group-item" data-bind="click: $parents[1].editToken, css: {'list-group-item-warning': $index() % 2}">
                                <h5 class="list-group-item-heading" data-bind="text: token"></h5>
                                <!--ko if:allowed-->
                                <p class="list-group-item-text text-success"><span class="fa fa-check"></span> <strong>Allowed</strong><br/><pre class="well-small" data-bind="html: allowed"></pre></p>
                                <!--/ko-->
                                <!--ko if:restricted-->
                                <p class="list-group-item-text text-danger"><span class="fa fa-minus"></span> <strong>Restricted</strong><br/><pre class="well-small" data-bind="html: restricted"></pre></p>
                                <!--/ko-->
                            </a>
                        </div>
                        <!--/ko-->
                    </fieldset>

                </div>
            </div>
        </div>
        <div class="panel-footer text-right">
            Panel content
        </div>
    </div>
</section>
