<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 == 1) ? '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">Register data source</span>
                      </a>
                    </li>
                    <li role="tab" class="{{ (currentStep < 2) ? 'disabled' : '' }} {{ (currentStep == 2) ? '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">Register interface</span>
                      </a>
                    </li>
                    <li role="tab" class=" {{ (currentStep < 3) ? 'disabled' : '' }} {{ (currentStep == 3) ? '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">Terms of Use</span>
                      </a>
                    </li>
                    <li role="tab" class=" {{ (currentStep < 4) ? 'disabled' : '' }} {{ (currentStep == 4) ? 'current' : '' }}" aria-disabled="true">
                      <a id="wizard_advanced-t-3" href="#wizard_advanced-h-3" aria-controls="wizard_advanced-p-2">
                        <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 == 1) ? 'current' : '' }}">Enter Information</h3>
                  <section id="wizard_advanced-p-0" role="tabpanel" aria-labelledby="wizard_advanced-h-0"
                           class="body step-0 {{ (currentStep == 1) ? 'current' : '' }}" data-step="0" aria-hidden="false">
                    <!--<h2 class="heading_a">-->
                    <!--Select Repository-->
                    <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
                    <!--</h2>-->
                    <!--<hr class="md-hr">-->
                    <datasource-create-form *ngIf="(currentStep === 1) && !loadingMessage"
                                            #registerDatasource
                                            [mode]="datasourceType"
                                            [selectedRepo]="repo"
                                            (emittedInfo)="getCurrentRepo($event)"></datasource-create-form>
                  </section>

                  <!-- second section -->
                  <h3 id="wizard_advanced-h-1" tabindex="-1" class="title {{ (currentStep == 2) ? 'current' : '' }}">Add Interfaces</h3>
                  <section id="wizard_advanced-p-1" role="tabpanel" aria-labelledby="wizard_advanced-h-1"
                           class="body step-1 {{ (currentStep == 2) ? 'current' : '' }}" data-step="1"  aria-hidden="true">
                    <!--<h2 class="heading_a">-->
                    <!--Enter Information-->
                    <!--<span class="sub-heading">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span>-->
                    <!--</h2>-->
                    <!--<hr class="md-hr">-->

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

                      <div *ngFor="let inter of dataForInterfaceComp" class="uk-width-1-2@m uk-margin-bottom">
                        <div>
                          <div class="md-card" style="height: 100%">
                            <app-repository-interface-form #interfacesArray
                                                           [data]="inter" [mode]=""
                                                           (emitDeleteInterface)="removeInterfaceFromList($event)">
                            </app-repository-interface-form>
                          </div>
                        </div>
                      </div>

                      <div class="uk-width-1-2@m 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>

                  <!-- third section -->
                  <h3 id="wizard_advanced-h-2" tabindex="-1" class="title {{ (currentStep == 3) ? 'current' : '' }}">Terms of Use</h3>
                  <section id="wizard_advanced-p-2" role="tabpanel" aria-labelledby="wizard_advanced-h-2"
                           class="body step-2 {{ (currentStep == 3) ? 'current' : '' }}" data-step="2" aria-hidden="true">
                    <div *ngIf="(currentStep === 3) && !loadingMessage" class="uk-grid">
                      <datasource-update-terms-form #updateTermsForm
                                                    [selectedRepo]="repo"
                                                    [showButton]=false
                                                    (emittedInfo)="getTerms($event)"></datasource-update-terms-form>
                    </div>
                  </section>

                  <!-- fourth section -->
                  <h3 id="wizard_advanced-h-3" tabindex="-1" class="title {{ (currentStep == 4) ? 'current' : '' }}">Finish</h3>
                  <section id="wizard_advanced-p-3" role="tabpanel" aria-labelledby="wizard_advanced-h-3"
                           class="body step-3 {{ (currentStep == 4) ? 'current' : '' }}" data-step="3" aria-hidden="true">
                    <div *ngIf="(currentStep === 4) && !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/update your data source with/on OpenAIRE.
                                It usually takes about 6 weeks to check your metadata and index it.
                                For questions, please create a ticket
<!--                                <a href="https://www.openaire.eu/support/helpdesk" target="_blank">helpdesk ticket</a>-->
                                writing to <a href="mailto:helpdesk@openaire.eu">helpdesk@openaire.eu</a>.
                                <!--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>
                  </section>

                </div>

                <div *ngIf="currentStep != 4" 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 < 3" 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 == 3" 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>



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

    <!--&lt;!&ndash; TOP HELP CONTENT &ndash;&gt;-->
    <!--<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">-->

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

        <!--&lt;!&ndash; MIDDLE &ndash;&gt;-->
        <!--<div class=" uk-width-expand@m">-->

          <!--<div class="wizard">-->
            <!--<div class="wizardBreadcrumbs">-->
              <!--<div class="steps clearfix">-->
                <!--<div class="step 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>-->
                    <!--<datasource-create-form *ngIf="(currentStep === 1) && !loadingMessage"-->
                                            <!--#registerDatasource-->
                                            <!--[mode]="datasourceType"-->
                                            <!--[selectedRepo]="repo"-->
                                            <!--(emittedInfo)="getCurrentRepo($event)"></datasource-create-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.-->
                                <!--&lt;!&ndash;Congratulations! Your repository was successfully registered in OpenAIRE. You can download this logo to use in your site.&ndash;&gt;-->
                              <!--</h2>-->
                              <!--&lt;!&ndash;<img src="../../../../assets/imgs/3_0ValidatedLogo.png" alt="OpenAireCompliant">&ndash;&gt;-->
                            <!--</div>-->
                          <!--</div>-->
                          <!--&lt;!&ndash;<a (click)="downloadLogo()">&ndash;&gt;-->
                            <!--&lt;!&ndash;Download&ndash;&gt;-->
                            <!--&lt;!&ndash;<i class="fa fa-download" style=""></i>&ndash;&gt;-->
                          <!--&lt;!&ndash;</a>&ndash;&gt;-->
                        <!--</div>-->
                      <!--</div>-->
                    <!--</div>-->
                  <!--</div>-->
                <!--</div>-->
              <!--</div>-->
            <!--</div>-->
            <!--<div class="wizardActions">-->
              <!--<button *ngIf="(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>-->

        <!--&lt;!&ndash; RIGHT HELP CONTENT &ndash;&gt;-->
        <!--<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>-->


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


  <!--</div>-->
<!--</div>-->
