{% load static %}
{% load template_tags %}
{% load i18n %}

<!--ko if: loading() -->
<div class='loading-mask'></div>
<!--/ko-->
<!-- ko ifnot: loading() -->
<div class="resource-report-abstract-container">
    <div class="resource-component-abstract"
        data-bind='
            component: { 
                name: $data.template().componentname,
                params: {
                    report: $data.report(),
                    summary: $data.summary,
                    configForm: $data.configForm,
                    configType: $data.configType,
                }
            },
            css: { reportSummary: $data.summary }
        '
    ></div>

    <!-- ko ifnot: $data.summary -->
    <footer 
        style="
            background: #f8f8f8; 
            display: flex;
            height: 50px;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        "
    >
        <div data-bind="text: $root.translations.arches + ' ' + $data.version"></div>
        <div>
            <a href="http://archesproject.org" target="_blank">http://archesproject.org</a>
        </div>
    </footer>
    <!--/ko-->
</div>
<!-- /ko -->
