<section>
    <p class="mat-body">step 1: read the CSV file</p>
    <p class="text-center">
        <ng-container *ngIf="csv.length === 0">
            <button mat-raised-button (click)="input.click()">Read the CSV file</button>
            <input #input type="file" accept=".csv" style="display: none" (change)="read($event)">
        </ng-container>
        <ng-container *ngIf="csv.length !== 0">
            <button mat-raised-button (click)="csv=[]">Reset</button>
        </ng-container>
    </p>
</section>

<section>
    <p class="mat-body">step 2: select CSV style</p>
    <p class="text-center">
        <mat-radio-group [(ngModel)]="mode">
            <mat-radio-button [value]="0">Trunk Recorder</mat-radio-button>
            <mat-radio-button [value]="1">Radio Reference</mat-radio-button>
        </mat-radio-group>
    </p>
</section>

<section>
    <p class="mat-body">step 3: review talkgroups to import</p>
    <div class="scroll">
        <mat-table #table [dataSource]="csv">
            <ng-container matColumnDef="id">
                <mat-header-cell *matHeaderCellDef>
                    <span>Id</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let tg">
                    <span>{{ tg[fields[mode][0]] }}</span>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="label">
                <mat-header-cell *matHeaderCellDef>
                    <span>Label</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let tg">
                    <span>{{ tg[fields[mode][1]] }}</span>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="description">
                <mat-header-cell *matHeaderCellDef>
                    <span>Description</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let tg">
                    <span>{{ tg[fields[mode][2]] }}</span>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="tag">
                <mat-header-cell *matHeaderCellDef>
                    <span>Tag</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let tg">
                    <span>{{ tg[fields[mode][3]] }}</span>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="group">
                <mat-header-cell *matHeaderCellDef>
                    <span>Group</span>
                </mat-header-cell>
                <mat-cell *matCellDef="let tg">
                    <span>{{ tg[fields[mode][4]] }}</span>
                </mat-cell>
            </ng-container>
            <ng-container matColumnDef="action">
                <mat-header-cell *matHeaderCellDef></mat-header-cell>
                <mat-cell *matCellDef="let tg; index as i">
                    <button mat-icon-button (click)="csv.splice(i, 1); table.renderRows()">
                        <mat-icon>clear</mat-icon>
                    </button>
                </mat-cell>
            </ng-container>
            <mat-header-row *matHeaderRowDef="tableColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: tableColumns"></mat-row>
        </mat-table>
    </div>
    <p *ngIf="!csv.length" class="mat-body text-center">No CSV data yet</p>
</section>

<section>
    <p class="mat-body">step 4: import to configuration</p>
    <p class="text-center">
        <button mat-raised-button [disabled]="!csv.length" (click)="import()">
            Import to configuration
        </button>
    </p>
    <p *ngIf="csv.length > 800" class="mat-caption mat-error text-center text-uppercase">
        Warning, you are trying to import more than 800 talkgroups, {{csv.length}} in this case. The graphic interface has not designed for this number of talkgroups. You can continue, but expect Rdio Scanner to be quite slow, if not unusable.
    </p>
</section>