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

<div class="search-container saved-search-container relative" style="overflow-y: scroll;">

    <div data-bind="visible: items().length === 0">
        <div id="rr-splash" class="rr-splash">
            <!-- Image -->
            <div class="img-lg img-circle rr-splash-img-container">
                <img class="rr-splash-img" src="{% static 'img/approval.png' %}" alt="Saved Search">
            </div>

            <!-- Splash Title -->
            <div class="rr-splash-title">{% trans "Saved Search" %}</div>

            <!-- Splash Instructions -->
            <div class="rr-splash-description">{% trans "The Arches site administrator" %}</div>
            <div class="rr-splash-description">{% trans "hasn't saved any searches yet." %}</div>
        </div>
    </div>

    <div id="" class="saved-search-grid">
        <div class="" data-bind="smartresize: {childclass: '.ss-grid-item'}, foreach: items">
            <!-- Saved Search Query -->
            <div class="ss-grid-item relative">
                    <div class="search-caption-activeWrap">
                        <div class="search-caption-alignCenter">
                            <div class="search-caption-body">
                                <div class="search-query">
                                    <a class="search-query-link-captions" data-bind="click: function(){window.location.href = searchUrl; }"><i class="rounded-x fa fa-search"></i> <span data-bind="text: title"></span></a>
                                    <div class="search-query-desc">
                                        <span data-bind="html: subtitle"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                <!-- ko if: image -->    
                <img class="img-responsive" alt="Image" data-bind="attr: {src: image}">
                <!-- /ko -->
            </div>
        </div>
    </div>
</div>
