
<nz-card nzTitle="Settings">
    <div class="settings-container">
        <nz-table 
            #basicTable 
            [nzData]="items$ | async"
            [nzLoading]="loading$ | async"
            nzSize="small">
            <thead>
                <tr>
                    <th>Setting</th>
                    <th>Value</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of basicTable.data">
                    <td>{{ item.key }}</td>
                    <td [ngSwitch]="item.type">
                        <!-- Boolean Value -->
                        <ng-container *ngSwitchCase="'boolean'">
                            <button 
                                nz-button 
                                class="bool-button"
                                [class.true]="item.boolean_value"
                                [class.false]="!item.boolean_value"
                                (click)="item.boolean_value = !item.boolean_value"
                                [disabled]="loading$ | async">
                                {{ item.boolean_value ? "True" : "False" }}
                            </button>
                        </ng-container>

                        <!-- Integer Value -->
                        <ng-container *ngSwitchCase="'integer'">
                            <nz-input-number
                                [(ngModel)]="item.int_value"
                                [nzStep]="1"
                                [disabled]="loading$ | async">
                            </nz-input-number>
                        </ng-container>

                        <!-- String Value (Password) -->
                        <ng-container *ngSwitchCase="'string'">
                            <input 
                                nz-input
                                [(ngModel)]="item.char_value"
                                [type]="item.key.endsWith('pass') ? 'password' : 'text'"
                                [disabled]="loading$ | async"/>
                        </ng-container>
                    </td>
                </tr>
            </tbody>
        </nz-table>

        <div class="action-buttons">
            <button 
                nz-button 
                nzType="primary"
                (click)="handleSave()"
                [nzLoading]="loading$ | async">
                Save
            </button>
            <button 
                nz-button
                (click)="handleReset()"
                [nzLoading]="loading$ | async">
                Reset
            </button>
        </div>
    </div>
</nz-card>