D-Net

<div id="page_content">

  <div id="page_content_inner">

    <!--<h2 class="heading_b uk-margin-bottom">Manage your datasources</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 *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="transparentFilm"></div>

        </div>

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

        <div *ngIf="!loadingMessage && (repo !== null)" class="uk-margin-medium-bottom">

          <h3 class="heading_b uk-margin-bottom">

            <a id="updateLogoURL" (click)="updateLogoUrl(repo.logoUrl)">

              <img *ngIf="!logoURL" src="../../../assets/imgs/yourLogoHere.jpg" style="margin-right: 15px; margin-top:-8px" width="60">

              <img *ngIf="logoURL" src="{{ logoURL }}" style="margin-right: 15px; margin-top:-8px" width="60">

            </a>

            {{ repo.officialName }}

          </h3>

        </div>

        <div *ngIf="!loadingMessage && (repo !== null) && (repoInterfaces !== null)" class="uk-grid">

          <div class="uk-width-medium-1-1">

            <div class="md-card tabs" data-uk-grid-margin="">

              <div class="md-card-content uk-row-first">

                <ul class="uk-tab" data-uk-tab="{connect:'#tabs_anim4', animation:'slide-left'}">

                  <li class="uk-active" aria-expanded="true"><a href="#">Update Information</a></li>

                  <li aria-expanded="false" class=""><a href="#">Update Interfaces</a></li>

                </ul>

                <ul id="tabs_anim4" class="uk-switcher uk-margin">

                  <li aria-hidden="false" class="uk-active" style="animation-duration: 200ms;">

                    <datasource-update-form #datasourceUpdateForm

                                            [selectedRepo]="repo"

                                            [showButton]=true

                                            (emittedUrl)="getNewLogoUrl($event)"></datasource-update-form>

                  </li>

                  <li aria-hidden="true" style="animation-duration: 200ms;" class="">

                    <div *ngIf="repo && repoInterfaces && !loadingMessage" class="uk-grid uk-grid-match uk-margin-top" style="padding: 0px 3px 0px 3px;">

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

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

                  </li>

                </ul>

              </div>

            </div>

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

<confirmation-dialog #updateLogoUrlModal [title]="'Update Logo URL'" [isModalShown]="isModalShown"

                     [confirmActionButton]="'Update'" (emitObject)="updatedLogoUrl($event)">

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

    <input type="text" name="logoUrl" placeholder="Logo URL" class="md-input" value="{{ logoURL }}" (change)="getNewLogoUrl($event)">

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

  </div>

</confirmation-dialog>