<div class="panel panel-default">
    <div class="panel-heading"><span> </span>
        <div class="btn-toolbar pull-right">
            <button (click)="saveClicked()" nz-button>Save</button>
            <button (click)="resetClicked()" nz-button>Reset</button>
        </div>
    </div>
    <div class="panel-body">
        <form autocomplete="off" novalidate>
            <table class="table">
                <tr>
                    <th>Setting</th>
                    <th>Value</th>
                </tr>
                <tr *ngFor="let item of items">
                    <td>{{item.key}}</td>
                    <td *ngIf="item.type == 'boolean' ">
                        <Button
                            (click)="item.boolean_value = ! item.boolean_value"
                            [class.btn-danger]="!item.boolean_value"
                            [class.btn-success]="item.boolean_value"
                            class="btn"
                        >
                            {{item.boolean_value ? "True" : "False"}}
                        </Button>
                    </td>
                    <td *ngIf="item.type == 'integer' ">
                        <input
                            [(ngModel)]="item.int_value"
                            [name]="item.key"
                            class="form-control input-sm"
                            step="1"
                            type="number"
                        />
                    </td>
                    <td *ngIf="item.key.endsWith('pass') && item.type == 'string' ">
                        <input
                            [(ngModel)]="item.char_value"
                            [name]="item.key"
                            class="form-control input-sm"
                            type="password"
                        />
                    </td>
                    <td *ngIf="!item.key.endsWith('pass') && item.type == 'string' ">
                        <input
                            [(ngModel)]="item.char_value"
                            [name]="item.key"
                            class="form-control input-sm"
                        />
                    </td>
                </tr>
            </table>
        
        </form>
    </div>
</div>
