// #region Imports
import { html } from '../../../../Dom/Html';
import { RendererServiceLocator } from '../../../../Dom/Renderer';
import { when } from '../../../Directives/Directives';
import { Appearance } from '../../../Types/Appearance';
// #endregion
/**
 * The template of the {@link CardElement}.
 *
 * @public
 */
export function cardElementTemplate(e) {
    const setHost = (host, attribute, hasAttribute) => {
        if (hasAttribute) {
            RendererServiceLocator.current.setAttribute(host, attribute);
        }
        else {
            RendererServiceLocator.current.removeAttribute(host, attribute);
        }
        return hasAttribute;
    };
    return html `
        ${when(!e.disabled && e.appearance !== Appearance.Outline, () => html `
        <mosaik-elevation part="elevation"
                          .weigh="${e.elevation}"
                          @connected="${(evt) => evt.target.attach(e)}"></mosaik-elevation>
        `)}
        <div part="cover"
             ?hidden="${!setHost(e, 'has-cover', e.hasSlotContent('cover'))}">
            <slot name="cover"></slot>
        </div>
        <div part="heading"
             class="${e.inlineMedia ? 'inline' : ''}">
            <div part="media"
                 class="${e.inlineMedia ? 'inline' : ''}"
                 ?hidden="${!setHost(e, 'has-media', e.hasSlotContent('media'))}">
                <slot name="media"></slot>
            </div>
            <div part="header"
                 dir="${e.dir}"
                 ?hidden="${!setHost(e, 'has-header', e.hasSlotContent('header'))}">
                <slot name="header">
                    ${when(e.header.trim() || e.subHeader.trim(), () => html `
                    <mosaik-card-header .text="${e.header}"
                                        .subText="${e.subHeader}"
                                        .formatter="${e.formatter}"
                                        .dir="${e.dir}"
                                        .lang="${e.lang}"></mosaik-card-header>
                    `)}
                </slot>
            </div>
        </div>
        <div part="content"
             ?hidden="${!setHost(e, 'has-content', e.hasSlotContent('content'))}">
            <slot name="content">
                ${when(e.content.trim(), () => html `
                <mosaik-card-content .text="${e.content}"
                                     .formatter="${e.formatter}"
                                     .dir="${e.dir}"
                                     .lang="${e.lang}"></mosaik-card-content>
                `)}
            </slot>
        </div>
        <div part="actions"
             ?hidden="${!setHost(e, 'has-actions', e.hasSlotContent('actions'))}">
            <slot name="actions"></slot>
        </div>
        <div part="footer"
             ?hidden="${!setHost(e, 'has-footer', e.hasSlotContent('footer'))}">
            <slot name="footer"></slot>
        </div>
    `;
}
//# sourceMappingURL=CardElementTemplate.js.map