---
const {title, showClose, maxWidth} = Astro.props
---

<style define:vars={{ maxWidth }}>
    #window {
        max-width: var(--maxWidth);
    }
</style>

<div class="background" id="window">
    <div class="window glass active" style="max-width: 100%">
        <div class="title-bar">
            <div class="title-bar-text">{title}</div>
            {
                showClose && 
                <div class="title-bar-controls">
                    <button aria-label="Close"></button>
                </div>
            }
        </div>
        <div class="window-body has-space">
            <slot />
        </div>
    </div>
</div>