<div class="card card-custom example example-compact gutter-b" *ngIf="viewItem">
  <div class="card-header">
    <div class="card-title">
      <h3 class="card-label">{{ viewItem.beforeCodeTitle }}</h3>
    </div>
    <div class="card-toolbar">
      <div class="example-tools justify-content-center">
        <span class="example-toggle" ngbTooltip="View code"></span>
        <span class="example-copy" ngbTooltip="Copy code"></span>
      </div>
    </div>
  </div>
  <div class="card-body">
    <div>
      <!--begin::Code example-->
      <div class="example-code mb-5">
        <ul
          ngbNav
          #nav="ngbNav"
          class="example-nav nav nav-tabs nav-bold nav-tabs-line nav-tabs-line-2x"
        >
          <li *ngIf="viewItem.htmlCode" ngbNavItem class="nav-item">
            <a ngbNavLink class="nav-link">HTML</a>
            <ng-template ngbNavContent>
              <div class="example-highlight">
                <pre><code [highlight]="viewItem.htmlCode"></code></pre>
              </div>
            </ng-template>
          </li>
          <li *ngIf="viewItem.tsCode" ngbNavItem class="nav-item">
            <a ngbNavLink class="nav-link">TypeScript</a>
            <ng-template ngbNavContent>
              <div class="example-highlight">
                <pre><code [highlight]="viewItem.tsCode"></code></pre>
              </div>
            </ng-template>
          </li>
          <li *ngIf="viewItem.cssCode" ngbNavItem class="nav-item">
            <a ngbNavLink class="nav-link">CSS</a>
            <ng-template ngbTabContent>
              <div class="example-highlight">
                <pre><code [highlight]="viewItem.cssCode"></code></pre>
              </div>
            </ng-template>
          </li>
          <li *ngIf="viewItem.scssCode" ngbNavItem class="nav-item">
            <a ngbNavLink class="nav-link">SASS</a>
            <ng-template ngbTabContent>
              <div class="example-highlight">
                <pre><code [highlight]="viewItem.scssCode"></code></pre>
              </div>
            </ng-template>
          </li>

          <li *ngIf="viewItem.jsonCode" ngbNavItem class="nav-item">
            <a ngbNavLink class="nav-link">JSON</a>
            <ng-template ngbTabContent>
              <div class="example-highlight">
                <pre><code [highlight]="viewItem.jsonCode"></code></pre>
              </div>
            </ng-template>
          </li>
        </ul>

        <div [ngbNavOutlet]="nav" class="mt-2"></div>
      </div>
      <!--end::Code example-->

      <!-- view -->
      <ng-content></ng-content>
      <!-- / view -->

      <!-- after Code Title -->
      <div
        *ngIf="viewItem.afterCodeTitle"
        class="kt-portlet__preview"
        [innerHTML]="viewItem.afterCodeTitle | safe: 'html'"
      ></div>
      <!-- / after Code Title -->

      <!-- after Code Description -->
      <div
        *ngIf="viewItem.afterCodeDescription"
        class="kt-portlet__preview"
        [innerHTML]="viewItem.afterCodeDescription | safe: 'html'"
      ></div>
    </div>
  </div>
</div>
