<html>
{% load i18n %}
{% load common_filters %}
{% load common_tags %}
{% comment %}
<!--
  Copyright (C) 2011-2016 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()
            {
                // This is called once the html for "General" tab of right panel has loaded...

                // Delegate to sub-views to handle content of each collapsible panel

                var selectedObjs = ["{{ manager.obj_type }}-{{ manager.obj_id }}"];
                var annPaneData = {
                    'selected': selectedObjs,
                    // canAnnotate used by map annotations and ratings panes
                    'canAnnotate': {% if manager.canAnnotate %}true{% else %}false{% endif %}
                }

                var tagPane = new TagPane($("#tagsPane"), annPaneData);
                var fileannsPane = new FileAnnsPane($("#fileannsPane"), annPaneData);
                var commentsPane = new CommentsPane($("#commentsPane"), annPaneData);
                var mapAnnsPane = new MapAnnsPane($("#mapAnnsPane"), annPaneData);
                var ratingsPane = new RatingsPane($("#ratingsPane"), annPaneData);
                var customAnnsPane = new CustomAnnsPane($("#customAnnotationsPane"), annPaneData);

                
                // Most panes are expanded and collapsed in the Pane classes above.
                // Manually add that behaviour for Details
                $('.can-collapse[data-name="details"]').on('click', function(){
                    var $this = $(this),
                        expanded = $this.hasClass('closed');
                    $this.toggleClass('closed')
                        .next().slideToggle();
                    OME.setPaneExpanded('details', expanded);
                });
                if (!OME.getPaneExpanded('details')){
                    $('.can-collapse[data-name="details"]').addClass('closed')
                        .next().hide();
                }


                {% if manager.canEdit %}
                $( "#{{ manager.obj_type }}name-{{ manager.obj_id }} button" )      // E.g. imagename-123 button
                    .editable('{% url 'manage_action_containers' "editname" manager.obj_type manager.obj_id %}',
                        '{% url 'manage_action_containers' "savename" manager.obj_type manager.obj_id %}',
                        "{{ manager.obj_type }}name-{{ manager.obj_id }}" );
                $( "#{{ manager.obj_type }}description-{{ manager.obj_id }} button" )
                    .editable('{% url 'manage_action_containers' "editdescription" manager.obj_type manager.obj_id %}',
                        '{% url 'manage_action_containers' "savedescription" manager.obj_type manager.obj_id %}',
                        "{{ manager.obj_type }}description-{{ manager.obj_id }}", { post_save: linkify });
                OME.linkify_element($( "#{{ manager.obj_type }}description-{{ manager.obj_id }} > p > span" ));
                {% else %}
                OME.linkify_element($( "#image_desc" ));
                {% endif %}

                var acquisition_load = false;
                var preview_load = false;
                var hierarchy_load = false;


                $(".tooltip").parent().children("span").hide(); // hide tool tip source
                $(".tooltip").tooltip_init();
                
                {% if manager.image %}
                // handle loading of image hierarchy by ajax
                $("#hierarchy-link").on('click', function(e){
                    var hierarchy_url = $(this).attr('href');
                    $("#hierarchy-spinner").show();  // waiting...
                    $("#hierarchy-pane").load(hierarchy_url);
                    e.preventDefault();
                    return false;
                })
                {% endif %}

                // show a link to the current object
                $("#show_link_btn").on('click', function(){
                    $("#link_info_popup").show();
                    var lnk = location.protocol + "//" + location.host + "{{ webclient_path }}";
                    var obj_type = "{{manager.obj_type}}";
                    if (obj_type === "acquisition") {
                        obj_type = "run";
                    }
                    lnk += "?show=" + obj_type + "-{{ manager.obj_id }}";
                    var link_input = $("#link_info_popup input");
                    link_input.val(lnk);
                    link_input.get(0).focus();
                    link_input.get(0).select();
                });
                $("#link_info_popup img").on('click', function(){
                    $("#link_info_popup").hide();
                });

                // show original file path links for images
                var original_file_paths_url,
                    importTransfer;
                {% if manager.image %}
                original_file_paths_url = "{% url 'original_file_paths' manager.image.id %}";
                importTransfer = "{{ manager.image.getInplaceImportCmd }}";
                {% elif manager.well.getWellSample.image %}
                original_file_paths_url = "{% url 'original_file_paths' manager.well.getWellSample.image.id %}";
                importTransfer = "{{ manager.well.getWellSample.image.getInplaceImportCmd }}";
                {% endif %}

                var $toolbar_info_panel = $("#toolbar_info_panel"),
                        // $panel_textarea = $("#toolbar_info_panel textarea"),
                        $panel_title = $("#toolbar_info_panel .panel_title"),
                        $panel_div = $("#toolbar_info_panel .panel_div");


                $( "#toolbar_info_panel" ).on( "click", ".show_more", function() {
                    $(this).hide().next().show();
                    return false;
                });

                $("#show_fs_files_btn").on('click', function(){

                    // If we're already showing Image file info, toggle hide
                    if ($toolbar_info_panel.is(":visible") && 
                            $panel_title.text().split("Image file").length > 1) {
                        $toolbar_info_panel.hide();
                        return;
                    }
                    $("#toolbar_info_panel").show();
                    $panel_title.html("Loading...");
                    $panel_div.empty();
                    if (original_file_paths_url) {
                        $.getJSON(original_file_paths_url,
                            function(data) {
                                var repo = data.repo,
                                    client = data.client,
                                    html = "";
                                $panel_title.html("Fileset Info");

                                html += `<p>Fileset ID: <strong>${data.fileset.id}</strong></p>`

                                html += `<p>File count: <strong>${repo.length}</strong></p>`

                                if (importTransfer) {
                                    html += "<p>Imported with: <strong>--transfer="+ importTransfer + "</strong></p>";
                                }

                                html += "<p>Imported from:</p>";
                                html += "<p class='pathlist'>" + client.slice(0,2).join("<br>") + "<br>";
                                if (client.length > 2) {
                                    html += "<a class='show_more' href='#'> Show more...</a>";
                                    html += "<span style='display:none'>" + client.slice(2).join("<br>");
                                    html += "</span>";
                                }
                                html += "</p><hr/>";

                                html += "<p>Paths on server:</p>";
                                html += "<p class='pathlist'>" + repo.slice(0,2).join("<br>") + "<br>";
                                if (repo.length > 2) {
                                    html += "<a class='show_more' href='#'> Show more...</a>";
                                    html += "<span style='display:none'>" + repo.slice(2).join("<br>");
                                    html += "</span>";
                                }
                                html += "</p>";
                                $panel_div.append(html);
                            });
                    }
                });

                var hierarchy_url;
                {% if manager.image %}
                hierarchy_url = "{% url 'load_metadata_hierarchy' 'image' manager.image.id %}";
                {% elif manager.well %}
                hierarchy_url = "{% url 'load_metadata_hierarchy' 'well' manager.well.id %}";
                {% endif %}
                
                // show Image hierarchy Project/Dataset tree.
                $("#show_image_hierarchy").on('click', function(){

                    // If we're already showing Image file info, toggle hide
                    if ($toolbar_info_panel.is(":visible") && 
                            $panel_title.text().split("contained").length > 1) {
                        $toolbar_info_panel.hide();
                        return;
                    }
                    $("#toolbar_info_panel").show();

                    $panel_title.html("Loading...");
                    $panel_div.empty();
                    if (hierarchy_url) {
                        $panel_div.load(hierarchy_url);
                        $panel_div.load(hierarchy_url,
                            function(data) {
                                $panel_title.html("Image contained in:");
                            });
                    }
                });


                $("#toolbar_info_panel img").on('click', function(){
                    $("#toolbar_info_panel").hide();
                });

                // Handle Download actions
                $("#create-ometiff").on('click', function(e){
                    
                    var url = $(this).attr('href');
                    $("#download_dropdown ul").css('visibility', 'hidden');// hide dropdown menu
                    var dialog_opts = ['Cancel', 'Create'];
                    $.ajax({
                        url: "{% url 'ome_tiff_info' manager.obj_id %}",
                        dataType: 'json',
                        success: function(data) {
                            var msg = "This will create an OME-TIFF file from this Image.";
                            if (data.id && data.ago) {
                                msg += "<br>Or you can Download one that was created "+ data.ago +" ago.";
                                var download_ometiff = data.download;
                                dialog_opts[1] = "Create New";
                                dialog_opts.push("Download");
                            } else {
                                msg += "<br>This will be attached to the Image and available to download.";
                            }

                            var confirm_ometiff = OME.confirm_dialog(msg,
                                function() {
                                    var btn = confirm_ometiff.data("clicked_button");
                                    switch (btn) {
                                        case "Create":   // two options for the same button
                                        case "Create New":
                                            $.post( url, function() {
                                                OME.showActivities();
                                            });
                                            break;
                                        case "Download":
                                            window.location.href = download_ometiff;
                                            break;
                                    }
                                },
                                "Create OME-TIFF?",
                                dialog_opts,
                                null, 200
                            );
                        }
                    });
                    
                    e.preventDefault();
                    return false;
                });

                // Filtering annotations added by 'me' or 'others' or 'all'
                $("#annotationFilter").on('change', function(){
                    OME.filterAnnotationsAddedBy();
                });

                // Channel name editing
            {% if manager.image %}

                var $chNameForm = $("#channel_names_edit");
                // set up form with Parent
                {% if manager.well %}
                // TODO - Need to know if image is in Plate!
                // If we're looking at a well we know parent is plate
                  var pid = "plate-{{ manager.well.plate.id.val }}";
                {% else %}
                  // For images in Datasets, we get parent from jsTree, using selected image
                  // E.g. dataset-123
                  var pid = OME.getParentId();
                {% endif %}
                if (typeof pid === "undefined") {
                    $chNameForm.find("button[name=apply]").hide();  // hide 'apply to all'
                } else {
                    var parentType = pid.split("-")[0];
                    $chNameForm.find(".ptype").text( parentType );
                    $chNameForm.find("input[name=parentId]").val(pid).attr('value', pid);
                    if (parentType === "plate") {
                        // Plate: only allow 'Apply to All' (all images linked to same Channels)
                        $chNameForm.find("button[name=save]").remove();
                    }
                }
                var resetChForm = function() {
                    $chNameForm.find(".originalButtons").show();
                    $chNameForm.find(".confirmButtons").hide();
                    $("#channel_names_display").show();
                    $("#editChannelNames").show();
                    $("button[type='submit']", $chNameForm).removeAttr('disabled');
                    $chNameForm.removeClass("in_progress");  // hide spinner
                    $chNameForm.hide();
                }
                // Workflow starts by displaying the form
                $("#editChannelNames").on('click', function(){
                    $("#channel_names_display").hide();
                    $("#editChannelNames").hide();
                    $chNameForm.show();
                });
                // Handling of all form buttons. NB: save & apply_confirm buttons submit
                $chNameForm.find("button").on('click', function(event){
                    var name = $(this).attr('name');
                    if (name === "apply") {
                        // Ask users to confirm:
                        $chNameForm.find(".originalButtons").hide();
                        $chNameForm.find(".confirmButtons").show();
                        event.preventDefault(); // prevent form submission etc
                        return false;
                    } else if (name === "cancel") {
                        // cancel - hide and don't submit
                        resetChForm();
                    }
                });
                // Form handled by AJAX
                $chNameForm.ajaxForm({
                    dataType:  'json',
                    beforeSubmit: function() {
                        $("button[type='submit']", $chNameForm).attr('disabled', true);
                        $chNameForm.addClass("in_progress"); // shows spinner
                    },
                    success: function(data) {
                        var cnames = data.channelNames;
                        // update the channel names, and ititial values in form
                        $("#channel_names_display span").each(function(i){
                            if (cnames.hasOwnProperty("channel"+i)) {
                                $(this).text(cnames["channel"+i]);
                            }
                        });
                        $chNameForm.find("input").each(function(i){
                            if (cnames.hasOwnProperty( $(this).attr('name') )) {
                                $(this).attr('value', cnames["channel"+i]);
                            }
                        });
                        resetChForm();
                    }
                });

            {% endif %}


                // For wells (or images that may be in a Well), we try to
                //load Bulk table annotations attached to parent Screen / Plate
                // loading just the row we need for the current well.
                {% if manager.well or manager.image %}
                    {% if manager.well %}
                    var screenQuery = "{% url 'webgateway_annotations' 'Screen.plateLinks.child.wells' manager.well.id %}";
                    var plateQuery = "{% url 'webgateway_annotations' 'Plate.wells' manager.well.id %}";
                    var query = "Well-{{ manager.well.id }}";
                    {% elif manager.image %}
                    var screenQuery = "{% url 'webgateway_annotations' 'Screen.plateLinks.child.wells.wellSamples.image' manager.image.id %}";
                    var plateQuery = "{% url 'webgateway_annotations' 'Plate.wells.wellSamples.image' manager.image.id %}";
                    var projectQuery = "{% url 'webgateway_annotations' 'Project.datasetLinks.child.imageLinks.child' manager.image.id %}";
                    var datasetQuery = "{% url 'webgateway_annotations' 'Dataset.imageLinks.child' manager.image.id %}";
                    var query = "Image-{{ manager.image.id }}";
                    {% endif %}

                    async function loadTablesOnParents() {
                        let urls = [screenQuery, plateQuery];
                            {% if manager.image %}
                                urls = urls.concat([projectQuery, datasetQuery]);
                            {% endif %}
                        let promises = urls.map(url => fetch(url).then(rsp => rsp.json()));
                        let results = await Promise.all(promises);

                        var compareNameDate = function (a, b) {
                            if (a.name == b.name) {
                                return a.addedOn > b.addedOn ? 1 : -1;
                            }
                            return a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1;
                        };

                        // Show list of tables, allow user to expand...
                        let html = results.flatMap(tables => {
                            tables.data.sort(compareNameDate);
                            return tables.data.map(ann => `
                                <ul class="lnfiles">
                                    <li class="can-collapse closed" data-tableid="${ann.file}">
                                        <a class="tooltip" href="#">${ann.name.escapeHTML()}
                                            <span class="tooltip_html" style="display: none">
                                                <b>Annotation ID:</b> ${ann.id}<br>
                                                <b>Owner:</b> ${ann.owner.escapeHTML()}<br>
                                                <b>Linked by:</b> ${ann.addedBy.escapeHTML()}<br>
                                                <b>On</b> ${OME.formatDate(ann.addedOn)}</br>
                                                <b>Namespace:</b> ${(ann.ns || "").escapeHTML()}<br>
                                                <b>File ID:</b> ${ann.file}
                                            </span>
                                        </a>
                                        <span>(linked to
                                            <a title="Open ${ann.parentType} in new tab" target="_blank" href="${WEBCLIENT.URLS.webindex}?show=${ann.parentType.toLowerCase()}-${ann.parentId}">
                                                ${ann.parentType}: ${ann.parentId}</a>)
                                        </span>
                                    </li>
                                </ul>
                                <table id="bulk_annotations_table_${ann.file}" style="display: none; margin: 10px"></table>
                                `);
                        });
                        $("#bulk_annotations_list").html(html.join("\n"));
                        $("#bulk_annotations_list").tooltip({
                                items: 'li a.tooltip',
                                content: function() {
                                    return $("span.tooltip_html", this).html();
                                },
                                track: true,
                                show: false,
                                hide: false
                            });
                        // If only a single table was found - expand it automatically:
                        if (html.length == 1) {
                            $("#bulk_annotations_list li").click();
                        }
                    }

                    // If user opens tables tab, also load tables
                    $('.can-collapse.closed[data-name="tables"]').on('click', function(){
                        var $header = $(this),
                            $body = $header.next();

                        $header.toggleClass('closed');
                        $body.slideToggle();

                        var expanded = !$header.hasClass('closed');
                        OME.setPaneExpanded('tables', expanded);

                        if (expanded && $("#bulk_annotations_list").is(":empty")) {
                            loadTablesOnParents();
                        }
                    });

                    // Load tables if tables tab is open
                    if (OME.getPaneExpanded("tables")) {
                        $('.can-collapse.closed[data-name="tables"]')
                            .toggleClass('closed')
                            .next().slideToggle();
                        if ($("#bulk_annotations_list").is(":empty")) {
                            loadTablesOnParents();
                        }
                    }

                    // Handle clicking on a table: load data for this Image or Well
                    $("#bulk_annotations_list").on("click", "li", function (event) {
                        // toggle collapse/expand and show/hide table
                        let $li = $(this);
                        $li.toggleClass('closed');
                        let tableId = $li.data("tableid");
                        let $table = $(`#bulk_annotations_table_${tableId}`);
                        $table.toggle();

                        // Don't need to load if table populated already
                        if (!$table.is(":empty")) return;
                        let url = `{% url 'webgateway' %}table/${tableId}/query/?query=${query}`;
                        $.getJSON(url, function(result) {
                            if (result.data && result.data.rows) {
                                var html = result.data.columns.map(function (col, colIdx) {
                                    var label = col.escapeHTML();
                                    var values = result.data.rows.map(function (row) {
                                        return ("" + row[colIdx]).escapeHTML();
                                    });
                                    values = values.join('<br />');
                                    var oddEvenClass = col % 2 == 1 ? 'odd' : 'even';
                                    return '<tr><td class="title ' + oddEvenClass + '">' + label + ':&nbsp;</td><td>' + values + '</td></tr>';
                                }).join("");
                                $table.html(html);
                            }
                        });
                    });

                {% endif %}


                $('[data-isodate]').each(function() {
                    $(this).text(OME.formatDate($(this).data('isodate')));
                });

            });
            
    </script>


        <!-- This is used by AJAX loading the right panel, to check it matches current selection -->
        <!-- Can also be used by JavaScript to get the current object and ID -->
        <div id='object-id' style="display:none">{{manager.obj_type}}-{{ manager.obj_id }}</div>


        {% if not manager.tag %}
        
        
        <!-- ANNOTATIONS "General" -->
        <div id="general_tab" class="right_tab_inner" >
           
        {% if manager.image %}

            {% with image=manager.image canDownload=manager.image.canDownload %}
                {% include "webclient/annotations/includes/toolbar.html" %}
            {% endwith %}

            <!-- Image Name, ID, owner -->
            {% with obj=manager.image nameText=manager.image.name %}
                {% include "webclient/annotations/includes/name.html" %}
            {% endwith %}
                  
            <h1 class="can-collapse defclose" data-name="details">
                Image Details
            </h1>
            <div> 
                  
            <!-- Image Description -->      
            {% with obj=manager.image %}
                {% include "webclient/annotations/includes/description.html" %}
            {% endwith %}
            
            
            
            
            
            
            
            
            
            <!-- Include table of core metadata, Owner, SizeX,Y,Z, Channels etc -->
            {% with image=manager.image %}
                {% include "webclient/annotations/includes/core_metadata.html" %}
            {% endwith %}

            </div>


        {% else %}
            {% if manager.dataset %}

                {% include "webclient/annotations/includes/toolbar.html" %}

                <!-- Dataset Name, ID, Owner -->
                {% with obj=manager.dataset nameText=manager.dataset.name %}
                    {% include "webclient/annotations/includes/name.html" %}
                {% endwith %}

                
                <!-- Dataset Description -->
                <h1 class="can-collapse defclose" data-name="details">
                    Dataset Details
                </h1>
                <div> 
                {% with obj=manager.dataset %}
                    {% include "webclient/annotations/includes/description.html" %}
                {% endwith %}
                
                <table>
                    <tr>
                        <th>Creation Date:</th>
                        <td id='creation_date' data-isodate='{{ manager.dataset.getDate|date:"r" }}'></td>
                    </tr>
                </table>
                </div>
            {% else %}
                {% if manager.project %}

                    {% include "webclient/annotations/includes/toolbar.html" %}

                    <!-- Project Name, ID, Owner -->
                    {% with obj=manager.project nameText=manager.project.name %}
                        {% include "webclient/annotations/includes/name.html" %}
                    {% endwith %}

                    
                    <!--Project Description -->
                    <h1 class="can-collapse defclose" data-name="details">
                        Project Details
                    </h1>
                    <div>
                    {% with obj=manager.project %}
                        {% include "webclient/annotations/includes/description.html" %}
                    {% endwith %}
                    
                    <table>
                        <tr>
                            <th>Creation Date:</th>
                            <td id='creation_date' data-isodate='{{ manager.project.getDate|date:"r" }}'></td>
                        </tr>
                    </table>
                    </div>
                {% endif %}
            {% endif %}
        {% endif %}
            
        {% if manager.well %}
            {% with image=manager.getWellSampleImage %}
                {% include "webclient/annotations/includes/toolbar.html" %}
            {% endwith %}

            <!-- Well Label (not editable), ID, Owner -->
            {% with obj=manager.well nameText=manager.well.getWellPos %}
                {% include "webclient/annotations/includes/name.html" %}
            {% endwith %}

        {% else %}
            {% if manager.acquisition %}

                {% include "webclient/annotations/includes/toolbar.html" %}

                <!-- Acquisition Name -->
                {% with obj=manager.acquisition nameText=manager.acquisition.name %}
                    {% include "webclient/annotations/includes/name.html" %}
                {% endwith %}

                
                <!-- Acquisition Description -->
                <h1 class="can-collapse defclose" data-name="details">
                    Run Details
                </h1>
                <div>
                {% with obj=manager.acquisition %}
                    {% include "webclient/annotations/includes/description.html" %}
                {% endwith %}
                
                <table>
                    <tr>
                        <th>Creation Date:</th>
                        <td id='creation_date' data-isodate='{{ manager.acquisition.getDate|date:"r" }}'></td>
                    </tr>
                    <tr>
                        <th>Start Time:</th>
                        <td data-isodate='{{ manager.acquisition.getStartTime|date:"r" }}'></td>
                    </tr>
                    <tr>
                        <th>End Time:</th>
                        <td data-isodate='{{ manager.acquisition.getEndTime|date:"r" }}'></td>
                    </tr>
                </table>
                </div>

            {% else %}
                {% if manager.plate %}

                    {% include "webclient/annotations/includes/toolbar.html" %}

                    <!-- Plate Name, ID, Owner -->
                    {% with obj=manager.plate nameText=manager.plate.name %}
                        {% include "webclient/annotations/includes/name.html" %}
                    {% endwith %}
                    
                    
                    <!-- Plate Description -->
                    <h1 class="can-collapse defclose" data-name="details">
                        Plate Details
                    </h1>
                    <div>
                    {% with obj=manager.plate %}
                        {% include "webclient/annotations/includes/description.html" %}
                    {% endwith %}


                    <table>
                        <tr>
                            <th>Creation Date:</th>
                            <td id='creation_date' data-isodate='{{ manager.plate.getDate|date:"r" }}'></td>
                        </tr>
                        <!--{% comment %}
                        <tr>
                            <th>Well Count:</th>
                            <td id='child_count'>{{ manager.plate.countChildren }} {% plural manager.plate.countChildren 'well' 'Wells' %}</td>
                        </tr>
                        {% endcomment %}-->
                    </table>
                    </div>
                {% else %}
                    {% if manager.screen %}

                        {% include "webclient/annotations/includes/toolbar.html" %}

                        <!-- Screen Name, ID, Owner -->
                        {% with obj=manager.screen nameText=manager.screen.name %}
                            {% include "webclient/annotations/includes/name.html" %}
                        {% endwith %}
                            
                            

                        <!-- Screen Description -->
                        <h1 class="can-collapse defclose" data-name="details">
                            Screen Details
                        </h1>
                        <div>
                        {% with obj=manager.screen %}
                            {% include "webclient/annotations/includes/description.html" %}
                        {% endwith %}

                        <table>
                            <tr>
                                <th>Creation Date:</th>
                                <td id='creation_date' data-isodate='{{ manager.screen.getDate|date:"r" }}'></td>
                            </tr>
                            <tr>
                                <th>Plate Count:</th>
                                <td id='child_count'>{{ manager.screen.countChildren }} {% plural manager.screen.countChildren 'plate' 'plates' %}</td>
                            </tr>
                        </table>
                        </div>
                    {% endif %}
                {% endif %}
            {% endif %}
        {% endif %}
            
            
            
            
        
        
    <!-- ANNOTATIONS -->

        <!-- templates are loaded based on config -->
        {% for t in ome.metadata_panes|dictsort:"index" %}
            {% with "webclient/annotations/includes/metadata_general_"|add:t.name|add:".html" as metadata_templates_path %}
            {% with label=t.label %}
            {% include metadata_templates_path %}
            {% endwith %}
            {% endwith %}
        {% endfor %}

        </div>
        {% endif %}


        {% if manager.tag %}

        <div id="general_tab" class="right_tab_inner" >

            <!-- Toolbar at the top -->
            {% include "webclient/annotations/includes/toolbar.html" %}


                <!-- Tag TextValue, ID, Owner -->
                {% with obj=manager.tag nameText=manager.tag.getValue %}
                    {% include "webclient/annotations/includes/name.html" %}
                {% endwith %}

                <hr/>

                <!-- Tag Description -->
                {% with obj=manager.tag %}
                    {% include "webclient/annotations/includes/description.html" %}
                {% endwith %}
        
                <table>
                    {% if manager.tag.getNs %}
                    {% if manager.tag.getNs != insight_ns %}
                    <tr>
                        <th>Name space:</th>
                        <td id='namespace'>{{ manager.tag.getNs }}</td>
                    </tr>
                    {% endif %}
                    {% endif %}
                    <tr>
                        <th>Owner:</th>
                        <td id='owner_fullname'>{{ manager.tag.getOwner.getFullName }}</td>
                    </tr>
                    <tr>
                        <th>Creation Date:</th>
                        <td id='creation_date' data-isodate='{{ manager.tag.getDate|date:"r" }}'></td>
                    </tr>
                    <tr>
                        <th>Image Count:</th>
                        {% if False %}
                        <td id='child_count'>{{ manager.tag.countChildren }} {% plural manager.tag.countChildren 'tag' 'tags' %}</td>
                        {% endif %}
                    </tr>
                </table>
        </div>
        {% endif %}
</html>
