{% load i18n %}


<div class='tabbed-workflow-step-body'>
    <!-- ko with: $data.step -->
        <div 
            class='workflow-step-loading-mask loading-mask' 
            data-bind="visible: $data.loading() || $data.saving()"
        ></div>

        <!--ko if: informationBoxData -->
        <div class='tabbed-workflow-step-information-box-container' 
            data-bind="
                css: {
                    seen: informationBoxData().displayed,
                    unseen: !informationBoxData().displayed,
                }">
            <div style="padding: 20px; padding-bottom: unset;">
                <div class='tabbed-workflow-step-information-box'>
                    <h4 data-bind="text: informationBoxData().heading"></h4>
                    <span style="white-space: pre-line" data-bind="text: informationBoxData().text"></span>

                    <div>
                        <span class="workflow-information-box-toggle"
                            data-bind="
                                text: $root.translations.dismiss,
                                click: toggleInformationBox
                            "
                            style="
                                position: absolute;
                                right: 20px;
                                font-size: smaller;
                                cursor: pointer;
                                top: 20px;
                            "
                        >
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- /ko -->

        <div data-bind="css: componentBasedStepClass || 'workflow-component-based-step'">
            <!-- ko foreach: { data: pageLayout(), as: 'layoutSection'} -->
            <div class="workflow-component-based-step-wrapper"
                data-bind="style: { 'height': $parent.pageLayout().length === 1 && '100%' }"
            >
                <!-- ko if: layoutSection[0] -->
                <div style="padding: 2px;">
                    <h4
                        style="font-weight: unset;"
                        data-bind="text: layoutSection[0]"
                    ></h4>
                </div>
                <!-- /ko -->

                <!-- ko if: !$parent.loading() && !$parent.saving() -->
                    <!-- ko foreach: { data: layoutSection[1], as: 'uniqueInstanceName'} -->
                        <!-- ko component: {
                            name: 'workflow-component-abstract',
                            params: {
                                component: $parents[1].workflowComponentAbstractLookup()[uniqueInstanceName],
                                plugin: $parents[2].plugin,
                            }
                        } --><!-- /ko -->
                    <!-- /ko -->
                <!-- /ko -->
            </div>
            <!-- /ko -->
        </div>
    <!-- /ko -->
</div>

