<!-- <iframe [src]="iframeUrl" style="width: 100%; height: 75vh; border: none;"></iframe> -->

<!-- Controls Section -->
<div class="header-controls px-4 py-2">
  <!-- Dashboard Selector -->
  <div class="dashboard-selector flex items-center space-x-4">
    <label class="selector-label text-lg font-medium text-gray-700">Select Dashboard:</label>
    <select (change)="onDashboardChange($event)" class="block w-full max-w-xs px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
      <option [disabled]="true" [selected]="true">-- Select a Dashboard --</option>
      <option *ngFor="let dashboard of dashboards" [value]="dashboard.dashboardId">
        {{ dashboard.thName }}
      </option>
    </select>
  </div>
</div>

<div style="width: 100%; height: 80vh;">
  <iframe
    *ngIf="dashboardUrl"
    [src]="dashboardUrl"
    frameborder="0"
    width="100%"
    height="100%"
    allowfullscreen
  ></iframe>
</div>
