<div class="flex flex-col items-start">
  <caption>Tip</caption>
  <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 close-icon" viewBox="0 0 20 20" fill="currentColor"
    (click)="close()">
    <path fill-rule="evenodd"
      d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
      clip-rule="evenodd" />
  </svg>

  <h1 [innerHTML]="title | safe: 'html'"></h1>

  <markdown emoji [data]="content" class="message"></markdown>

  <a *ngIf="!!url" [href]="url" target="_blank">{{ urlText }}</a>

  <div class="buttons">
    <div class="actions">
      <button *ngFor="let btn of buttons" (click)="runAction(btn)">{{ btn.name }}</button>
    </div>
    <button *ngIf="!!nextKey" class="btn" (click)="next()">Next</button>
  </div>
</div>
