{% 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-->
        </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-->
