{% extends "base.html" %}
{% set active_page = "project" %}

{% block styles %}
<link rel="stylesheet" href="{{ static_url('css/vendor/hierarchy-select.min.css') }}">
<link rel="stylesheet" href="{{ static_url('css/vendor/bootstrap-treeview.min.css') }}">
<link rel="stylesheet" href="{{ static_url('css/vendor/jquery.contextMenu.min.css') }}">
{% endblock %}

{% block title %}{{ project.name }} | LibreQDA{% endblock %}

{% block containerclass %}container-fluid{% endblock %}

{% block contents %}
<div class="row flex-column flex-md-row">
    <!-- Left panel -->
    <div class="col-12 col-md-2-5 order-2 order-md-1" id="left-panel">
        {% include 'partials/project_sidebar.html' %}
        <div class="bordered-container sticky-top">
            <div class="codebook-header-wrap px-2 pt-2 pb-1 d-flex align-items-start gap-2">
                <div class="panel-side-controls d-flex flex-column align-items-center gap-1 flex-shrink-0">
                    <button id="toggle-left-panel" class="btn btn-sm btn-outline-secondary" title="{% trans %}Toggle panel{% endtrans %}">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button type="button" class="btn border-0 btn-sm" id="tag-treeview-help-icon"
                            title="{% trans %}Tips{% endtrans %}">
                        <i class="fas fa-question-circle"></i>
                    </button>
                </div>
                <div class="codebook-toolbar panel-content flex-grow-1 min-width-0">
                    <div class="compact-toggle-wrap form-check form-switch mb-0 d-flex align-items-center">
                        <input class="form-check-input me-1" type="checkbox" role="switch"
                            id="compact-layout-toggle" onchange="toggleCompactLayout()"
                            {% if project.compact_layout %}checked{% endif %}>
                        <label class="form-check-label small" for="compact-layout-toggle">
                            {% trans %}Compact{% endtrans %}
                        </label>
                    </div>
                    <a id="create-tag-link" class="btn btn-sm btn-primary rounded-4 codebook-toolbar-btn"
                        href="javascript:createTag()" data-test-id="create-tag-link"
                        title="{% trans %}Create a code{% endtrans %}">
                        <i class="fas fa-plus"></i><span class="btn-label"> {% trans %}Create a code{% endtrans %}</span>
                    </a>
                    <a id="explore-codes-link" class="btn btn-sm btn-outline-primary rounded-4 codebook-toolbar-btn"
                        href="javascript:openExploreCodes()" data-test-id="explore-codes-link"
                        title="{% trans %}Explore codes{% endtrans %}">
                        <i class="fas fa-search"></i><span class="btn-label"> {% trans %}Explore codes{% endtrans %}</span>
                    </a>
                    <div class="dropdown">
                        <button class="btn btn-sm rounded-4 btn-outline-primary" type="button"
                            id="tag-more-action-button" data-bs-toggle="dropdown" data-bs-auto-close="outside"
                            aria-haspopup="true" aria-expanded="false"
                            title="{% trans %}More actions{% endtrans %}">
                            <i class="fas fa-bars"></i><span class="btn-label"> {% trans %}More actions{% endtrans %}</span>
                        </button>
                        <div class="dropdown-menu" id="tag-menu-more-actions"
                            aria-labelledby="tag-more-action-button">
                            <h6 class="dropdown-header">{% trans %}Sort by{% endtrans %}</h6>
                            <a class="dropdown-item sort-option active" data-sort-field="path" data-sort-dir="asc" href="javascript:sortTagsBy('path', 'asc')">{% trans
                                %}Text [a&rarr;z]{% endtrans %}</a>
                            <a class="dropdown-item sort-option" data-sort-field="path" data-sort-dir="desc" href="javascript:sortTagsBy('path', 'desc')">{% trans %}Text
                                [z&rarr;a]{% endtrans %}</a>
                            {% if not user.hide_code_counts %}
                            <a class="dropdown-item sort-option" data-sort-field="count" data-sort-dir="asc" href="javascript:sortTagsBy('count', 'asc')">{% trans %}Count
                                [0&rarr;9]{% endtrans %}</a>
                            <a class="dropdown-item sort-option" data-sort-field="count" data-sort-dir="desc" href="javascript:sortTagsBy('count', 'desc')">{% trans %}Count
                                [9&rarr;0]{% endtrans %}</a>
                            {% endif %}
                            <div class="dropdown-divider"></div>
                            <a id="load-all-tags" class="dropdown-item" href="/project/{{ project.id }}/highlights/"
                                data-test-id="see-all-highlights-button">{% trans %}See all highlights{% endtrans
                                %}</a>
                            <a class="dropdown-item" href="javascript:expandAllNodes(treeview_tags)">{% trans
                                %}Expand all{% endtrans %}</a>
                            <a class="dropdown-item" href="javascript:collapseAllNodes(treeview_tags)">{% trans
                                %}Collapse all{% endtrans %}</a>
                            <div class="dropdown-divider"></div>
                            <button type="button" class="dropdown-item" id="dropdown-tips-btn">
                                <i class="fas fa-question-circle me-1"></i> {% trans %}Tips{% endtrans %}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mb-2 panel-content">
                <div class="form-group">
                    <input type="text" class="form-control" id="input-search-tags" autocomplete="off" placeholder="{% trans " tag change
                        form placeholder" %}Search for a code{% endtrans %}">
                </div>
                <div id="tag-selection-criteria-area" class="tag-selection-box mt-3 mb-3">
                </div>
                <p id="tag-selection-return"><a href="">{% trans %}Back to highlights{% endtrans %}</a></p>
                <div id="treeview-tags"></div>
                <div class="alert alert-info mt-2 d-none" role="alert" id="alert-tag-treeview">
                </div>
            </div>
        </div>
    </div>

    <!-- Right panel -->
    <div class="col-12 col-md-7-5 order-3 order-md-2" id="middle-panel">

        {% include 'partials/document_toolbar.html' %}

        <div id="document-view" class="document-view">
            <div id="document-contents">
                <p style="font-style: oblique; text-align: center;">{% trans %}Load a document from your bookmarks or on
                    the right{% endtrans %}</p>
            </div>
        </div>

        <button id="scroll-to-top-button" class="btn btn-primary rounded-circle scroll-btn d-none"
            title="Scroll to top">
            <i class="fas fa-arrow-up"></i>
        </button>

    </div>

    <!-- List of documents -->
    <div class="col-12 col-md-2-5 order-1 order-md-3" id="right-panel">
        <div class="bordered-container sticky-top">
            <div class="documents-header-wrap px-2 pt-2 pb-1 d-flex align-items-start gap-2">
                <div class="document-toolbar panel-content flex-grow-1 min-width-0">
                    <a class="btn btn-sm btn-outline-primary rounded-4 codebook-toolbar-btn"
                        href="javascript:createCollection()" data-test-id="create-collection-link"
                        title="{% trans %}Add a collection{% endtrans %}">
                        <i class="fas fa-folder-plus"></i> {% trans %}Collection{% endtrans %}
                    </a>
                    <a class="btn btn-sm btn-primary rounded-4 codebook-toolbar-btn" href="javascript:createDocument()"
                        data-test-id="create-document-link"
                        title="{% trans %}Add a document{% endtrans %}">
                        <i class="fas fa-plus"></i> {% trans %}Documents{% endtrans %}
                    </a>
                </div>
                <div class="panel-side-controls d-flex flex-column align-items-center gap-1 flex-shrink-0">
                    <button id="toggle-right-panel" class="btn btn-sm btn-outline-secondary" title="{% trans %}Toggle panel{% endtrans %}">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                    <button type="button" class="btn border-0 btn-sm" id="treeview-help-icon"
                            title="{% trans %}Tips{% endtrans %}">
                        <i class="fas fa-question-circle"></i>
                    </button>
                </div>
            </div>
            <div class="panel-content px-2 pb-1">
                <input type="text" class="form-control" id="input-search-titles" autocomplete="off"
                    placeholder="{% trans %}Search titles{% endtrans %}">
            </div>
            <!-- Documents treeview -->
            <div class="panel-content" id="treeview-documents">
                <div class="list-group-item disabled">{% trans %}Loading...{% endtrans %}</div>
            </div>
            <div class="alert alert-info mt-2 d-none" role="alert" id="alert-title-search"></div>
        </div>
    </div>
</div>

{% if is_demo == 'true' %}
<button id="start-tutorial" class="btn btn-primary rounded-4">{% trans %}Resume tutorial{% endtrans %}</button>
{% endif %}

<!-- Manage collaborators modal -->
{% include 'modal/manage_collaborators.html' %}

<!-- Add document modal -->
{% include 'modal/create_document.html' %}

<!-- Add collection modal -->
{% include 'modal/create_collection.html' %}

<!-- Change document modal -->
{% include 'modal/change_document.html' %}

<!-- Add/change highlight modal -->
{% include 'modal/create_highlight.html' %}

<!-- Explore codes modal -->
{% include 'modal/explore_codes.html' %}

<!-- Merge tags modal -->
{% include 'modal/create_tag.html' %}

<!-- Add/change tag modal -->
{% include 'modal/create_tag.html' %}

<!-- Merge tags modal -->
{% include 'modal/merge_tag.html' %}

<!-- Spinner modal -->
{% include 'partials/spinner.html' %}

<!-- Alert modal -->
{% include 'partials/alert.html' %}

<!-- Confirm modal -->
{% include 'partials/confirm.html' %}

<!-- Codebook visualization modal -->
{% include 'partials/codebook_viz_modal.html' %}

<!-- Initial state -->
<script type="text/javascript">
    const user_login = {{ user_login }};
    const project_id = {{ project.id }};
    const hideCodeCounts = {{ 'true' if user.hide_code_counts else 'false' }};
    const projectCompactLayout = {{ 'true' if project.compact_layout else 'false' }};
    const version = '{{ version }}';
    let documents = {{ documents }};
    let tags = {{ tags }};
    let members = {{ members }};
    let highlights = {};
    let last_event = {{ last_event }};
    let is_demo = {{ is_demo }};
    let demo_highlights_location = {{ demo_highlights_location }};
    let collections = {{ collections }};
</script>

<script type="text/javascript" src="{{ reverse_url('trans.js') }}?lang={{ user.language }}"></script>

<!-- "New highlight" button shown after selecting text -->
{% include 'partials/hlinfo.html' %}

{% endblock %}

{% block morejs %}

<!-- Should minify this but I hate NPM -->

<!-- Utilities -->
<script type="text/javascript" src="{{ static_url('js/utilities.js') }}"></script>

<!-- libraries -->
<script type="text/javascript" src="{{ static_url('js/vendor/hierarchy-select.min.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/vendor/bootstrap-treeview-custum.min.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/vendor/jquery.contextMenu.min.js') }}"></script>

<!-- tag -->
<script type="text/javascript" src="{{ static_url('js/tag/manager.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/tag/hierarchy-select.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/tag/treeview.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/tag/context-menu.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/tag/explore-codes.js') }}"></script>

<!-- collection -->
<script type="text/javascript" src="{{ static_url('js/collection/manager.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/collection/hierarchy-select.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/collection/context-menu.js') }}"></script>

<!-- highlight system -->
<script type="text/javascript" src="{{ static_url('js/highlight/renderer.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/highlight/loader.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/highlight/crud.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/highlight/extracts.js') }}"></script>

<!-- search documents -->
<script type="text/javascript" src="{{ static_url('js/project/search.js') }}"></script>

<!-- core -->
<script type="text/javascript" src="{{ static_url('js/taguette.js') }}"></script>

<!-- document -->
<script type="text/javascript" src="{{ static_url('js/document/manager.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/document/custom-select.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/document/treeview.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/document/context-menu.js') }}"></script>

<!-- codebook visualization -->
<script type="text/javascript" src="{{ static_url('js/codebook-viz.js') }}"></script>

<!-- others -->
<script type="text/javascript" src="{{ static_url('js/polling-event.js') }}"></script>

<script type="text/javascript">
    $(document).ready(function () {

        sortTagsBy('path', 'asc');
        addContextMenu();

        // Initialize document treeview
        initDocumentsTreeview();

    });

</script>

<script src="{{ static_url('js/project/intro.js') }}"></script>

{% endblock %}