{% comment %}

Compare gene modules

Input:
- id: prefix used in the identifiers of all elements
- dataset: Dataset object

{% endcomment %}

{% load static %}

<style>
    #{{ id }}-vs-module {
        width:50px;
        height:50px;
        background-color: var(--primary-color)
    }
</style>

<div class="row g-2 mb-4 align-items-start">
    <div class="col-auto">
        <div class="d-flex justify-content-between align-items-center small">
            <label class="col-form-label">
                <i class="fa fa-list-check"></i>
                Dataset for comparison
            </label>
        </div>

        <div class="btn-group w-400px" role="group">
            {% include "../select/dataset.html" with id="modules" redirect="query" placeholder="Search..." prefix="" class="w-100" dataset=dataset2.slug anchor="modules" dataset_dict=compare_dataset_dict %}
        </div>
    </div>
</div>

{% if not dataset2 %}
    <p class="text-muted">
        <i class="fa fa-circle-exclamation"></i>
        Choose a dataset to compare.
    </p>
{% elif dataset2 == dataset %}
    <p class="text-muted">
        <i class="fa fa-circle-exclamation"></i>
        Choose a dataset different than the current one to compare.
    </p>
{% else %}
    <div class="row">
        <div class="col-12 col-lg-5">{% include "../plot_container.html" with id=id ratio="16/9" %}</div>

        <!-- Module comparison table -->
        <div class="col-12 col-lg-7">
            <div class="d-flex justify-content-center gap-3 align-items-center text-center small">
                <div class="d-flex flex-column align-items-center flex-grow-1 flex-shrink-1">
                    <div>{{ dataset.get_html_link }}</div>
                    <div id="{{ id }}-dataset-module">Loading module...</div>
                    <div id="{{ id }}-dataset-module-genes"></div>
                </div>

                <div id="{{ id }}-vs-module"
                     class="fw-bold fs-5 text-white rounded-circle d-flex align-items-center justify-content-center shadow">
                    VS
                </div>

                <div class="d-flex flex-column align-items-center flex-grow-1 flex-shrink-1">
                    <div>{{ dataset2.get_html_link }}</div>
                    <div id="{{ id }}-dataset2-module">Loading module...</div>
                    <div id="{{ id }}-dataset2-module-genes"></div>
                </div>
            </div>
            <div id="{{ id }}-jaccard" class="text-center small"></div>

            <table id="{{ id }}-module-compare-table"
                   class="table table-sm table-striped small">
            </table>
        </div>
    </div>

    <!-- JavaScript code -->
    <script type="module">
        {% load static %}
        import { loadModuleSimilarityPlot } from "{% static 'app/dist/atlas/module_similarity.js' %}";
        import { loadModuleGeneTable } from "{% static 'app/dist/atlas/module_overlaps.js' %}";

        // Load intersecting and unique genes from selected modules in the plot
        const id = "{{ id }}",
              d1 = "{{ dataset.slug }}",
              d1html = `{{ dataset.get_inline_html_link }}`,
              d1label = "{{ dataset }}";
        {% if dataset2 %}
            const d2 = "{{ dataset2.slug }}",
                  d2html = `{{ dataset2.get_inline_html_link }}`,
                  d2label = "{{ dataset2 }}";
        {% else %}
            const d2 = null,
                  d2html = null,
                  d2label = null;
        {% endif %}

        loadModuleSimilarityPlot(id, d1, d1label, d1html, d2, d2label, d2html, loadModuleGeneTable);
    </script>
{% endif %}