<tiny-sidebar-form-header>
    <div class="bar">
        <div class="bar__main">
            { props.title }
        </div>
        <div class="bar__end">
            <button class="button button--icon button--hover-icon-contrast m-top-3 m-bottom-3" type="button" onclick={ () => { handleClose() } }>
                <svg class="icon fill-danger" aria-hidden="true">
                    <use xlink:href="/symbol-defs.svg#icon-close"></use>
                </svg>
            </button>
        </div>
    </div>

    <script>

        import { sidebarFormStore } from '@tiny-components/sidebar-form'

        export default {
            handleClose() {
                sidebarFormStore.close(this.props.name)
            }
        }

    </script>
</tiny-sidebar-form-header>