<div class="panel panel-default">
    <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>

            <div class="btn-toolbar">
                <div class="btn-group">
                    <div (click)="saveClicked()" class="btn btn-default">
                        Save
                    </div>
                    <div (click)="resetClicked()" class="btn btn-default">
                        Reset
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
