<div style="margin-top: 2vh; height: 88%;">
  <mat-form-field appearance="fill">
    <mat-label>Title</mat-label>
    <input matInput [formControl]="titleFormControl" [(ngModel)]="title" required />
    <mat-error *ngIf="titleFormControl.invalid">{{getErrorMessage(titleFormControl)}}</mat-error>
  </mat-form-field>
  <mat-form-field appearance="fill">
    <mat-label>Repository</mat-label>
    <input matInput [formControl]="repositoryFormControl" [(ngModel)]="repository" required />
    <mat-error *ngIf="repositoryFormControl.invalid">{{getErrorMessage(repositoryFormControl)}}</mat-error>
  </mat-form-field>
  <mat-form-field appearance="fill">
    <mat-label>Author</mat-label>
    <input matInput [formControl]="authorFormControl" [(ngModel)]="author" required />
    <mat-error *ngIf="authorFormControl.invalid">{{getErrorMessage(authorFormControl)}}</mat-error>
  </mat-form-field>
  <mat-form-field appearance="fill">
    <mat-label>Description</mat-label>
    <textarea matInput [formControl]="descriptionFormControl" rows="10" [(ngModel)]="description" required></textarea>
    <mat-error *ngIf="descriptionFormControl.invalid">{{getErrorMessage(descriptionFormControl)}}</mat-error>
  </mat-form-field>
</div>

<div style="display: flex; justify-content: center;">
  <button mat-raised-button class="remote-button" color="primary" matTooltip="Save external source" (click)="onRegisterSource()" [disabled]="!title || !repository || !author || !description" style="margin-right: 5em;">
    <mat-icon>
      save
    </mat-icon>
  </button>
  <button mat-raised-button mat-dialog-close color="accent" class="remote-button">
    <mat-icon>
      close
    </mat-icon>
  </button>
</div>
