include heading.pug
include header.pug
include sidebar.pug

mixin dialog(title)
    - const slots = {}

    mixin slot(key)
        - slots[key] = block

    -
        block ? block() : undefined 

        let classes = {
            'o-dialog': true,
        }

        let bodyClass = {
            'o-dialog__body': true
        }
        if (attributes.bodyClass) {
            bodyClass[attributes.bodyClass] = true;
        }

    div(class=classes)
        if slots['sidebar-header']
            +header(class='o-dialog__sidebar-header')
                - slots['sidebar-header']()

        if slots.sidebar
            +sidebar(class='o-dialog__sidebar')
                - slots.sidebar()

        +header(class='o-dialog__header')
            if slots.header
                - slots.header()
            else
                if title
                    +div-heading('sm')(class='o-dialog__label')= title
            +action-button(round=true quiet=true icon='x' class='o-dialog__close-btn')

        section(class=bodyClass)
            if slots.body
                - slots.body()

        footer.o-dialog__footer.l-button-group
            +a-button(outline=true)= 'Cancel'
            = ' '
            +a-button(variant='accent')= 'Continue'