<div class="legend form-block" translate>Preview</div>
<label *ngIf="tab" translate>Tab and layout</label>
<label *ngIf="!tab" translate>Layout</label>
<div class="dashboard-preview-slot" [ngClass]="previewClasses">
  <div
    class="page-tabs page-tabs-horizontal navigator-open p-absolute overflow-hidden"
    style="left: 0; margin: 0 15px;"
    *ngIf="tab"
  >
    <div class="tabContainer hidden-xs">
      <ul class="nav nav-tabs nav-tabsc8y">
        <li class="active" style="left: 16px;">
          <a routerlinkactive="" title="{{ tab.name }}">
            <i class="text-primary" [c8yIcon]="tab.icon"></i>
            <span class="txt">{{ tab.name }}</span></a
          >
        </li>
      </ul>
    </div>
    <div class="visible-xs mobile-tabs"></div>
  </div>
  <div [ngClass]="{ 'm-t-64': !!tab }">
    <div class="card card-dashboard" style="height: 360px;">
      <div class="card-header-actions" style="z-index: 8;">
        <div class="card-title">
          <span translate>Widget title</span>
        </div>
        <div class="header-actions">
          <div class="optionsBtn dropdown">
            <a href="" (click)="(false)" class="dropdown-toggle c8y-dropdown">
              <i c8yIcon="cog"></i>
            </a>
          </div>
        </div>
      </div>
      <div class="card-inner-scroll p-t-16">
        <p translate>Widget example content.</p>
      </div>
    </div>
  </div>
</div>