<form [formGroup]="form" name="form" autocomplete="off" novalidate (ngSubmit)="submit()">
    <div class="mail-box-header detail-header" [ngClass]="{'title-border-bottom': mode !='new'}">
        <xdf-form-header [icon]="icon" title_="agente-form.title" [recordIdentifier]="record?.id"
            titleDesc="agente-form.title.desc" [mode]="mode" [resourceAuth]="resourceAuth"
            (optionEvent)="optionEvent($event)" [editing]="mode === 'edit'" [displaying]="mode === 'view'">
        </xdf-form-header>
    </div>

    <div class="mail-box-content">
        <div class="row">
            <div class="col-12">
                <div class="form-content">
                    <div class="hr-line-dashed"></div>
                    <!-- Configuración -->
                    <div class="legend">
                        <span class="group-title">{{ 'agente-form.receptor' | translate}}</span>
                    </div>

                    <div class="input-together">
                        <div class="group-content">
                            <div class="row">
                                <div class="form-group col-xl-6">
                                    <xdf-input name="name" label="agente-form.name" type="text"
                                        [required]="true" placeholder="agente-form.name.placeholder"
                                        [formGroup]="form" [options]="{maxLength: 1000, showLength: true}"></xdf-input>
                                </div>
                                <div class="form-group col-xl-6">
                                    <xdf-input name="details" label="agente-form.details" type="text"
                                        [required]="true" placeholder="agente-form.details.placeholder"
                                        [formGroup]="form" [options]="{maxLength: 1000, showLength: true}"></xdf-input>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-12" *ngIf="mode !== 'view'">
                <div class="form-status-bar border-top">
                    <button type="submit" mat-stroked-button class="btn btn-primary" [disabled]="form?.invalid 
              || processing ">
                        <i class="fa fa-save" aria-hidden="true"></i>{{'btn.save' | translate}}
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>