<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 role="menu" class="nav nav-tabs nav-tabsc8y">
        <li role="menuitem" 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: 300px">
      <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">
            <button
              type="button"
              title="{{ 'Settings' | translate }}"
              (click)="(false)"
              class="btn btn-dot dropdown-toggle c8y-dropdown"
              aria-haspopup="true"
            >
              <i c8yIcon="cog"></i>
            </button>
          </div>
        </div>
      </div>
      <div class="card-inner-scroll p-t-16">
        <p translate>Widget example content.</p>
      </div>
    </div>
  </div>
</div>