<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>
