<div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">
  <div class="uk-width-1-1@m uk-first-column">

    <h1 class="uk-h2">Register your datasource</h1>

    <!-- TOP HELP CONTENT -->
    <help-content #topHelperContent [position]="'top'"
                  [ngClass]="topHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
    </help-content>

    <div class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
      <div class="uk-grid">

        <!-- LEFT HELP CONTENT -->
        <aside-help-content #leftHelperContent [position]="'left'"
                            [ngClass]="leftHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
        </aside-help-content>

        <!-- MIDDLE -->
        <div class=" uk-width-expand@m">

          <div class="wizard">
            <div class="wizardBreadcrumbs">
              <div class="steps clearfix">
                <div class="step active">
                  <div>
                    Select repository
                    <span></span>
                  </div>
                </div>
                <div class="step {{ (currentStep > 0) ? 'active' : '' }}">
                  <div>
                    Enter Information
                    <span></span>
                  </div>
                </div>
                <div class="step {{ (currentStep > 1) ? 'active' : '' }}">
                  <div>
                    Add Interfaces
                    <span></span>
                  </div>
                </div>
                <div class="step {{ (currentStep > 2) ? 'active' : '' }}">
                  <div>
                    Finish
                    <span></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="content">
              <div>
                <div class="animated fadeInRight stepContent">
                  <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="errorMessage" class="uk-alert uk-alert-danger">{{ errorMessage }}</div>

                  <div>
                    <app-select-existing-datasource *ngIf="(currentStep === 0) && (currentMode !== null) && !loadingMessage"
                                                    #datasourcesByCountry
                                                    [mode]="currentMode"
                                                    (emitRepoId)="getRepoId($event)"
                                                    (promptNext)="goToStep2($event)"></app-select-existing-datasource>

                    <datasource-update-form *ngIf="(currentStep === 1) && (repo !== null) && !loadingMessage"
                                            #registerDatasource
                                            [selectedRepo]="repo"
                                            (emittedInfo)="getUpdatedRepo($event)"></datasource-update-form>

                    <div *ngIf="(currentStep === 2) && repo && !loadingMessage" class="uk-grid uk-child-width-1-2">
                      <div *ngFor="let inter of dataForInterfaceComp"
                           class="interfacesForm el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">
                        <app-repository-interface-form #interfacesArray
                                                       [data]="inter"
                                                       (emitDeleteInterface)="removeInterfaceFromList($event)">
                        </app-repository-interface-form>
                      </div>
                      <div class="el-item uk-card uk-card-default uk-card-body uk-scrollspy-inview uk-animation-fade uk-margin-bottom">
                        <div class="interface-box new" style="text-align: center">
                          <a class="add-new-element add-new-group" (click)="addInterfaceToList()">
                            <i class="far fa-plus-square" aria-hidden="true"></i>
                            <span class="info">Add New Interface</span>
                          </a>
                        </div>
                      </div>
                    </div>
                    <div *ngIf="(currentStep === 3) && !loadingMessage" class="row openAIRECompliantLogoDownload">
                      <div class="col-lg-12">
                        <div class="col-md-12">
                          <div>
                            <div class="openAIRECompliantLogo">
                              <h2 class="openAIRECompliantLogoMessage">
                                We successfully received the request to register your repository to the OpenAIRE compliant list of content providers.
                                A validation process against the OpenAIRE guidelines compatibility has been started.
                                You will be informed via email once the process is finished.
                                <!--Congratulations! Your repository was successfully registered in OpenAIRE. You can download this logo to use in your site.-->
                              </h2>
                              <!--<img src="../../../../assets/imgs/3_0ValidatedLogo.png" alt="OpenAireCompliant">-->
                            </div>
                          </div>
                          <!--<a (click)="downloadLogo()">-->
                            <!--Download-->
                            <!--<i class="fa fa-download" style=""></i>-->
                          <!--</a>-->
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="wizardActions">
              <button *ngIf="((currentStep === 1) || (currentStep === 2)) && !loadingMessage"
                      class="uk-button uk-button-grey-light uk-margin-small-right"
                      type="button" (click)="moveBackAStep()">
                <i class="fa fa-angle-double-left"></i>
                Back
              </button>
              <button *ngIf="(currentStep < 3) && !loadingMessage"
                      class="uk-button uk-button-grey-light uk-margin-small-left"
                      type="button" (click)="moveAStep()">
                Next
                <i class="fa fa-angle-double-right"></i>
              </button>
            </div>
          </div>

        </div>

        <!-- RIGHT HELP CONTENT -->
        <aside-help-content #rightHelperContent [position]="'right'"
                            [ngClass]="rightHelperContent.isPresent()?'tm-sidebar uk-width-1-4@m uk-first-column':'clear-style'">
        </aside-help-content>

      </div>
    </div>


    <!-- BOTTOM HELP CONTENT -->
    <help-content #bottomHelperContent [position]="'bottom'"
                  [ngClass]="bottomHelperContent.isPresent()?'uk-margin-medium-top uk-margin-medium-bottom':'clear-style'">
    </help-content>


  </div>
</div>
