{% load i18n %}
{% load common_filters %}


{% comment %}
<!--
  Copyright (C) 2011 University of Dundee & Open Microscopy Environment.
  All rights reserved.

  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as
  published by the Free Software Foundation, either version 3 of the
  License, or (at your option) any later version.

  This program is distributed in the hope that it will be useful,
  but WITHOUT ANY WARRANTY; without even the implied warranty of
  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
  GNU Affero General Public License for more details.

  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
-->
{% endcomment %}

    <script type="text/javascript">
        $(document).ready(function(){

            var iids = [];
            $(".search_thumb").each(function(){
                iids.push(this.id);
            });
            var thumbnailsBatch = {{ thumbnails_batch|default:50|json_dumps|safe }};

            OME.load_thumbnails(
                "{% url 'get_thumbnails_json' %}",
                iids, thumbnailsBatch,
                "{% static 'webgateway/img/image128.png' %}"
            );

            // double-click handler on image - launches image viewer
            //$("table#dataTable tbody tr").dblclick(function(event) {
                // TODO: path to the object should be rendered on the server side
            //});

            // single click handler on image (container). Selection then update toolbar & metadata pane
            $("table#dataTable tbody tr").click(function(event) {
                OME.handleTableClickSelection(event);
            });
            
            // plugin to handle drag-select of images
            $("table#dataTable tbody").selectable({
                filter: 'tr',
                distance: 2,
                stop: function(){  
                    var selected = $('tr.ui-selected', this);
                    OME.table_selection_changed(selected);
                },
                start: function(){
                }
            });
            
            // We init sorting (not cols 0 & 3) but don't sort by default
            $("#dataTable").tablesorter({headers: { 0: { sorter: false}, 4: {sorter: false} } });

            $('input#id_search').quicksearch('table#dataTable tbody tr', {
                'delay': 300,
                'loader': 'span.loading'
            });
        });    
    </script>

    <style type="text/css">
        .search_thumb {
            max-width: 32px;
            max-height: 32px;
        }
    </style>

    <div>
    {% block search_results %}

        {% if manager.searchError %}
        <div class="error" style="font-size: 120%; margin-top: 50px; text-align: center">
            {{ manager.searchError }}
        </div>
        {% endif %}

        {% if manager.c_size or foundById %}
        
        <table id="dataTable" class="tablesorter"
                data-result-count="{{ resultCount }}" {% if manager.moreResults %}data-more-results="true"{% endif %}>
            <thead> 
                <tr> 
                    <th class="table_images">{% trans "Type" %}</th>
                    <th class="table_desc">{% trans "Name" %}</th> 
                    <th class="table_date">{% trans "Acquired" %}</th>
                    <th class="table_date">{% trans "Imported" %}</th>
                    <th>{% trans "Group" %}</th>
                    <th>{% trans "Link" %}</th>
                </tr> 
            </thead>
            <tbody>
            <!-- NB: E.g. "#project-123 td.desc a" etc is used to update names if edited in right-panel 'editinplace.js' -->
            {% for byId in foundById %}
                {% with c=byId.obj %}
                <tr id="{{ byId.otype }}-{{ c.id }}" class="{{ c.getPermsCss }}">
                    <td class="image" {% if byId.otype == 'image' %}id="image_icon-{{ c.id }}"{% endif %}>
                        {% if byId.otype == 'image' %}
                            <img class="search_thumb" id="{{ c.id }}" alt="image" title="{{ c.name }}"
                                src="{% static "webgateway/img/spinner.gif" %}" />
                        {% elif byId.otype == 'project' %}
                            <img src="{% static "webgateway/img/folder16.png" %}" alt="{{ byId.otype }}" title="{{ c.name }}"/>
                        {% elif byId.otype == 'dataset' %}
                            <img src="{% static "webgateway/img/folder_image16.png" %}" alt="{{ byId.otype }}" title="{{ c.name }}"/>
                        {% elif byId.otype == 'screen' %}
                            <img src="{% static "webclient/image/folder_screen16.png" %}" alt="{{ byId.otype }}" title="{{ c.name }}"/>
                        {% elif byId.otype == 'plate' %}
                            <img src="{% static "webclient/image/folder_plate16.png" %}" alt="{{ byId.otype }}" title="{{ c.name }}"/>
                        {% endif %}

                    </td>
                    <td class="desc">
                        <span style="color:red">ID: {{ c.id }}</span>
                        <a>{{ c.name|truncatebefor:"65" }}</a>
                    </td>
                    <td class="date">
                        <!-- only show Acquisition dates for 'image'. NB image.getDate() returns AquisitionDate-->
                        {% ifequal byId.otype 'image' %}{{ c.getDate|date:"Y-m-d H:i:s" }}{% endifequal %}
                    </td>
                    <td class="date">{{ c.creationEventDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="group">{{ c.getDetails.group.name.val }}</td>
                    <td><a href="{% url 'webindex' %}?show={{ byId.otype }}-{{ c.id }}" title="{% trans 'Show in hierarchy view' %}">
                        {% trans "Browse" %}
                    </a></td>
                </tr>
                {% endwith %}
            {% endfor %}
            {% for c in manager.containers.projects %}
                <tr id="project-{{ c.id }}" class="{{ c.getPermsCss }}">
                    <td class="image">
                        <img id="{{ c.id }}" src="{% static "webgateway/img/folder16.png" %}" alt="project" title="{{ c.name }}"/>
                    </td>
                    <td class="desc"><a>{{ c.name|truncatebefor:"65" }}</a></td>
                    <td class="date"></td>
                    <td class="date">{{ c.creationEventDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="group">{{ c.getDetails.group.name.val }}</td>
                    <td><a href="{% url 'webindex' %}?show=project-{{ c.id }}" title="{% trans 'Show in hierarchy view' %}">
                        {% trans "Browse" %}
                    </a></td>
                </tr>
            {% endfor %}
            {% for c in manager.containers.screens %}
                <tr id="screen-{{ c.id }}" class="{{ c.getPermsCss }}">
                    <td class="image">
                        <img id="{{ c.id }}" src="{% static "webclient/image/folder_screen16.png" %}" alt="screen" title="{{ c.name }}"/>
                    </td>
                    <td class="desc"><a>{{ c.name|truncatebefor:"65" }}</a></td>
                    <td class="date"></td>
                    <td class="date">{{ c.creationEventDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="group">{{ c.getDetails.group.name.val }}</td>
                    <td><a href="{% url 'webindex' %}?show=screen-{{ c.id }}" title="{% trans 'Show in hierarchy view' %}">
                        {% trans "Browse" %}
                    </a></td>
                </tr>
            {% endfor %}
            {% for c in manager.containers.datasets %}
                <tr id="dataset-{{ c.id }}" class="{{ c.getPermsCss }}">
                    <td class="image">
                        <img id="{{ c.id }}" src="{% static "webgateway/img/folder_image16.png" %}" alt="dataset" title="{{ c.name }}"/>
                    </td>
                    <td class="desc"><a>{{ c.name|truncatebefor:"65" }}</a></td>
                    <td class="date"></td>
                    <td class="date">{{ c.creationEventDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="group">{{ c.getDetails.group.name.val }}</td>
                    <td><a href="{% url 'webindex' %}?show=dataset-{{ c.id }}" title="{% trans 'Show in hierarchy view' %}">
                        {% trans "Browse" %}
                    </a></td>
                </tr>
            {% endfor %}
            {% for c in manager.containers.plates %}
                <tr id="plate-{{ c.id }}" class="{{ c.getPermsCss }}">
                    <td class="image">
                        <img id="{{ c.id }}" src="{% static "webclient/image/folder_plate16.png" %}" alt="plate" title="{{ c.name }}"/>
                    </td>
                    <td class="desc"><a>{{ c.name|truncatebefor:"65" }}</a></td>
                    <td class="date"></td>
                    <td class="date">{{ c.creationEventDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="group">{{ c.getDetails.group.name.val }}</td>
                    <td><a href="{% url 'webindex' %}?show=plate-{{ c.id }}" title="{% trans 'Show in hierarchy view' %}">
                        {% trans "Browse" %}
                    </a></td>
                </tr>
            {% endfor %}
            {% for c in manager.containers.plateacquisitions %}
                <tr id="acquisition-{{ c.id }}" class="{{ c.getPermsCss }}">
                    <td class="image">
                        <img id="{{ c.id }}" src="{% static "webclient/image/image16.png" %}" alt="plate" title="{{ c.name }}"/>
                    </td>
                    <td class="desc"><a>{{ c.name|truncatebefor:"65" }}</a></td>
                    <td class="date"></td>
                    <td class="date">{{ c.creationEventDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="group">{{ c.getDetails.group.name.val }}</td>
                    <td><a href="{% url 'webindex' %}?show=run-{{ c.id }}" title="{% trans 'Show in hierarchy view' %}">
                        {% trans "Browse" %}
                    </a></td>
                </tr>
            {% endfor %}
            {% for c in manager.containers.images %}
                <tr id="image-{{ c.id }}" class="{{ c.getPermsCss }}">
                    <td class="image" id="image_icon-{{ c.id }}">
                        <img class="search_thumb" id="{{ c.id }}" alt="image" title="{{ c.name }}"
                            src="{% static "webgateway/img/spinner.gif" %}" />
                    </td>
                    <td class="desc"><a>{{ c.name|truncatebefor:"65" }}</a></td>
                    <td class="date">{{ c.getDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="date">{{ c.creationEventDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="group">{{ c.getDetails.group.name.val }}</td>
                    <td><a href="{% url 'webindex' %}?show=image-{{ c.id }}" title="{% trans 'Show in hierarchy view' %}">
                        {% trans "Browse" %}
                    </a></td>
                </tr>
            {% endfor %}
            {% for c in manager.containers.wells %}
                <tr id="well-{{ c.id }}" class="{{ c.getPermsCss }}">
                    <td class="image">
                        <img id="{{ c.id }}" src="{% static "webclient/image/well16.png" %}" alt="well" title="{{ c.name }}"/>
                    </td>
                    <td class="desc"><a>{{ c.name|truncatebefor:"65" }}</a></td>
                    <td class="date">{{ c.getDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="date">{{ c.creationEventDate|date:"Y-m-d H:i:s" }}</td>
                    <td class="group">{{ c.getDetails.group.name.val }}</td>
                    <td><a href="{% url 'webindex' %}?show=well-{{ c.id }}" title="{% trans 'Show in hierarchy view' %}">
                        {% trans "Browse" %}
                    </a></td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        
        {% else %}
            <p class="center_message message_nodata">{% trans "No results found" %}</p>
        {% endif %}

    {% endblock %}
    </div>
