
<div class="image-gallery">
    <ul class="thumbnails" data-bind="visible: ${name}().length">
        <!-- ko foreach: ${name} -->
        <li>
        <div class="row-fluid">
            <div class="span4">
                <div class="projectLogo" data-toggle="popover" data-trigger="hover" data-title="Photo metadata" data-bind="popover: {placement:'top', content: function(){ return $(this).find('.metadata').html()} }">
                <a href=""
                   data-bind="attr:{href:getImageViewerUrl()}, fancybox: {nextEffect:'fade', preload:0, 'prevEffect':'fade', type: 'iframe', width: '80%', title: function(){ return $(this).next().find('.metadata').html()}}"
                   target="fancybox">
                    <img class="image-logo image-window" data-bind="attr:{title:name, src:thumbnailUrl}" onload="ecodata.forms.utils.findLogoScalingClass(this, 200, 150)">
                </a>
                </div>
            </div>
            <div class="span8">
                <div class="metadata">
                    <div data-bind="visible:name"><strong>Name:</strong> <span class="label-ellipsis" data-bind="text:name"></span></div>
                    <div data-bind="visible: attribution"><strong>Attribution:</strong> <span data-bind="text: attribution"></span></div>
                    <div data-bind="visible: licenceDescription"><strong>Licence:</strong> <span data-bind="text: licenceDescription"></span></div>
                    <div data-bind="visible: dateTaken"><strong>Date:</strong> <span data-bind="text: convertToSimpleDate(dateTaken())"></span></div>
                    <div data-bind="visible: notes"><strong>Notes:</strong> <span data-bind="text: notes"></span></div>
                    <div data-bind="visible: activityName && !fcConfig.hideProjectAndSurvey"><strong>Activity name:</strong> <a data-bind="attr:{href:getActivityLink()}, text: activityName" target="_blank"></a></div>
                    <div data-bind="visible: projectName && !fcConfig.hideProjectAndSurvey"><strong>Project name:</strong> <a data-bind="attr:{href:getProjectLink()}, text: projectName" target="_blank"></a></div>
                </div>
            </div>
        </div>
        </li>
        <!-- /ko -->
    </ul>

    <!-- ko if: ${name}().length == 0 -->
    <p>
        No images found.
    </p>
    <!-- /ko -->
</div>