<header class="flex flex-row items-center justify-between mb-4">
  <h1 class="text-sm font-light m-0">
    {{ dialogRef.data.type === "setting" ? "Settings" : "Profile" }} Export
  </h1>

  <svg role="img" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
    class="w-3 h-3 text-secondary hover:text-primary cursor-pointer" (click)="dialogRef.close()">
    <path fill="currentColor"
      d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
    </path>
  </svg>
</header>

<markdown lineNumbers [data]="content" emoji class="overflow-auto"></markdown>

<div class="flex flex-row justify-end gap-2 items-center">
  <button (click)="copyToClipboard()">Copy To Clipboard</button>
  <button (click)="download()">Save</button>
</div>