<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title class="header-title">窑亿</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true" style="--background: url('/assets/images/background.jpg') no-repeat center/cover;">
  <!-- 透明盒子容器 -->
  <ion-item lines="none" class="search-container">
    <!-- 添加搜索框 -->
    <ion-searchbar [(ngModel)]="searchQuery" (ionInput)="onSearch()" debounce="500" placeholder="请输入搜索内容..."></ion-searchbar>
    <!-- 搜索按钮 -->
    <ion-icon name="arrow-forward-circle-outline"></ion-icon>
  </ion-item>
  <!-- 水平盒子容器 -->
  <div class="horizontal-container">
    <!-- 友情链接按钮 -->
    <div class="link-button" (click)="navigateToLink()">
      <!-- 图标和文字的容器 -->
      <div class="button-content">
        <ion-icon name="link-outline"></ion-icon>
        <span class="link-text">友情链接</span>
      </div>
    </div>
  </div>
  <div class="transparent-box">
    <!-- 添加轮播图 -->
    <div class="swiper-container">
      <!-- 轮播图的每一张幻灯片 -->
      <div class="swiper-wrapper">
        <div class="swiper-slide" *ngFor="let slide of slides">
          <img [src]="slide.image" alt="{{ slide.title }}">
          <p>{{ slide.title }}</p>
        </div>
      </div>
      <!-- 分页器 -->
      <div class="swiper-pagination"></div>
    </div>
  </div>
  <!-- 分隔线 -->
  <hr class="divider" />
  <div class="background-box">
    <!-- 灰色半透明盒子 -->
    <div class="square-box">
      <!-- 容器 -->
      <div id="graph-container" style="width: 100%; height: 400px;"></div>
      <!-- 显示节点详细信息 -->
      <div *ngIf="selectedNodeDetails" class="node-details" [ngStyle]="{ top: position.top, left: position.left }">
        <p>{{ selectedNodeDetails }}</p>
        <ion-icon name="close-circle-outline" (click)="closeMessageBox()" class="close-icon"></ion-icon>
      </div>
    </div>
  </div>
</ion-content>