{% load i18n %}

<div class="mapboxgl-popup-content">
    <button class="mapboxgl-popup-close-button" type="button" aria-label="Close popup" data-bind="click: closePopup">×</button>
    <div class="hover-feature-title-bar">
        <div class="hover-feature-title">
            <span class="" data-bind="text: name"></span>
        </div>
    </div>
    <div class="hover-feature-body">
        <div class="hover-feature" data-bind="html: description"></div>
        <div class="hover-feature-metadata">
            <span data-bind="text: $root.translations.resourceModel + ':'" ></span>
            <span data-bind="text: graphName"></span>
        </div>
        <div class="hover-feature-metadata">
            <span data-bind="text: $root.translations.idString"></span>
            <span data-bind="text: resourceinstanceid"></span>
        </div>
    </div>
    <div class="hover-feature-footer">
        <a data-bind="click: function () {
            window.open(reportURL + resourceinstanceid);
        }" href="javascript:void(0)">
            <i class="ion-document-text"></i>
            <span data-bind="text: $root.translations.report"></span>
        </a>
    </div>
</div>
