D-Net

<div>

  <div *ngIf="loadingMessage" class="loading-big">

    <div class="loader-big" style="text-align: center; padding-top: 170px; color: rgb(47, 64, 80); font-weight: bold;">

      {{ loadingMessage }}

    </div>

    <div class="whiteFilm"></div>

  </div>

  <div *ngIf="repoInterfaceForm && (!loadingMessage || (loadingMessage===''))" [formGroup]="repoInterfaceForm">

    <div class="interfaceActionsPanel">

      <a *ngIf="!inRegister" (click)="saveInterface()" class="uk-margin-small-right"><i class="far fa-save fa-lg"></i></a>

      <a (click)="removeInterface()" class="uk-margin-small-left"><i class="fas fa-times fa-lg"></i></a>

    </div>

    <div *ngIf="successMessage" class="uk-alert uk-alert-success" style="clear: both">{{ successMessage }}</div>

    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" style="clear: both">{{ errorMessage }}</div>

    <div class="form-group has-success">

      <label class="control-label" for="baseUrl" title="{{ baseUrlDesc.desc }}">Base OAI-PMH URL (*)</label>

      <span *ngIf="identifiedBaseUrl" class="help-block inline" style="margin-top: 0px; margin-bottom: 0px; padding-left: 10px;">

        Identified

      </span>

      <input id="baseUrl" type="text" class="form-control" formControlName="baseUrl" (blur)="getInterfaceInfo()">

    </div>

    <div class="form-group">

      <label class="control-label">Validation Set</label>

      <div>

        <label class="uk-button validationSetRadio" for="selectRadio{{interfaceID}}" title="{{ existingValSetDesc.desc }}">

          <input id="selectRadio{{interfaceID}}" value="select" name="validationSet{{interfaceID}}" type="radio"

                 (change)="chooseValSet(true)" checked >

          <span class="uk-margin-small-left">Choose existing</span>

        </label>

      </div>

      <select id="selectValidationSet{{interfaceID}}" formControlName="selectValidationSet"

              class="form-control" (change)="checkIfValid()">

        <option value="" selected>-- none selected --</option>

        <option *ngFor="let set of valsetList" value="{{set}}">{{set}}</option>

      </select>

      <div>

        <label class="uk-button validationSetRadio" for="customRadio{{interfaceID}}" title="{{ customValSetDesc.desc }}">

          <input id="customRadio{{interfaceID}}" value="custom" name="validationSet{{interfaceID}}" type="radio"

                 (change)="chooseValSet(false)">

          <span class="uk-margin-small-left">or a custom one</span>

        </label>

      </div>

      <input id="customValidationSet{{interfaceID}}" formControlName="customValidationSet"

             class="form-control" type="text" (keyup)="checkIfValid()">

    </div>

    <div class="form-group">

      <label class="control-label" for="compLvl" title="{{ compatibilityLevelDesc.desc }}">Desired Compatibility Level (*)</label>

      <select class="form-control" id="compLvl" formControlName="compatibilityLevel" (change)="checkIfValid()">

        <option value="">-- none selected --</option>

        <option *ngFor="let key of classCodes" value="{{key}}">{{compClasses[key]}}</option>

      </select>

    </div>

    <div>

      <label class="uk-form-controls-text control-label">Current Compatibility Level</label>

      <div *ngIf="existingCompLevel">{{ existingCompLevel ? existingCompLevel : 'not available' }}</div>

    </div>

  </div>

</div>