{% comment %}

Edit gene lists via a modal

Input:
- id: prefix of element identifiers
- type: 'gene_lists'

{% endcomment %}

<style>
    .list-group {
        max-height: 500px;
        overflow-y: auto;
        margin-left: -1px;
        padding-right: 1px;
    }

    .w-450px { width: 450px; }
    .mt-35px { margin-top: 35px; }
</style>

{% include "./alignment.html" %}

<div class="modal fade"
     id="{{ id }}_{{ type }}_editor"
     tabindex="-1"
     data-bs-backdrop="static"
     data-bs-keyboard="false"
     aria-labelledby="{{ id }}_{{ type }}_modal_label"
     aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="{{ id }}_{{ type }}_editor_label">Gene lists</h1>
                <span class="ms-2 me-5 small">{{ species.get_html_link }}</span>

                <div class="ms-auto d-flex align-items-center">
                    {% load headings %}
                    {% data_dropdown id %}
                    <button type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"></button>
                </div>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-4">

                        <div class="input-group input-group-sm mb-3">
                            <span class="input-group-text">
                                <i class="fas fa-search"></i>
                            </span>
                            <input id="{{ id }}_{{ type }}_search"
                                   type="search"
                                   class="form-control"
                                   placeholder="Filter by name of lists...">
                        </div>

                        <div id="{{ id }}_{{ type }}_options" class="list-group"></div>

                        <template id="{{ id }}_{{ type }}_heading">
                            <div class="list-group-heading pt-1 px-2 d-flex justify-content-between">Preset gene lists</div>
                        </template>

                        <template id="{{ id }}_{{ type }}_element">
                            <button type="button"
                                    class="list-group-item list-group-item-action {{ id }}_{{ type }}_group_a px-2 py-1"
                                    data-bs-toggle="list">
                                <div class="d-grid d-lg-flex w-100 justify-content-between">
                                    <span class="truncate-3">
                                        <i class="fa fa-circle color-bullet {{ id }}_{{ type }}_group_bullet"></i>
                                        <span class="{{ id }}_{{ type }}_group_title small"></span>
                                    </span>

                                    <span class="{{ id }}_{{ type }}_group_count text-body-secondary small">140</span>
                                </div>
                            </button>
                        </template>

                        <div class="btn-group mt-3 w-100" role="group">
                            <button type="button"
                                    class="btn btn-outline-secondary btn-xs dropdown-toggle flat-right-border"
                                    data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                <i class="fa fa-plus"></i> New
                            </button>
                            <div class="dropdown-menu">
                                <button class="dropdown-item small"
                                        type="button"
                                        id="{{ id }}_{{ type }}_new_empty">
                                    <i class="fa-regular fa-circle fa-fw"></i>
                                    Empty list
                                </button>
                                <button class="dropdown-item small disabled"
                                        type="button"
                                        id="{{ id }}_{{ type }}_new_selected">
                                    <i class="fa fa-list-check fa-fw"></i>
                                    List with
                                    <span id="{{ id }}_{{ type }}_new_selected_count">0 selected genes</span>
                                </button>
                                <button type="button"
                                        class="dropdown-item small"
                                        id="{{ id }}_{{ type }}_new_duplicate">
                                    <i class="fa fa-clone fa-fw"></i>
                                    Duplicate from selected list
                                </button>

                                <hr class="dropdown-divider">

                                <button class="dropdown-item small" type="button">
                                    <i class="fa fa-shapes fa-fw"></i>
                                    Based on protein domains...
                                </button>

                                <button class="dropdown-item small"
                                        type="button"
                                        data-bs-toggle="modal"
                                        data-bs-target="#{{ id }}_alignment">
                                    <i class="fa fa-align-center fa-fw"></i>
                                    From sequence search...
                                </button>

                                {# djlint:off #}
                                <button class="dropdown-item small"
                                        type="button"
                                        onclick="document.getElementById('{{ id }}_{{ type }}_new_upload').click();"
                                        data-bs-toggle="tooltip"
                                        data-bs-placement="right"
                                        data-bs-html="true"
                                        data-bs-container="body"
                                        data-bs-custom-class="upload-tooltip"
                                        data-bs-title="
                                            <p>
                                                Comma- or tab-separated file<br>with four columns:
                                            </p>
                                            <ul class='text-start'>
                                                <li>Group of gene list</li>
                                                <li>Name of gene list</li>
                                                <li>Colour of gene list (HEX/RGB code or colour name)</li>
                                                <li>Gene symbol (one per line)</li>
                                            </ul>
                                            <p>
                                                <i class='fa fa-triangle-exclamation'></i>
                                                Lines starting with <code>#</code> are ignored.
                                                <br />
                                                <i class='fa fa-triangle-exclamation'></i>
                                                File size limited to {{ MAX_FILE_SIZE }} MB.
                                            </p>
                                            <hr>
                                            <span>Example:</span>
                                            <table class='table table-sm table-dark table-hover my-1'>
                                                <tbody>
                                                    <tr>
                                                        <td>Custom</td>
                                                        <td>Homeoboxes</td>
                                                        <td>#ff6eb0</td>
                                                        <td>PAX6</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Custom</td>
                                                        <td>Homeoboxes</td>
                                                        <td>#ff6eb0</td>
                                                        <td>HOXA1</td>
                                                    </tr>
                                                    <tr>
                                                        <td>Custom</td>
                                                        <td>Myosins</td>
                                                        <td>red</td>
                                                        <td>MYH2</td>
                                                    </tr>
                                                </tbody>
                                            </table>">
                                    <i class="fa fa-file-arrow-up fa-fw"></i>
                                    Upload lists...

                                    <input id="{{ id }}_{{ type }}_new_upload"
                                           type="file"
                                           class="form-control form-control-sm d-none">
                                </button>
                                {# djlint:on #}

                                {% comment %}
                                <!-- Boolean operations -->
                                <hr class="dropdown-divider">
                                <p class="text-body-secondary small ps-3 mb-0">
                                    Boolean operations
                                </p>

                                <button class="dropdown-item" type="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Create a new list with all genes from selected lists">
                                    <i class="ph-duotone ph-unite"></i> Unite genes
                                </button>
                                <button class="dropdown-item" type="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Create a new list with intersecting genes from selected lists">
                                    <i class="ph-duotone ph-intersect"></i> Intersect genes
                                </button>
                                <button class="dropdown-item" type="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Create a new list with non-intersecting genes from selected lists">
                                    <i class="ph-duotone ph-exclude"></i> Exclude genes
                                </button>
                                <button class="dropdown-item" type="button" data-bs-toggle="tooltip" data-bs-placement="right" data-bs-title="Create a new list by subtracting genes from selected lists">
                                    <i class="ph-duotone ph-subtract"></i> Subtract genes
                                </button>
                                {% endcomment %}

                                <hr class="dropdown-divider">
                                <p class="text-body-secondary small mb-0 text-center">
                                    <i class="fa fa-shield-halved"></i>
                                    User lists are saved
                                    <br>
                                    <b>locally</b> on your device
                                </p>
                            </div>

                            <button id="{{ id }}_{{ type }}_reset"
                                    type="button"
                                    class="btn btn-outline-danger btn-xs"
                                    data-bs-toggle="tooltip"
                                    data-bs-placement="top"
                                    data-bs-html="true"
                                    data-bs-title="Remove user gene lists for {{ species.get_html }}">
                                <i class="fa fa-clock-rotate-left fa-fw"></i>
                                <span class="d-none d-lg-inline">Reset</span>
                            </button>
                        </div>
                    </div>
                    <div class="col-8">
                        <fieldset id="{{ id }}_{{ type }}_controls">
                            <div class="row">
                                <div class="col">

                                    <button type="button"
                                            class="btn btn-outline-secondary btn-sm dropdown-toggle"
                                            data-bs-toggle="dropdown"
                                            aria-expanded="false"
                                            data-bs-auto-close="outside">
                                        <i class="fa fa-plus"></i>
                                        Add genes
                                    </button>
                                    <div class="dropdown-menu">
                                        <div class="mx-4 mb-2 w-450px">
                                            <div class="row">
                                                <div class="col">
                                                    <div class="d-flex justify-content-between align-items-center small">
                                                        <label class="col-form-label">Select genes to add</label>

                                                        <button type="button"
                                                                class="btn btn-link btn-sm d-block text-end"
                                                                onclick="document.querySelector('#append_gene_selection').tomselect.clear();">
                                                            Clear selection
                                                        </button>
                                                    </div>

                                                    {% include "../select/gene.html" with id="append" name="gene_lists" hash=id limit=10 multiple="true" selected=query.gene_lists class=" " %}
                                                </div>

                                                <div class="col-auto">
                                                    <div class="d-flex mb-0 mt-35px">
                                                        <button id="{{ id }}_{{ type }}_append_btn"
                                                                type="button"
                                                                class="btn btn-primary">
                                                            Add genes
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <button id="{{ id }}_{{ type }}_rename_btn"
                                            type="button"
                                            class="btn btn-outline-secondary btn-sm">
                                        <i class="fa fa-pencil"></i>
                                        Rename...
                                    </button>
                                </div>
                                <div class="col-auto">
                                    <button id="{{ id }}_{{ type }}_remove"
                                            type="button"
                                            class="btn btn-outline-danger btn-sm"
                                            data-bs-toggle="tooltip"
                                            data-bs-placement="top"
                                            data-bs-title="Remove gene list">
                                        <i class="fa fa-trash"></i>
                                        <span class="d-none d-lg-inline">Remove</span>
                                    </button>
                                </div>
                            </div>
                        </fieldset>

                        <hr>
                        <table id="{{ id }}_{{ type }}_editor_table" class="display compact w-100">
                        </table>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% load static %}
<script type="module">
    import { initGeneListEditor } from "{% static 'app/dist/atlas/modals/list_editor.js' %}";

    let id = "{{id}}_{{type}}",
        species = "{{species}}",
        dataset = "{{dataset.slug}}",
        maxFileSize = {{ MAX_FILE_SIZE }};
    initGeneListEditor(id, species, dataset, maxFileSize);
</script>