{% load webpack_static from webpack_loader %}

<div data-bind="if: ready" class="related-resources-filter">
    <!--ko ifnot: ko.unwrap(options.searchResultsVm.selectedResourceId) -->
    <div style="padding-top:5px; width:100%; height: 100%; background-color: white;">
    <div id="rr-splash" class="rr-splash">
        <!-- Image -->
        <div class="img-lg img-circle rr-splash-img-container" aria-hidden="true">
            <img class="rr-splash-img" src="{% webpack_static 'img/Workflow.png' %}" alt="Related Resources">
        </div>

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

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

    <!--ko if: ko.unwrap(options.searchResultsVm.selectedResourceId) -->
    <!-- ko component: {
        name: 'related-resources-graph',
        params: {
            resourceId: options.searchResultsVm.selectedResourceId
        }
    } --><!-- /ko -->
    <!-- /ko -->
</div>
