D-Net

<div>

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

    <div class="md-class-content">

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

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

    <div class="md-card-toolbar">

      <div class="md-card-toolbar-actions">

        <a *ngIf="!inRegister" (click)="saveInterface()" class="uk-margin-small-right"><i class="md-icon material-icons">save</i></a>

        <a *ngIf="canEdit" (click)="removeInterface()" class="uk-margin-small-left"><i class="md-icon material-icons">clear</i></a>

      </div>

    </div>

    <div class="md-card-content">

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

      <div *ngIf="errorMessage" class="uk-alert" [ngClass]="{'uk-alert-warning': errorMessage == invalidCustomBaseUrl,

                'uk-alert-danger': errorMessage != invalidCustomBaseUrl}" style="clear: both">{{ errorMessage }}

      </div>

      <div class="md-input-wrapper uk-margin-medium-top {{ (repoInterfaceForm.get('baseurl') != null) ? 'md-input-filled' : '' }}">

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

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

          Identified

        </span>

        <input id="baseurl" type="text" class="md-input" [ngClass]="{'uk-disabled': !canEdit}"

               formControlName="baseurl" (blur)="getInterfaceInfo()">

        <span class="md-input-bar"></span>

      </div>

      <div class="radioButtonForm uk-margin-top">

        <label for="selectValidationSet{{interfaceID}}" class="control-label">Set</label>

        <div class="md-input-wrapper">

          <select class="md-input" id="selectValidationSet{{interfaceID}}" formControlName="selectValidationSet" (change)="checkIfValid()">

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

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

          </select>

          <span class="md-input-bar"></span>

        </div>

      </div>

      <div class="md-input-wrapper md-input-filled uk-margin-medium-top">

        <div>

          <label class="" for="compLvl" title="{{ compatibilityLevelDesc.desc }}">Select the Guidelines with which your data source is compatible.

            Please note that the Aggregation Team will evaluate the compatibility, so the actual compliance level may be different from which you chose.

          </label>

        </div>

        <select class="md-input" id="compLvl" formControlName="desiredCompatibilityLevel" (change)="checkIfValid()">

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

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

        </select>

        <span class="md-input-bar"></span>

      </div>

      <div class="uk-margin-medium-top">

        <label class="">Compatible level returned by the Validator tool after your request to register the interface.</label>

        <div class="uk-margin-small-top">{{(repoInterfaceForm.get('compatibilityLevel').value && repoInterfaceForm.get('compatibilityLevel').value !== 'UNKNOWN')

          ? this.compClasses[repoInterfaceForm.get('compatibilityLevel').value] : 'not available' }}</div>

      </div>

      <div class="uk-margin-medium-top">

        <label class="">Actual compatibility level of your data source, according to the validation process by the Aggregation Team. This is the compatibility level displayed on the data source public page in EXPLORE</label>

        <div class="uk-margin-small-top">{{repoInterfaceForm.get('compatibilityLevelOverride').value ? this.compClasses[repoInterfaceForm.get('compatibilityLevelOverride').value] : 'not available' }}</div>

      </div>

      <div class="uk-margin-medium-top">

        <label class="" for="comment" title="{{ commentDesc.desc }}">Comments (What else do we need to know?)</label>

        <textarea id="comment" class="uk-textarea" rows="3" formControlName="comment" (blur)="checkIfValid()"></textarea>

      </div>

    </div>

<!--    <pre>{{repoInterfaceForm.value | json}}</pre>-->

<!--    <pre>{{interfaceToExport | json}}</pre>-->

  </div>

</div>