{% extends "framework.html" %}
{% load static %}
{% block content %}

    {% if object_type != 'package' %}
        <div>
            <div id="load-all-error" style="display: none;">
                <div class="alert alert-danger" role="alert">
                    <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
                    <span class="sr-only">Error:</span>
                    Getting objects failed!
                </div>
            </div>

            <input type="text" id="object-search" class="form-control" placeholder="Search by name"
                   style="display: none;">
            <p></p>
        </div>
    {% endif %}

    {% block action_modals %}
        {% if object_type == 'package' %}
            {% include "modals/collections/new_package_modal.html" %}
            {% include "modals/collections/import_legacy_package_modal.html" %}
        {% elif object_type == 'compound' %}
            {% include "modals/collections/new_compound_modal.html" %}
        {% elif object_type == 'rule' %}
            {% include "modals/collections/new_rule_modal.html" %}
        {% elif object_type == 'reaction' %}
            {% include "modals/collections/new_reaction_modal.html" %}
        {% elif object_type == 'pathway' %}
            {# {% include "modals/collections/new_pathway_modal.html" %} #}
        {% elif object_type == 'node' %}
            {% include "modals/collections/new_node_modal.html" %}
        {% elif object_type == 'edge' %}
            {% include "modals/collections/new_edge_modal.html" %}
        {% elif object_type == 'scenario' %}
            {% include "modals/collections/new_scenario_modal.html" %}
        {% elif object_type == 'model' %}
            {% include "modals/collections/new_model_modal.html" %}
        {% elif object_type == 'setting' %}
            {#{% include "modals/collections/new_setting_modal.html" %}#}
        {% elif object_type == 'user' %}
            <div></div>
        {% elif object_type == 'group' %}
            {% include "modals/collections/new_group_modal.html" %}
        {% endif %}
    {% endblock action_modals %}

<div class="panel-group" id="reviewListAccordion">
    <div class="panel panel-default">
        <div class="panel-heading" id="headingPanel" style="font-size:2rem;height: 46px">
            {% if object_type == 'package' %}
            Packages
            {% elif object_type == 'compound' %}
            Compounds
            {% elif object_type == 'structure' %}
            Compound structures
            {% elif object_type == 'rule' %}
            Rules
            {% elif object_type == 'reaction' %}
            Reactions
            {% elif object_type == 'pathway' %}
            Pathways
            {% elif object_type == 'node' %}
            Nodes
            {% elif object_type == 'edge' %}
            Edges
            {% elif object_type == 'scenario' %}
            Scenarios
            {% elif object_type == 'model' %}
            Model
            {% elif object_type == 'setting' %}
            Settings
            {% elif object_type == 'user' %}
            Users
            {% elif object_type == 'group' %}
            Groups
            {% endif %}
            <div id="actionsButton"
                 style="float: right;font-weight: normal;font-size: medium;position: relative; top: 50%; transform: translateY(-50%);z-index:100;display: none;"
                 class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                     aria-haspopup="true" aria-expanded="false"><span
                    class="glyphicon glyphicon-wrench"></span> Actions <span class="caret"></span><span
                    style="padding-right:1em"></span></a>
                <ul id="actionsList" class="dropdown-menu">
                    {% block actions %}
                        {% if object_type == 'package' %}
                            {% include "actions/collections/package.html" %}
                        {% elif object_type == 'compound' %}
                            {% include "actions/collections/compound.html" %}
                        {% elif object_type == 'structure' %}
                            {% include "actions/collections/compound_structure.html" %}
                        {% elif object_type == 'rule' %}
                            {% include "actions/collections/rule.html" %}
                        {% elif object_type == 'reaction' %}
                            {% include "actions/collections/reaction.html" %}
                        {% elif object_type == 'setting' %}
                            {% include "actions/collections/setting.html" %}
                        {% elif object_type == 'scenario' %}
                            {% include "actions/collections/scenario.html" %}
                        {% elif object_type == 'model' %}
                            {% include "actions/collections/model.html" %}
                        {% elif object_type == 'pathway' %}
                            {% include "actions/collections/pathway.html" %}
                        {% elif object_type == 'node' %}
                            {% include "actions/collections/node.html" %}
                        {% elif object_type == 'edge' %}
                            {% include "actions/collections/edge.html" %}
                        {% elif object_type == 'group' %}
                            {% include "actions/collections/group.html" %}
                        {% endif %}
                    {% endblock %}
                </ul>
            </div>
        </div>
        <div class="panel-body">
            <!-- Set Text above links -->
            {% if object_type == 'package' %}
            <p>A package contains pathways, rules, etc. and can reflect specific experimental
                conditions. <a target="_blank" href="https://wiki.envipath.org/index.php/packages" role="button">Learn
                    more &gt;&gt;</a></p>
            {% elif object_type == 'compound' %}
            <p>A compound stores the structure of a molecule and can include meta-information.
                <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'structure' %}
            <p>The structures stored in this compound
                <a target="_blank" href="https://wiki.envipath.org/index.php/compounds" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'rule' %}
            <p>A rule describes a biotransformation reaction template that is defined as SMIRKS.
                <a target="_blank" href="https://wiki.envipath.org/index.php/Rules" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'reaction' %}
            <p>A reaction is a specific biotransformation from educt compounds to product compounds.
                <a target="_blank" href="https://wiki.envipath.org/index.php/reactions" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'pathway' %}
            <p>A pathway displays the (predicted) biodegradation of a compound as graph.
                <a target="_blank" href="https://wiki.envipath.org/index.php/pathways" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'node' %}
            <p>Nodes represent the (predicted) compounds in a graph.
                <a target="_blank" href="https://wiki.envipath.org/index.php/nodes" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'edge' %}
            <p>Edges represent the links between Nodes in a graph
                <a target="_blank" href="https://wiki.envipath.org/index.php/edges" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'scenario' %}
            <p>A scenario contains meta-information that can be attached to other data (compounds, rules, ..).
                <a target="_blank" href="https://wiki.envipath.org/index.php/scenarios" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'model' %}
            <p>A model applies machine learning to limit the combinatorial explosion.
                <a target="_blank" href="https://wiki.envipath.org/index.php/relative_reasoning" role="button">Learn
                    more
                    &gt;&gt;</a></p>
            {% elif object_type == 'setting' %}
            <p>A setting includes configuration parameters for pathway predictions.
                <a target="_blank" href="https://wiki.envipath.org/index.php/settings" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'user' %}
            <p>Register now to create own packages and to submit and manage your data.
                <a target="_blank" href="https://wiki.envipath.org/index.php/users" role="button">Learn more
                    &gt;&gt;</a></p>
            {% elif object_type == 'group' %}
            <p>Users can team up in groups to share packages.
                <a target="_blank" href="https://wiki.envipath.org/index.php/groups" role="button">Learn more
                    &gt;&gt;</a></p>
            {% endif %}

            <!-- If theres nothing to show extend the text above -->
            {% if reviewed_objects and unreviewed_objects %}
            {% if reviewed_objects|length == 0 and unreviewed_objects|length == 0 %}
            <p>Nothing found. There are two possible reasons: <br><br>1. There is no content yet.<br>2. You have no
                reading permissions.<br><br>Please be sure you have at least reading permissions.</p>
            {% endif %}
            {% endif %}
        </div>
        {% if reviewed_objects %}
        {% if reviewed_objects|length > 0 %}
        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver">
            <h4 class="panel-title">
                <a id="ReviewedLink" data-toggle="collapse" data-parent="#reviewListAccordion"
                   href="#Reviewed">Reviewed</a>
            </h4>
        </div>
        <div id="Reviewed" class="panel-collapse collapse in">
            <div class="panel-body list-group-item" id="ReviewedContent">
                {% if object_type == 'package' %}
                {% for obj in reviewed_objects %}
                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}
                    <span class="glyphicon glyphicon-star" aria-hidden="true"
                          style="float:right" data-toggle="tooltip"
                          data-placement="top" title="" data-original-title="Reviewed">
                        </span>
                </a>
                {% endfor %}
                {% else %}
                {% for obj in reviewed_objects|slice:":50" %}
                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}{# <i>({{ obj.package.name }})</i> #}
                    <span class="glyphicon glyphicon-star" aria-hidden="true"
                          style="float:right" data-toggle="tooltip"
                          data-placement="top" title="" data-original-title="Reviewed">
                        </span>
                </a>
                {% endfor %}
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% endif %}
        {% if unreviewed_objects %}
        <div class="panel panel-default panel-heading list-group-item" style="background-color:silver"><h4
                class="panel-title"><a id="UnreviewedLink" data-toggle="collapse" data-parent="#unReviewListAccordion"
                                       href="#Unreviewed">Unreviewed</a></h4></div>
        <div id="Unreviewed" class="panel-collapse collapse {% if reviewed_objects|length == 0 or object_type == 'package' %}in{% endif %}">
            <div class="panel-body list-group-item" id="UnreviewedContent">
                {% if object_type == 'package' %}
                {% for obj in unreviewed_objects %}
                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
                {% endfor %}
                {% else %}
                {% for obj in unreviewed_objects|slice:":50" %}
                <a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
                {% endfor %}
                {% endif %}
            </div>
        </div>
        {% endif %}
        {% if objects %}
        <!-- Unreviewable objects such as User / Group / Setting -->
        <ul class='list-group'>
            {% for obj in objects %}
            {% if object_type == 'user' %}
            <a class="list-group-item" href="{{ obj.url }}">{{ obj.username }}</a>
            {% else %}
            <a class="list-group-item" href="{{ obj.url }}">{{ obj.name }}</a>
            {% endif %}
            {% endfor %}
        </ul>
        {% endif %}
    </div>
    <style>
        .spinner-widget {
            position: fixed; /* stays in place on scroll */
            bottom: 20px; /* distance from bottom */
            right: 20px; /* distance from right */
            z-index: 9999; /* above most elements */
            width: 60px; /* adjust to gif size */
            height: 60px;
        }

        .spinner-widget img {
            width: 100%;
            height: auto;
        }
    </style>

    <div id="load-all-loading" class="spinner-widget" style="display: none">
        <img id="loading-gif" src="{% static '/images/wait.gif' %}" alt="Loading...">
    </div>

</div>
    <script>
        $(function () {

            $('#object-search').show();

            {% if object_type != 'package' and object_type != 'user' and object_type != 'group' %}
                {% if reviewed_objects|length > 50 or unreviewed_objects|length > 50 %}
                    $('#load-all-loading').show()

                    setTimeout(function () {
                        $('#load-all-error').hide();

                        $.getJSON('?all=true', function (resp) {
                            $('#ReviewedContent').empty();
                            $('#UnreviewedContent').empty();

                            for (o in resp.objects) {
                                obj = resp.objects[o];
                                if (obj.reviewed) {
                                    $('#ReviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + ' <span class="glyphicon glyphicon-star" aria-hidden="true" style="float:right" data-toggle="tooltip" data-placement="top" title="" data-original-title="Reviewed"></span></a>');
                                } else {
                                    $('#UnreviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + '</a>');
                                }
                            }

                            $('#load-all-loading').hide();
                            $('#load-remaining').hide();
                        }).fail(function (resp) {
                            $('#load-all-loading').hide();
                            $('#load-all-error').show();
                        });

                    }, 2500);
                {% endif %}
            {% endif %}
        
            $('#modal-form-delete-submit').on('click', function (e) {
                e.preventDefault();
                $('#modal-form-delete').submit();
            });

            $('#object-search').on('keyup', function () {
                let query = $(this).val().toLowerCase();
                $('a.list-group-item').each(function () {
                    let text = $(this).text().toLowerCase();
                    $(this).toggle(text.indexOf(query) !== -1);
                });
            });

        });
    </script>
{% endblock content %}