{% load i18n %}
<div class="loading-mask" data-bind="visible: loading"></div>

<!-- card container -->
<div class="resource-instance-card-component-container">
    <div class="resource-instance-card-component-toc">
        <div class="create-instance-menu-header">
            <span data-bind="text: $root.translations.dataThemes"></span>
        </div>
        <!-- ko if: topCards().length -->
        <!-- ko foreach: {data:topCards(), as: 'card'} -->
        <!-- ko if: card.model.visible()-->
        <div class="resource-instance-card-menu-item" 
            data-bind="text: card.model.name(),
                    click: function() {$parent.loadCard(card);},
                    clickBubble: false,
                    css: {'selected': card === $parent.card()}">
        </div>
        <!-- /ko -->
        <!-- /ko -->
        <!-- /ko -->
    </div>

    <div class="resource-instance-card-component-content">
        <div class="create-instance-header">
            <div class="new-instance-model-name">
                <span data-bind="text: $root.translations.new"></span>
                <span data-bind="text: graphName"></span>
            </div>
            <div class="close-new-step">
                <button class="btn btn-labeled btn-lg fa fa-arrow-right btn-primary" data-bind="click: function(){close()}, clickBubble: false">
                    <span data-bind="text: $root.translations.return"></span>
                </button>
            </div>
        </div>
        <div>
            <!-- ko if: tile() && card() -->
                <!-- ko component: {
                    name: cardComponentLookup[card().model.component_id()].componentname,
                    params: {
                        card: card(),
                        tile: tile(),
                        provisionalTileViewModel: provisionalTileViewModel,
                        reviewer: reviewer,
                        loading: loading,
                        form: $data,
                        pageVm: $root
                    }
                } --><!-- /ko -->
            <!-- /ko -->
        </div>
    </div>
</div>

