<div class="panel-viewer-wrapper">

    <div class="panel-viewer-title">
        <mat-icon>chat</mat-icon>
        {{'label.deployment-channels.title' | translate}}
    </div>

    <div class="panel-viewer-body">

        <!-- <div class="row pb-2 text-center">

            <div class="col-12">
                <h1>{{'label.deployment-channels' | translate}}</h1>
            </div>
        </div> -->
        <div class="row pb-2  justify-content-center">
            <div class="col-md-6 col-sm-12">

                <!-- <div class="alert alert-warning" *ngIf="!viewMode">
                    <i class="fa fa-warning"></i>&nbsp;&nbsp;<span
                        [innerHTML]="'label.summary.warning' | translate"></span>
                </div> -->

                <h4 class="mt-3">
                    <button class="pull-right" mat-icon-button (click)="addChannel()" *ngIf="!viewMode">
                        <i class="fa fa-plus"></i>
                    </button>
                    <b>{{'label.channels' | translate}}</b>
                </h4>

                <mat-accordion>
                    <mat-expansion-panel *ngFor="let channel of deploymentChannels; let i = index"
                        [expanded]="step === i" (opened)="setStep(i)">
                        <mat-expansion-panel-header class="right-aligned-header" [collapsedHeight]="'60px'">
                            <mat-panel-title>
                                <img [src]="channel.channelImage" class="icon">
                                <div>
                                    <span style="margin-right: 8px;">{{ channel.channelName }}</span>
                                    <small class="text-muted">{{ channel.name }}</small>
                                </div>
                            </mat-panel-title>
                            <mat-panel-description>
                                <label class="label label-success"
                                    *ngIf="channel.active">{{'label.active' | translate}}</label>
                                <label class="label label-default"
                                    *ngIf="!channel.active">{{'label.inactive' | translate}}</label>
                            </mat-panel-description>
                        </mat-expansion-panel-header>

                        <div>
                            <form role="form" novalidate (ngSubmit)="ok()" #myForm="ngForm" autocomplete="off">
                                <div class="row">
                                    <div class="col-6">
                                        <mat-form-field class="amd-form-control">
                                            <mat-label>{{'label.name' | translate}}</mat-label>
                                            <input matInput maxlength="80" [type]="text" required="true"
                                                [disabled]="viewMode" [(ngModel)]="channel.name"
                                                [ngModelOptions]="{standalone: true}">
                                        </mat-form-field>
                                    </div>
                                    <div class="col-6">
                                        <mat-slide-toggle [(ngModel)]="channel.active" [disabled]="viewMode"
                                            [ngModelOptions]="{standalone: true}" color="primary">
                                            <span *ngIf="channel.active">{{'label.active' | translate}}</span>
                                            <span *ngIf="!channel.active">{{'label.inactive' | translate}}</span>
                                        </mat-slide-toggle>
                                    </div>
                                </div>
                                <div class="row" *ngFor="let field of channel.parameters">
                                    <div class="col-12">
                                        <mat-form-field class="amd-form-control">
                                            <mat-label>{{field.label | dynamicTranslate: {param: field.traductions } }}:
                                            </mat-label>
                                            <!-- 
                                                [pattern]="field.regex"
                                            -->
                                            <input matInput [maxlength]="field.maxlength" [(ngModel)]="field.value"
                                                [ngModelOptions]="{standalone: true}" [disabled]="viewMode"
                                                [type]="(field.type ? field.type : 'text')" [required]="field.required">
                                        </mat-form-field>
                                    </div>
                                </div>
                            </form>
                        </div>

                        <mat-action-row *ngIf="!viewMode">
                            <button mat-button color="warn" (click)="deleteChannel(i)">
                                <i class="fa fa-trash"></i>&nbsp;&nbsp;{{'label.delete-channel' | translate}}
                            </button>
                        </mat-action-row>
                    </mat-expansion-panel>
                </mat-accordion>

                <div *ngIf="!(deploymentChannels && deploymentChannels.length)" class="border-all text-center">
                    Seleccione <i class="fa fa-plus"></i> para agregar un canal de despliegue
                    <!-- {{'label.delete-channel' | translate}} -->
                </div>
            </div>

        </div>
    </div>

    <div class="footer-bar">
        <div class="row">
            <div class="col-12">
                <button mat-stroked-button matStepperPrevious class="pull-left">
                    <i class="fa fa-chevron-left"></i>
                    <span class="pl-1">{{'btn.previous' | translate}}</span>
                </button>
                <button mat-stroked-button color="primary" (click)="save()" class="pull-right" *ngIf="!viewMode">
                    <span class="pr-1">{{'btn.save' | translate}}</span>
                    <i class="fa fa-chevron-right"></i>
                </button>
                <button mat-stroked-button (click)="exit()" class="pull-right" *ngIf="viewMode">
                    <span class="pr-1">{{'application.options.exit' | translate}}</span>
                    <i class="fa fa-logout"></i>
                </button>
            </div>
        </div>
    </div>

</div>