{{^cooked}}
<aside class="onebox chat-onebox">
  <article class="onebox-body chat-onebox-body">
    <h3 class="chat-onebox-title">
      <a href="{{url}}">
        {{#is_category}}
          <span class="category-chat-badge" style="color: #{{color}}">
            <svg class="fa d-icon d-icon-d-chat svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#d-chat"></use></svg>
          </span>
        {{/is_category}}
        <span class="clear-badge">{{{channel_name}}}</span>
      </a>
    </h3>
    {{#description}}
      <div class="chat-onebox-description">{{description}}</div>
    {{/description}}
    <div class="chat-onebox-members-count">{{user_count_str}}</div>
    <div class="chat-onebox-members">
      {{#users}}
        <a class="trigger-user-card" data-user-card="{{username}}" aria-hidden="true" tabindex="-1">
          <img loading="lazy" alt="{{username}}" width="30" height="30" src="{{avatar_url}}" class="avatar">
        </a>
      {{/users}}
      {{remaining_user_count_str}}
    </div>
  </article>
</aside>
{{/cooked}}

{{#cooked}}
<div class="chat-transcript" data-message-id="{{message_id}}" data-username="{{username}}" data-datetime="{{created_at_str}}" data-channel-name="{{channel_name}}" data-channel-id="{{channel_id}}">
  <div class="chat-transcript-user">
    <div class="chat-transcript-user-avatar">
      <a class="trigger-user-card" data-user-card="{{username}}" aria-hidden="true" tabindex="-1">
        <img loading="lazy" alt="{{username}}" width="20" height="20" src="{{avatar_url}}" class="avatar">
      </a>
    </div>
  <div class="chat-transcript-username">{{username}}</div>
    <div class="chat-transcript-datetime">
      <a href="{{url}}" title="{{created_at}}">{{created_at}}</a>
    </div>
    <a class="chat-transcript-channel" href="/chat/c/-/{{channel_id}}">
      {{#is_category}}
        <span class="category-chat-badge" style="color: #{{color}}">
          <svg class="fa d-icon d-icon-d-chat svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#d-chat"></use></svg>
        </span>
      {{/is_category}}
      {{#is_topic}}
        <span class="topic-chat-icon">
          <svg class="fa d-icon d-icon-far-comments svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#far-comments"></use></svg>
        </span>
      {{/is_topic}}
      {{channel_name}}
    </a>
  </div>
  <div class="chat-transcript-messages">{{{cooked}}}</div>
</div>
{{/cooked}}