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

<div class="search-result-details">
    <!--ko if: loading() -->
    <div class='loading-mask'></div>
    <!--/ko-->

    <!-- ko ifnot: loading() -->
        <!--ko if: report() -->
        <div class="resource-report" tabindex="-1" data-bind="component: {
            name: 'resource-report-abstract',
            params: {
                report: report(),
                summary: true
            }
        }, attr: {'aria-label': $root.translations.resourceDetailsReport( report().report_json.displayname )}"></div>
        <!--/ko-->
        <!--ko ifnot: report() -->
        <div class="search-result-details-splash">
            <div class="rr-splash">
                <!-- Image -->
                <div class="img-lg img-circle rr-splash-img-container">
                    <i class="fa fa-info"></i>
                </div>

                <!-- Splash Title -->
                <div class="rr-splash-title">
                    <span data-bind="text: $root.translations.resourceDetails"></span>
                </div>

                <!-- Splash Instructions -->
                <div class="rr-splash-description">
                    <span data-bind="text: $root.translations.resourceDetailsText, attr: {'aria-label': $root.translations.noDetailsShown}" aria-live="polite"></span>
                </div>
            </div>
        </div>
        <!--/ko-->
    <!-- /ko -->

</div>
