// #region Imports
import { html, nothing } from '../../../../Dom/Html';
// #endregion
/**
 * Renders the template for the TileManagerElement.
 *
 * @param host - The tile manager element host.
 * @returns The template result.
 *
 * @public
 */
export function tileManagerElementTemplate(host) {
    return html `
        <div part="base"
             class="${host.maximizedTile ? 'has-maximized' : ''}"
             style="${buildGridStyle(host)}">
            <slot @slotchange="${() => host.handleSlotChange()}"></slot>
            ${host.maximizedTile
        ? html `<div part="maximized-overlay" class="maximized-overlay"></div>`
        : nothing}
        </div>
    `;
}
/**
 * Builds the grid CSS style for the tile manager.
 *
 * @param host - The tile manager element host.
 * @returns The style string.
 *
 * @private
 */
function buildGridStyle(host) {
    const styles = [];
    // Column template
    if (host.columnCount !== null && host.columnCount > 0) {
        styles.push('--tile-manager-columns: repeat(' + host.columnCount.toString() + ', 1fr)');
    }
    else if (host.minColumnWidth !== null && host.minColumnWidth > 0) {
        styles.push('--tile-manager-columns: repeat(auto-fit, minmax(' + host.minColumnWidth.toString() + 'px, 1fr))');
    }
    else {
        styles.push('--tile-manager-columns: repeat(auto-fit, minmax(200px, 1fr))');
    }
    // Row template
    if (host.minRowHeight !== null && host.minRowHeight > 0) {
        styles.push('--tile-manager-rows: ' + host.minRowHeight.toString() + 'px');
    }
    else {
        styles.push('--tile-manager-rows: auto');
    }
    // Gap
    if (host.gap !== null && host.gap >= 0) {
        styles.push('--tile-manager-gap: ' + host.gap.toString() + 'px');
    }
    return styles.join('; ');
}
//# sourceMappingURL=TileManagerElementTemplate.js.map