<div class="{{#if(backdrop)}}modal{{else}}sp-modal-no-backdrop{{/if}}{{#if(active)}} active{{/if}} {{className}}">
    {{#if(backdrop)}}
    <div class="modal-overlay"></div>
    {{/if}}

    <div class="modal-container">
        {{#if(custom)}}
        <div class="modal-content">
            <content />
        </div>

        {{else}}

        <div class="modal-header">
            <button on:el:click="active = false" class="btn btn-clear float-right"></button>
            <div class="modal-title">{{title}}</div>
        </div>
        <div class="modal-body">
            <div class="content">
                <content />
            </div>
        </div>

        <div class="modal-footer">
        {{#for(action of actions)}}
            <button class="{{action.buttonClass}}" on:click="action.onclick(scope.event, scope.vm)">
                {{#if(action.iconClass)}}<span class="icon is-small"><i class="{{action.iconClass}}"></i></span>{{/if}}
                <span>{{action.label}}</span>
            </button>
        {{/for}}
        </div>
        {{/if}}
    </div>

</div>
