<div class="col-md-12" *ngIf="!loading">
    <div>
        <div class="alert-message alert-message-info" role="alert">
            <p>{{lang.sentToIxbusParapheur}}</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}}</p>
            </div>
        </div>

        <div *ngIf="messagesModel.length == 0">
            <div class="alert-message alert-message-danger mailList" role="alert">
                <p>{{lang.noWorkflowIxbus}}</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"
                                      [placeholderLabel]="lang.natureIxbusParapheur" [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"
                                      [placeholderLabel]="lang.workflowModelIxbus" [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}}" type="text" placeholder="{{lang.loginIxbus}}">
                </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}}" type="password" placeholder="{{lang.passwordIxbus}}">
                </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}}
            </mat-radio-button>
            <mat-radio-button value="electronic" color="primary" style="margin-left: 5px">
                {{lang.electronicSignature}}
            </mat-radio-button>
        </mat-radio-group>
    </ng-container>
</div>