<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="fieldset-wrapper"
     css="$data.additionalClasses"
     attr="'data-level': $data.level, 'data-index': index"
     data-bind="visible: $data.visible === undefined ? true: $data.visible">
    <div class="fieldset-wrapper-title"
         attr="tabindex: !collapsible ? -1 : 0,
               'data-state-collapsible': collapsible ? opened() ? 'open' : 'closed' : null"
         click="toggleOpened"
         keyboard="13: toggleOpened"
         if="label">

        <strong css="'admin__collapsible-title': collapsible,
                      title: !collapsible,
                      '_changed': changed,
                      '_loading': loading,
                      '_error': error">
            <span translate="label"></span>
            <span class="admin__page-nav-item-messages" if="collapsible">
                <span class="admin__page-nav-item-message _changed">
                    <span class="admin__page-nav-item-message-icon"
                          role="tooltip"
                          tabindex="0"
                          aria-labelledby="changed-message-tooltip">
                    </span>
                    <span class="admin__page-nav-item-message-tooltip" id="changed-message-tooltip"
                          data-bind="i18n: 'Changes have been made to this section that have not been saved.'">
                    </span>
                </span>
                <span class="admin__page-nav-item-message _error">
                    <span class="admin__page-nav-item-message-icon"
                          role="tooltip"
                          tabindex="0"
                          aria-labelledby="error-message-tooltip">
                    </span>
                    <span class="admin__page-nav-item-message-tooltip" id="error-message-tooltip"
                          data-bind="i18n: 'This tab contains invalid data. Please resolve this before saving.'">
                    </span>
                </span>
                <span class="admin__page-nav-item-message-loader">
                    <span class="spinner">
                       <span repeat="8"></span>
                    </span>
               </span>
            </span>
        </strong>
    </div>

    <div class="admin__fieldset-wrapper-content"
         css="'admin__collapsible-content': collapsible, '_show': opened, '_hide': !opened()">
        <fieldset
                if="opened() || _wasOpened || initializeFieldsetDataByDefault"
                class="admin__fieldset"
                each="data: elems, as: 'element'" render=""></fieldset>
    </div>
</div>
