// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
import { setHost } from '../../../Directives/setHost';
// #endregion
/**
 * The template of the `FlowBoardColumnElement`.
 *
 * @public
 */
export function flowBoardColumnElementTemplate(e) {
    const hasItems = e.hasItems;
    const hasEmptySlot = e.hasSlotContent('empty');
    return html `
        <div part="container"
             .lang="${e.lang}"
             .dir="${e.dir}">
            <div part="header">
                <div part="title"
                     ?hidden="${!setHost(e, 'has-title', e.hasSlotContent('title'))}">
                    <slot name="title"></slot>
                </div>
                <div part="meta"
                     ?hidden="${!setHost(e, 'has-meta', e.hasSlotContent('meta'))}">
                    <slot name="meta"></slot>
                </div>
                <div part="actions"
                     ?hidden="${!setHost(e, 'has-actions', e.hasSlotContent('actions'))}">
                    <slot name="actions"></slot>
                </div>
            </div>
            <div part="body">
            ${when(!hasItems && hasEmptySlot, () => html `
                <div part="empty">
                    <slot name="empty"></slot>
                </div>
            `, () => html `
                <slot @slotchange="${() => e.handleSlotChange()}"></slot>
            `)}
            </div>
            <div part="footer"
                 ?hidden="${!setHost(e, 'has-footer', e.hasSlotContent('footer'))}">
                <slot name="footer"></slot>
            </div>
        </div>
    `;
}
//# sourceMappingURL=FlowBoardColumnElementTemplate.js.map