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

<!-- ko if: loading() -->
<div class="hover-feature-body hover-feature-loading">
    <i class="fa fa-spin fa-spinner"></i>
    {% trans "Loading..." %}
</div>
<!--/ko-->

<!-- ko if: !loading() -->
<!-- ko if: displayname -->
<div class="hover-feature-title-bar">
    {% block title %}
    <div class="hover-feature-title">
        <!-- Add nav to support accessing content for multiple features with overlapping geometry -->
        <span class="hover-feature-nav-left disabled"><i class="fa fa-angle-left"></i></span>
        <span class="" data-bind="text: displayname"></span>
        <span class="hover-feature-nav-right disabled"><i class="fa fa-angle-right"></i></span>
    </div>
    {% endblock title %}
</div>
<!--/ko-->
<!-- ko if: resourceinstanceid -->
<div class="hover-feature-body">
    {% block body %}
    <div class="hover-feature" data-bind="html: map_popup"></div>
    <div class="hover-feature-metadata">
        {% trans "Resource Model:" %}
        <span data-bind="text: graph_name"></span>
    </div>
    <div class="hover-feature-metadata">
        {% trans "ID:" %}
        <span data-bind="text: resourceinstanceid"></span>
    </div>
    {% endblock body %}
</div>
<!--/ko-->
<div class="hover-feature-footer">
    {% block footer %}
    <!-- ko if: resourceinstanceid -->
    <a data-bind="click: function () {
        window.open(reportURL + resourceinstanceid());
    }" href="javascript:void(0)">
        <i class="ion-document-text"></i>
        {% trans "Report" %}
    </a>
    <!--/ko-->
    <!-- ko if: showEditButton -->
    <a data-bind="click: function () {
        window.open(editURL + resourceinstanceid());
    }" href="javascript:void(0)">
        <i class="ion-ios-refresh-empty"></i>
        {% trans "Edit" %}
    </a>
    <!--/ko-->
    {% endblock footer %}
</div>
<!--/ko-->
