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

{% if reviewed_objects.count > 50 or unreviewed_objects.count > 50  %}
{% if object_type != 'package' %}
<div id="load-remaining-button-div">
    <button class="btn btn-secondary btn-lg btn-block" type="button" id="load-remaining">Load all {% if reviewed_objects.count > 0 %} {{ reviewed_objects.count }} {% else %} {{ unreviewed_objects.count }} {% endif %} {{ object_type }}s
    </button>
    <p></p>
    <div id="load-all-loading"></div>
    <p></p>
    <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 %}
{% endif %}

{% block action_modals %}
{% if object_type == 'package' %}
{% include "modals/collections/new_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>
</div>
    <script>
        $(function () {

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

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

            if ($('#load-remaining').length) {
                $('#load-remaining').on('click', function () {

                    makeLoadingGif("#load-all-loading", "{% static '/images/wait.gif' %}");
                    $('#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 + '</a>');
                            } else {
                                $('#UnreviewedContent').append('<a class="list-group-item" href="' + obj.url + '">' + obj.name + '</a>');
                            }
                        }

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

            $('#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 %}