<script>
    let showButtons = false;
    export let showSettings;
    export let containerElement;
</script>

<header>
    <button
        on:click={() => {
            showButtons = !showButtons;
        }}>[{showButtons ? "<" : ">"}]</button
    >
    {#if showButtons}
        <button
            on:click={() => {
                showSettings = !showSettings;
            }}
        >
            Settings</button
        >
        <button
            on:click={() => {
                if (containerElement) containerElement.requestFullscreen();
            }}>Fullscreen</button
        >
        <!--<button>Placeholder</button>-->
    {/if}
</header>

<style>
    header {
        width: 100vw;
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
