<ng-template #jsonSnippet>
  <div class="snippet">
    <!-- in case sample is not available for some reason -->
    <pre *ngIf="sample == undefined"> Sample unavailable </pre>
    <div class="action-buttons">
      <span copy-button [copyText]="sample" class="hint--top-left hint--inversed"> <a>Copy</a> </span>
      <span> <a *ngIf="enableButtons" (click)="expandAll()">Expand all</a> </span>
      <span> <a *ngIf="enableButtons" (click)="collapseAll()">Collapse all</a> </span>
    </div>
    <pre [innerHtml]="sample | jsonFormatter"></pre>
  </div>
</ng-template>

<tabs *ngIf="xmlSample; else jsonSnippet">
  <tab tabTitle="JSON">
    <ng-container *ngTemplateOutlet="jsonSnippet"></ng-container>
  </tab>
  <tab tabTitle="XML" *ngIf="xmlSample">
    <div class="snippet">
      <div class="action-buttons">
        <span copy-button [copyText]="xmlSample" class="hint--top-left hint--inversed"> <a>Copy</a> </span>
      </div>
      <pre class="xml-sample" [innerHtml]="xmlSample | prism:'xml'"></pre>
    </div>
  </tab>
</tabs>