// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { Orientation } from '../../../Types/Orientation';
import { Size } from '../../../Types/Size';
// #endregion
/**
 * The template of the {@link ChatMessageElement}.
 *
 * @public
 */
export function chatMessageElementTemplate(e) {
    return html `
        <mosaik-stack part="root"
                      .dir="${e.dir}"
                      .orientation="${Orientation.Horizontal}"
                      .reverse="${!e.reply}">
            <slot name="avatar"
                  @slotchange="${(x) => e.onSlotChange(x)}"></slot>
            <div part="content">
                <div part="message">
                    ${when(!e.isBusy, () => html `
                    <div part="header">
                        <slot name="author">
                            ${when(e.author.trim(), () => html `
                            <mosaik-text part="author"
                                        .dir="${e.dir}"
                                        .text="${e.author}"
                                        .formatter="${e.formatter}"
                                        .truncate="${true}"></mosaik-text>
                            `)}
                        </slot>
                        <slot name="at">
                            <mosaik-text part="at"
                                        .dir="${e.dir}"
                                        .text="${e.at}"
                                        .formatter="${e.formatter}"></mosaik-text>
                        </slot>
                    </div>
                    `)}
                    <div part="content">
                        <slot name="text">
                            ${when(e.isBusy, () => html `
                            <div part="busy">
                                <mosaik-dot part="dot"
                                            .size="${Size.Tiny}"></mosaik-dot>
                                <mosaik-dot part="dot"
                                            .size="${Size.Tiny}"></mosaik-dot>
                                <mosaik-dot part="dot"
                                            .size="${Size.Tiny}"></mosaik-dot>
                            </div>
                            `, () => html `
                            <mosaik-text part="text"
                                        .dir="${e.dir}"
                                        .text="${e.text}"
                                        .formatter="${e.formatter}"
                                        .wrap="${true}"></mosaik-text>
                            `)}
                        </slot>
                    </div>
                </div>
                <slot name="attachment"></slot>
            </div>
        </mosaik-stack>
        <div part="reactions">
            <slot name="reaction"></slot>
        </div>
    `;
}
//# sourceMappingURL=ChatMessageElementTemplate.js.map