<div class="col-md-12" *ngIf="!loading">
    <div>
        <div class="alert-message alert-message-info" role="alert">
            <p>{{'lang.sentToIxbusParapheur' | translate}}</p>
        </div>
    </div>
    <ng-container *ngIf="natures.length == 0 || messagesModel.length == 0">
        <div *ngIf="natures.length == 0">
            <div class="alert-message alert-message-danger mailList" role="alert">
                <p>{{'lang.noIxbusNature' | translate}}</p>
            </div>
        </div>

        <div *ngIf="messagesModel.length == 0">
            <div class="alert-message alert-message-danger mailList" role="alert">
                <p>{{'lang.noWorkflowIxbus' | translate}}</p>
            </div>
        </div>
    </ng-container>
    <ng-container *ngIf="natures.length != 0 && messagesModel.length != 0">
        <div class="form-group" style="margin-top: 10px">
            <div class="col-sm-12">
                <plugin-select-search [showLabel]="true" [class]="''" [label]="'lang.natureIxbusParapheur' | translate"
                                      [placeholderLabel]="'lang.natureIxbusParapheur' | translate" [formControlSelect]="selectNature"
                                      [datas]="natures" (afterSelected)="ixbusDatas.nature = selectNature.value"
                                      style="width:100%;" [required]="true">
                </plugin-select-search>
            </div>
        </div>
        <div class="form-group" style="margin-top: 10px">
            <div class="col-sm-12">
                <plugin-select-search [showLabel]="true" [class]="''" [label]="'lang.workflowModelIxbus' | translate"
                                      [placeholderLabel]="'lang.workflowModelIxbus' | translate" [formControlSelect]="selectWorkflow"
                                      [datas]="messagesModel" (afterSelected)="ixbusDatas.messageModel = selectWorkflow.value"
                                      style="width:100%;" [required]="true">
                </plugin-select-search>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <mat-form-field>
                    <input matInput [(ngModel)]="ixbusDatas.login" required name="loginIxbus"
                           id="loginIxbus" title="{{'lang.loginIxbus' | translate}}" type="text" placeholder="{{'lang.loginIxbus' | translate}}">
                </mat-form-field>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <mat-form-field>
                    <input matInput [(ngModel)]="ixbusDatas.password" required name="passwordIxbus"
                           id="passwordIxbus" title="{{'lang.passwordIxbus' | translate}}" type="password" placeholder="{{'lang.passwordIxbus' | translate}}">
                </mat-form-field>
            </div>
        </div>
        <mat-radio-group id="handwrittenSignature" name="handwrittenSignature" [(ngModel)]="ixbusDatas.signatureMode"
            color="primary">
            <mat-radio-button value="manual" color="primary">
                {{'lang.handwrittenSignature' | translate}}
            </mat-radio-button>
            <mat-radio-button value="electronic" color="primary" style="margin-left: 5px">
                {{'lang.electronicSignature' | translate}}
            </mat-radio-button>
        </mat-radio-group>
    </ng-container>
</div>