D-Net

<div id="page_content">

  <div id="page_content_inner">

    <h2 class="heading_b uk-margin-bottom">Register your datasource</h2>

    <!-- 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-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="md-card uk-margin-large-bottom">

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

            <form class="uk-form-stacked" id="wizard_advanced_form" novalidate="">

              <div id="wizard_advanced" role="application" class="wizard clearfix">

                <div class="steps clearfix">

                  <ul role="tablist">

                    <li role="tab" class="first {{ (currentStep == 0) ? 'current' : '' }}" aria-disabled="false" aria-selected="true">

                      <a id="wizard_advanced-t-0" href="#wizard_advanced-h-0" aria-controls="wizard_advanced-p-0">

                        <!--<span class="current-info audible">current step: </span>-->

                        <span class="number">1</span>

                        <span class="title">Select Repository</span>

                      </a>

                    </li>

                    <li role="tab" class="{{ (currentStep < 1) ? 'disabled' : '' }} {{ (currentStep == 1) ? 'current' : '' }}" aria-disabled="true">

                      <a id="wizard_advanced-t-1" href="#wizard_advanced-h-1" aria-controls="wizard_advanced-p-1">

                        <span class="number">2</span>

                        <span class="title">Enter Information</span>

                      </a>

                    </li>

                    <li role="tab" class=" {{ (currentStep < 2) ? 'disabled' : '' }} {{ (currentStep == 2) ? 'current' : '' }}" aria-disabled="true">

                      <a id="wizard_advanced-t-2" href="#wizard_advanced-h-2" aria-controls="wizard_advanced-p-2">

                        <span class="number">3</span>

                        <span class="title">Add Interfaces</span>

                      </a>

                    </li>

                    <li role="tab" class="last {{ (currentStep < 3) ? 'disabled' : '' }} {{ (currentStep == 3) ? 'current' : '' }}" aria-disabled="true">

                      <a id="wizard_advanced-t-3" href="#wizard_advanced-h-3" aria-controls="wizard_advanced-p-3">

                        <span class="number">4</span>

                        <span class="title">Finish</span>

                      </a>

                    </li>

                  </ul>

                </div>

                <div class="content clearfix" style="height: 660px">

                  <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 uk-margin-top">{{ errorMessage }}</div>

                  <!-- first section -->

                  <h3 id="wizard_advanced-h-0" tabindex="-1" class="title {{ (currentStep == 0) ? 'current' : '' }}">Select Repository</h3>

                  <section id="wizard_advanced-p-0" role="tabpanel" aria-labelledby="wizard_advanced-h-0"

                           class="body step-0 {{ (currentStep == 0) ? 'current' : '' }}" data-step="0" aria-hidden="false">

                    <app-select-existing-datasource *ngIf="(currentStep === 0) && (currentMode !== null) && !loadingMessage"

                                                    #datasourcesByCountry

                                                    [mode]="currentMode"

                                                    (emitRepoId)="getRepoId($event)"

                                                    (promptNext)="goToStep2($event)"></app-select-existing-datasource>

                  </section>

                  <!-- second section -->

                  <h3 id="wizard_advanced-h-1" tabindex="-1" class="title {{ (currentStep == 1) ? 'current' : '' }}">Enter Information</h3>

                  <section id="wizard_advanced-p-1" role="tabpanel" aria-labelledby="wizard_advanced-h-1"

                           class="body step-1 {{ (currentStep == 1) ? 'current' : '' }}" data-step="1"  aria-hidden="true">

                    <datasource-update-form *ngIf="(currentStep === 1) && (repo !== null) && !loadingMessage"

                                            #registerDatasource

                                            [selectedRepo]="repo"

                                            (emittedInfo)="getUpdatedRepo($event)"></datasource-update-form>

                  </section>

                  <!-- third section -->

                  <h3 id="wizard_advanced-h-2" tabindex="-1" class="title {{ (currentStep == 2) ? 'current' : '' }}">Add Interfaces</h3>

                  <section id="wizard_advanced-p-2" role="tabpanel" aria-labelledby="wizard_advanced-h-2"

                           class="body step-2 {{ (currentStep == 2) ? 'current' : '' }}" data-step="2" aria-hidden="true">

                    <div *ngIf="(currentStep === 2) && repo && !loadingMessage" class="uk-grid uk-grid-match">

                      <div *ngFor="let inter of dataForInterfaceComp" class="uk-width-medium-1-2 uk-margin-bottom">

                        <div>

                          <div class="md-card" style="height: 100%">

                            <app-repository-interface-form #interfacesArray

                                                           [data]="inter"

                                                           (emitDeleteInterface)="removeInterfaceFromList($event)">

                            </app-repository-interface-form>

                          </div>

                        </div>

                      </div>

                      <div class="uk-width-medium-1-2 uk-margin-bottom">

                        <div>

                          <div class="md-card" style="height: 100%">

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

                            </div>

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

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

                      </div>

                    </div>

                  </section>

                  <!-- fourth section -->

                  <h3 id="wizard_advanced-h-3" tabindex="-1" class="title {{ (currentStep == 3) ? 'current' : '' }}">Finish</h3>

                  <section id="wizard_advanced-p-3" role="tabpanel" aria-labelledby="wizard_advanced-h-3"

                           class="body step-3 {{ (currentStep == 3) ? 'current' : '' }}" data-step="2"  aria-hidden="true">

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

                              </h2>

                            </div>

                          </div>

                        </div>

                      </div>

                    </div>

                  </section>

                </div>

                <div *ngIf="currentStep != 3" class="actions clearfix">

                  <ul role="menu" aria-label="Pagination">

                    <li class="button_previous {{ (currentStep < 1) ? 'disabled' : '' }}" aria-disabled="true">

                      <a (click)="moveBackAStep()" role="menuitem"><i class="material-icons"></i> Previous</a>

                    </li>

                    <li *ngIf="currentStep < 2" class="button_next" aria-hidden="false" aria-disabled="false">

                      <a (click)="moveAStep()" role="menuitem">Next<i class="material-icons"></i></a>

                    </li>

                    <li *ngIf="currentStep == 2" class="button_finish" aria-hidden="true">

                      <a (click)="moveAStep()" role="menuitem">Finish</a>

                    </li>

                  </ul>

                </div>

              </div>

            </form>

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

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