extends messages-layout

block content
  div.transcript-page
    header.transcript-header
      if brandLogo
        img.transcript-brand-logo(src=brandLogo alt=(brandName || 'Brand') + ' logo')
      //- else if !brandLogo && !brandName
      //-   img.transcript-brand-logo(src="https://tiledesk.com/wp-content/uploads/2022/07/tiledesk_v2.png" alt="Tiledesk logo")

    header.transcript-title-container
      h1.transcript-title Chat transcript

    main.transcript-wrapper
      ol.transcript-thread(role="list")
        each message in messages
          li.transcript-msg
            div.transcript-msg-sender #{message.senderFullname || 'Unknown'}
            div.transcript-msg-body #{message.text}
            div.transcript-msg-meta
              time.transcript-msg-time(datetime=message.createdAt ? message.createdAt.toISOString() : '') #{message.transcriptDisplayTime}
            //-   span.transcript-msg-sender #{message.senderFullname || 'Unknown'}

    footer.transcript-footer
      if brandName
        p.transcript-powered-by Powered by #{brandName}
      else
        p.transcript-powered-by Powered by #[a(href="https://tiledesk.com/", target="_blank", rel="noopener noreferrer") Tiledesk]