<of-p-div #discoveryContainer>
  <div *ngIf="showIntro" class="home-start">
    <div class="start-button" (click)="discoveryConfigService.setDiscoveryStatus('Started')">
      <svg version="1.1" viewBox="0 0 200 210">
        <path d="M8.3,193.5c0.1,2.4,0.8,4.9,2.1,7.1c4.5,7.7,14.3,10.4,22.1,5.9l152.1-87.8c2-1.3,3.8-3.1,5.1-5.4
        c4.5-7.7,1.8-17.6-5.9-22.1L31.6,3.4c-2.2-1.1-4.6-1.7-7.2-1.7c-8.9,0-16.2,7.2-16.2,16.2V193.5z" />
      </svg>
    </div>
    <div class="home-description">
      <img src="assets/image/logo/overFlow_CI_white_90.png">
      <h1>Network Scanner </h1>
      <br>
      <b>를 이용해 주셔서 감사합니다.</b>
      <br> 좌측의 버튼을 클릭 하시면 기본 설정으로 스캐닝이 시작 됩니다. 설정의 변경을 원하시면 상단의 설정 영역을 클릭하여 변경이 가능합니다.
    </div>
  </div>

  <div *ngIf="!showIntro" class="discovery-container">
    <svg #discoveryTarget width="100%" height="100%">
      <g>
        <g *ngFor="let link of links">
          <g class="link-container" [ngClass]="'link-'+link.target.group" [attr.sourceId]="link.source.id"
            [attr.targetId]="link.target.id">
            <line class="link" [attr.x1]="link.source.x" [attr.y1]="link.source.y" [attr.x2]="link.target.x" [attr.y2]="link.target.y"></line>
            <text *ngIf="link.target.group === 'service'" class="linkTextClass" [attr.x]="(link.source.x - link.target.x) / 2 + link.target.x"
              [attr.y]="(link.source.y - link.target.y) / 2 + link.target.y">{{link.target.target.port.portNumber}}</text>
          </g>
        </g>
        <g *ngFor="let node of nodes">
          <g class="node-container" [ngClass]="node.group" [attr.nodeId]="node.id" [attr.transform]="'translate(' + node.x + ',' + node.y + ')'">
            <g *ngIf="node.group === 'zone'">
              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
                xlink:href="assets/image/node/icon/icon_overflow.svg"></image>
            </g>
            <g *ngIf="node.group === 'zone'">
              <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.network}}</text>
            </g>
            <g *ngIf="node.group !== 'zone'">
              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
                xlink:href="assets/image/node/icon/icon_background.svg"></image>
            </g>
            <g *ngIf="node.group === 'host'">
              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
                attr.xlink:href="assets/image/node/icon/icon_{{node.target.hostType | lowercase}}.svg"></image>
            </g>
            <g *ngIf="node.group === 'host' && node.target.hostType === 'HOST' && node.target.osType !== 'UNKNOWN'">
              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
                attr.xlink:href="assets/image/node/logo/logo_{{node.target.osType | lowercase}}.svg"></image>
            </g>
            <!-- <g *ngIf="node.group === 'host' && node.target.hostType !== 'HOST' && node.target.hostVendor !== ''">
            <text class="textClass" [attr.y]="(node.r - 30) / 10 + 'em'" text-anchor="middle">{{node.target.hostVendor}}</text>
          </g> -->
            <g *ngIf="node.group === 'host'">
              <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.address}}</text>
            </g>
            <g *ngIf="node.group === 'service'">
              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
                attr.xlink:href="assets/image/node/icon/icon_{{node.target.serviceType | lowercase}}.svg"></image>
            </g>
            <g *ngIf="node.group === 'service' && node.target.key !== 'UNKNOWN'">
              <image [attr.x]="-node.r" [attr.y]="-node.r" [attr.width]="node.r * 2" [attr.height]="node.r * 2"
                attr.xlink:href="assets/image/node/logo/logo_{{node.target.key | lowercase}}.svg"></image>
            </g>
            <g *ngIf="node.group === 'service'">
              <text class="textClass" [attr.y]="(node.r - 10) / 10 + 'em'" text-anchor="middle">{{node.target.name}}</text>
            </g>
          </g>
        </g>
      </g>
    </svg>
    <p-card class="ui-map-info" *ngIf="discoveryResult">
      <div class="ui-map-info-row ui-border-bottom">
        <div>Total Hosts: </div>{{discoveryResult.totalHosts}}
      </div>
      <div class="ui-map-info-row ui-border-bottom">
        <div>Total Services: </div>{{discoveryResult.totalServices}}
      </div>
      <div class="ui-map-info-row">
        <div>Elapsed: </div>{{discoveryResult.elapsedTime}}
      </div>
    </p-card>

    <div #detailSidebar style="position: sticky; top: 0; left: 0; height: 100%;"></div>

    <p-sidebar [(visible)]="displaySidebar" [modal]="false" [appendTo]="detailSidebar" styleClass="ui-sidebar-md"
      position="right" (onHide)="onHideDetail()" [style]="{position:'absolute'}">
      <div *ngIf="selectedNode !== null">
        <app-node-detail [node]="selectedNode" (otherHostSelect)="otherHostSelected($event)"></app-node-detail>
      </div>
    </p-sidebar>
  </div>
</of-p-div>

<p-confirmDialog></p-confirmDialog>

<p-blockUI id="discovery-blockUI" [target]="discoveryContainer" [blocked]="discoveryRequestID !== null">
</p-blockUI>

<p-dialog [showHeader]="false" [(visible)]="stopping" [modal]="true" [responsive]="false" [width]="300" [height]="100"
  [minY]="70" [closeOnEscape]="false" [closable]="false">
  <div class="ui-dialog-text-center">Discovery is being stopped...</div>
</p-dialog>


<!-- <div class="ui-fluid">
    <div class="ui-g">
        <div class="ui-g-12">
            <h1>Home works!!!!</h1>
            <p-panel #content [showHeader]="false" class="block-panel">
                <div class="ui-g" dir="rtl">
                    <button class="ui-button-width-fit" type="button" label="Discovery" icon="ui-icon-search" pButton></button>
                </div>
            </p-panel>

            <h3 class="first">Document</h3>
            <p-blockUI [blocked]="blockedDocument"></p-blockUI>

            <button type="button" pButton label="Block" (click)="blockDocument()"></button>

            <h3>Panel</h3>
            <button type="button" pButton label="Block" (click)="blockedPanel=true"></button>
            <button type="button" pButton label="Unblock" (click)="blockedPanel=false"></button>

            <p-blockUI [target]="pnl" [blocked]="blockedPanel">
                <i class="fa fa-lock fa-5x" style="position:absolute;top:25%;left:50%"></i>
            </p-blockUI>
            <p-panel #pnl header="Godfather I" [style]="{'margin-top':'20px'}">
                The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. His beloved
                son Michael has just come home from the war, but does not intend to become part of his father's business.
                Through Michael's life the nature of the family business becomes clear. The business of the family is
                just like the head of the family, kind and benevolent to those who give respect, but given to ruthless
                violence whenever anything stands against the good of the family.
            </p-panel>
        </div>
    </div>
</div> -->