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

<!-- ko if: loading() -->
<div class="hover-feature-body hover-feature-loading">
    <i class="fa fa-spin fa-spinner"></i>
    <span data-bind="text: $root.translations.loading + '...'"></span>
</div>
<!--/ko-->

<!-- ko if: !loading() -->
    <!-- ko foreach: popupFeatures -->
        <!-- ko if: active -->
            <!-- ko if: displayname -->
            <div class="hover-feature-title-bar">
                {% block title %}
                <div style="display: flex;">
                    <div data-bind="visible: $parent.popupFeatures.length > 1, click: function(){$parent.advanceFeature('left')}" class="hover-feature-nav-left"><i class="fa fa-angle-left"></i></div>
                    <div data-bind="visible: $parent.popupFeatures.length > 1, click: function(){$parent.advanceFeature('right')}" class="hover-feature-nav-right"><i class="fa fa-angle-right"></i></div>
                    <div class="hover-feature-title" data-bind="text: displayname"></div>
                </div>
                {% endblock title %}
            </div>
            <!--/ko-->
            <div class="hover-feature-body">
                {% block body %}
                <div class="hover-feature" data-bind="html: map_popup"></div>
                <!-- ko if: resourceinstanceid -->
                <div class="hover-feature-metadata-block">
                    <div class="hover-feature-metadata">
                        <span data-bind="text: $root.translations.resourceModel"></span>
                        <span data-bind="text: graph_name"></span>
                    </div>
                    <div class="hover-feature-metadata">
                        <span data-bind="text: $root.translations.idString"></span>
                        <span data-bind="text: resourceinstanceid"></span>
                    </div>
                </div>
                <!--/ko-->
                {% endblock body %}
            </div>
            <div class="hover-feature-footer">
                <div>
                    {% block footer %}
                    <!-- ko if: resourceinstanceid -->
                    <a data-bind="click: function () {
                        window.open(reportURL + ko.unwrap(resourceinstanceid));
                    }" href="javascript:void(0)">
                        <i class="ion-document-text"></i>
                        <span data-bind="text: $root.translations.report"></span>
                    </a>
                    <!--/ko-->
                    <!-- ko if: showEditButton -->
                    <a data-bind="click: function () {
                        window.open(editURL + ko.unwrap(resourceinstanceid));
                    }" href="javascript:void(0)">
                        <i class="ion-ios-refresh-empty"></i>
                        <span data-bind="text: $root.translations.edit"></span>
                    </a>
                    <!--/ko-->
                    <!-- ko if: showFilterByFeatureButton -->
                    <a data-bind="click: function() {sendFeatureToMapFilter($data);}, visible: showFilterByFeature($data)" href="#">
                        <i class="fa fa-search"></i>
                        <span data-bind="text: $root.translations.filterByFeature"></span>
                    </a>
                    <!-- /ko -->
                </div>
                <!-- ko if: $parent.popupFeatures.length > 1 -->
                <div style="display: flex; flex-direction: row; width: 60px; justify-content: space-evenly; font-weight: 500;">
                    <div class="hover-feature-instance-counter" data-bind="text: 1 + $parent.popupFeatures.findIndex(feature => feature.active());"></div>
                    <span data-bind="text: $root.translations.of"></span>
                    <div style="padding-left: 3px;" data-bind="text: $parent.popupFeatures.length"></div>
                </div>
                <!--/ko-->
                {% endblock footer %}
            </div>
        <!--/ko-->
    <!--/ko-->
<!--/ko-->
