<!--
/**
 * Copyright (c) 2016 maijindou.com. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="ui-tabs">
    <ul class="address-list ui-tabs-nav">

        <!-- ko foreach: { data: element.elems, as: 'element' } -->
            <li class="address-list-item" data-bind="css: { 'ui-state-active': element.active }, click: activate">
                <div class="address-list-item-actions">
                    <button class="action-delete" type="button" data-bind="click: $parent.removeAddress.bind($parent, element)">
                        <span data-bind="text: $parent.removeLabel"></span>
                    </button>
                </div>
                <!-- ko template: previewTpl --><!-- /ko -->
                <div data-bind="foreach: { data:  element.getRegion('head'), as: 'element' }">
                    <!-- ko template: element.getTemplate() --><!-- /ko -->
                </div>
            </li>
        <!-- /ko -->

        <li class="address-list-actions last">
            <button data-bind="click: element.addChild" type="button" class="scalable add">
                <span data-bind="text: element.addLabel"></span>
            </button>
        </li>
    </ul>
    <!-- ko foreach: { data: element.elems, as: 'element' } -->
    <div class="address-item-edit" data-bind="visible: element.active">
        <div class="address-item-edit-content">
            <fieldset class="admin__fieldset">
                <legend class="admin__legend">
                    <span data-bind="text: $parent.label"></span>
                </legend>
                <br>
                <!-- ko foreach: { data: element.getRegion('body'), as: 'element' } -->
                    <!-- ko template: element.getTemplate() --><!-- /ko -->
                <!-- /ko -->
            </fieldset>
        </div>
    </div>
    <!-- /ko -->
</div>