@if (modalRef.data.subtitle; as subtitle) {
  <h2 class="subtitle">{{ subtitle }}</h2>
}

<!-- QR Code Display Mode -->
@if (shouldShowQrCode(); as showQr) {
  @if (parsedContent(); as parsed) {
    @if (parsed.textBefore) {
      <p class="content">{{ parsed.textBefore }}</p>
    }

    <div class="qr-code-container">
      <qrcode
        [qrdata]="parsed.url!"
        [width]="200"
        [errorCorrectionLevel]="'M'"
        [margin]="2"
      ></qrcode>
    </div>

    @if (parsed.textAfter) {
      <p class="content">{{ parsed.textAfter }}</p>
    }
  }
} @else {
  <!-- Default Text Display Mode -->
  @if (modalRef.data.content; as content) {
    <p class="content">
      {{ content }}
    </p>
  }
}

@if (modalRef.data.actions; as actions) {
  <div class="actions">
    @for (action of actions; track action) {
      <button
        [class.selected]="action.selected"
        (click)="handleCommand(action.command)"
      >
        {{ action.label }}
      </button>
    }
  </div>
}

@if (modalRef.data.description; as description) {
  <p class="description">
    {{ description }}
  </p>
}
