camilosampedro/Aton

<button class="ui green button" (click)="newLaboratoryModal.show({inverted: true})"><i class="ui plus icon"></i>Add new laboratory</button>
<sm-modal title="Add a new laboratory" class="cross" icon="lab" #newLaboratoryModal>
    <modal-content>
        <form class="ui form" #laboratoryForm="ngForm">
            <div class="field">
                <div class="ui labeled input">
                    <div class="ui label">
                        <i class="info icon"></i>Name:
                    </div>
                    <input required placeholder="Name of the laboratory" [(ngModel)]="name" icon="info" name="name"
                           #nameRef="ngModel" type="text">
                    <div *ngIf="!(nameRef.valid || nameRef.pristine)" class="ui left pointing red basic label">
                        <i class="edit icon"></i>Please enter a value
                    </div>
                </div>
            </div>
            <div class="field">
                <div class="ui labeled input">
                    <div class="ui label">
                        <i class="compass icon"></i>Location:
                    </div>
                    <input required placeholder="Where is the laboratory located" [(ngModel)]="location" icon="compass" name="location"
                           #locationRef="ngModel" type="text">
                    <div *ngIf="!(locationRef.valid || locationRef.pristine)" class="ui left pointing red basic label">
                        <i class="edit icon"></i>Please enter a value
                    </div>
                </div>
            </div>
            <div class="field">
                <div class="ui labeled input">
                    <div class="ui label">
                        <i class="user icon"></i>Administration:
                    </div>
                    <input required placeholder="Who administrate this laboratory" [(ngModel)]="administration" icon="user" name="administration"
                           #administrationRef="ngModel" type="text">
                    <div *ngIf="!(administrationRef.valid || administrationRef.pristine)" class="ui left pointing red basic label">
                        <i class="edit icon"></i>Please enter a value
                    </div>
                </div>
            </div>
        </form>
    </modal-content>
    <modal-actions>
        <sm-button icon="Remove" class="left orange" (click)="newLaboratoryModal.hide()">Cancel</sm-button>
        <sm-button (click)="laboratoryForm.form.valid && submit()" [disabled]="!laboratoryForm.form.valid" class="violet"><i
                class="send icon"></i>Add
        </sm-button>

    </modal-actions>
</sm-modal>