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

<div id="search-results-list" style="display: none;" role="list" tabindex="-1" data-bind="foreach: results, visible: true,
    attr: {'aria-label': $root.translations.searchResults}
">

    <div class="search-listing" role="listitem" data-bind="event: { mouseover: mouseoverInstance, mouseout: mouseoverInstance('')}, css: {'selected': selected()}">
        <div style="display: flex">
            <div class="search-thumbnail-container">
                <div 
                    style="display: flex; align-items: center; margin: 10px; background-color: lightgrey;" 
                    data-bind="
                        visible: thumbnail,
                        event: { 
                            mouseover: mouseoverThumbnail,
                            mouseout: mouseoutThumbnail,
                        }
                    "
                >
                    <img class="search-thumbnail-image" data-bind="attr:{src: thumbnail}" alt="">
                </div>
                <img class="search-hover-image" data-bind="attr:{src: thumbnail}" alt="">
            </div>

            <div style="flex: 1">
                <p 
                    class="search-listing-title" 
                    data-bind="css: {'i18n-alt': $parent.alternativelanguage}"
                >
                    <a class="search-candidate-title" href="#" data-bind="onEnterkeyClick, onSpaceClick, click: $parent.viewReport.bind($parent),
                        attr: {'aria-label': $root.translations.viewResourceReport(displayname)},
                    ">
                        <i class="search-listing-icon" data-bind="css: iconclass"></i> 
                        <span data-bind="text: displayname"></span>
                    </a>
                </p>

                <div class="search-listing-body" data-bind="html: displaydescription">
                    
                </div>
            </div>
        </div>
        <div class="search-listing-footer">
            <div style="flex-grow: 1;">
                <!--ko if: provisional_resource == 'true' -->
                <span class="provisional-edits">
                    <i class="fa fa-exclamation-circle"></i>
                    <span data-bind="text: $root.translations.provisional"></span>
                </span>
                <!--/ko-->

                <!--ko if: provisional_resource == 'partial' && $parent.userIsReviewer -->
                <span class="provisional-edits">
                    <i class="fa fa-exclamation-circle"></i>
                    <span data-bind="text: $root.translations.provisional"></span>
                </span>
                <!--/ko-->

                <!-- ko if: !!$parent.details -->
                <button class="search-candidate-link" data-bind="onEnterkeyClick, onSpaceClick, click: showDetails,
                    attr: {'aria-label': $root.translations.viewResourceDetails(displayname)},
                ">
                    <i class="fa fa-info-circle"></i>
                    <span data-bind="text: $root.translations.details"></span>
                </button>
                <!-- /ko -->

                <!--ko if: canEdit -->
                <a class="search-candidate-link" href="#" data-bind="onEnterkeyClick, onSpaceClick, click: $parent.editResource.bind($parent),
                    attr: {'aria-label': $root.translations.editResource(displayname)},
                ">
                    <i class="ion-ios-refresh-empty"></i>
                    <span data-bind="text: $root.translations.edit"></span>
                </a>
                <!--/ko-->
                
                <!-- ko if: !!$parent.mapFilter -->
                <button class="search-candidate-link" data-bind="visible: point, click: mapLinkClicked, 
                    attr:{'aria-label': $root.translations.viewMap},
                ">
                    <i class="fa fa-map-marker"></i>
                    <span data-bind="text: $root.translations.map"></span>
                </button>
                <!-- /ko -->
            </div>

            <div>
                <!--ko ifnot: $root.resourceEditorContext -->
                    <!--ko if: !!$parent.relatedResourcesManager && canRead -->
                    <button class="search-candidate-link" data-bind="onEnterkeyClick, onSpaceClick, click: showrelated, 
                        attr: {'aria-label': $root.translations.viewRelatedResources(displayname)},
                    ">
                        <i class="fa fa-code-fork"></i>
                        <span data-bind="text: $root.translations.relatedResources"></span>
                    </button>
                    <!--/ko-->
                <!--/ko-->

                <!--ko if: $root.resourceEditorContext -->
                    <!--ko if: relatable & $root.editingInstanceId != resourceinstanceid -->
                    <button class="search-candidate-link" data-bind="onEnterkeyClick, onSpaceClick, click: function(val){relationshipcandidacy(val); showrelated()},
                        attr: {'aria-label': $root.translations.viewRelatedResources(displayname)},
                    ">
                        <i class="fa fa-code-fork"></i>
                        <span data-bind="text: $root.translations.relateResource"></span>
                    </button>
                    <!--/ko-->
                    <!--ko if: relatable == false || $root.editingInstanceId == resourceinstanceid -->
                    <span class="search-candidate-link unrelatable-search-result">
                        <i class="fa fa-code-fork"></i>
                        <span data-bind="text: $root.translations.cannotBeRelated"></span>
                    </span>
                    <!--/ko-->
                <!--/ko-->
            </div>
        </div>
    </div>

</div>
