{% extends "layouts/default_ext.html" %} {% block title %} Case notes {% endblock title %} {% block stylesheets %}
{% include 'includes/header_case.html' %}
<link rel="stylesheet" href="/static/assets/css/bootstrap-select.min.css">
{% endblock stylesheets %}
{% block content %}
{% include 'includes/navigation_ext.html' %}

{% include 'includes/sidenav.html' %}
<div class="main-panel">

    <div class="content">

        {% if current_user.is_authenticated %}
        {{ form.hidden_tag() }}
            <nav class="navbar navbar-header navbar-expand-lg pt-2 pb-2 bg-primary-gradient">
                <div class="container-fluid">
                     <div class="collapse search-flex" id="search-nav">
                         <ul class="list-group list-group-bordered hidden-caret" id="notes_search_list"></ul>
                         <input type="text" class="form-control mr-3" style="max-width:400px;" id="search_note_input" onkeyup="search_notes()" placeholder="Search in notes..">
                     </div>
					<ul class="navbar-nav topbar-nav ml-md-auto align-items-center page-navigation page-navigation-style-2 page-navigation-secondary">
                        <li class="nav-item ml-2">
                            <span class="text-white text-sm mr-2" id="last_resfresh">Loading</span>
                        </li>
                        <li class="nav-item">
                            <button class="btn btn-primary btn-sm" onclick="draw_kanban();">
                                <span class="menu-title">Refresh</span>
                            </button>
                        </li>
                        <li class="nav-item">
                            <button class="btn btn-dark btn-sm" onclick="add_remote_groupnote();">
                                <span class="menu-title">Add notes group</span>
                            </button>
                        </li>
					</ul>
            </div>


			</nav>
        <div class="page-inner">
            <div class="loader1 text-center ml-mr-auto" id="loading_msg">Loading...</div>
            <div id="empty-set-notes" style="display:none;">
                <h4 class="text-dark text-sm text-center ml-mr-auto">It looks pretty empty <i class="fa-solid fa-mug-hot ml-2"></i></h4>
                <h4 class="text-dark text-sm text-center ml-mr-auto"><a href="#" onclick="add_remote_groupnote();">Click here to add the first note group</a></h4>
            </div>
            <div class="row" id="card_main_load" style="display:none;">
                    <div class="container-fluid">
                            <div class="float-right mt-2 col">

                             </div>
                    </div>
            </div>
            <div class="row">
                    <div id="myKanban" class="board">
                    </div>
            </div>
            <div id="side_timeline">
                <button class="btn btn-round btn-primary-success btn_over_page_i" onclick="add_remote_groupnote();"><i class="fas fa-plus-circle"></i></button>
            </div>
        </div>

        <div class="kanban-item row" id="_subnote_" style="display: none;" onclick="edit_note(this);" title="">
            <a href="#" class="kanban-title text-truncate w-100" draggable="false">New note</a><br />
            <em><small href="#" class="text-sm text-muted kanban-info" draggable="false"><i
                        class="flaticon-tool mr-1"></i>Hello</small></em>
            <iris_note style="display: none;" id="xqx00qxq">New note</iris_note>

            <div class="kanban-badge avatar-group-note col-12" id="kanban_badge_">
            </div>
        </div>


        <div data-id="_todo" class="kanban-board" id="group_" title="" draggable="false" style="display: none;">
            <header class="kanban-board-header">
                <div class="row">
                    <div class="col-8">
                        <div contenteditable="true" maxlength="25" class="kanban-title-board" onclick="">Note group</div>
                    </div>
                    <div class="col">
                        <div class="kanban-title-button">
                            <div class="row mr-1">
                                <button class="mr-2" onclick="" style="display: none;"><i
                                        class="fas fa-check-circle text-success"></i></button>
                                <button class="mr-2" onclick=""><i class="fas fa-plus-circle "></i></button>
                                <div class="dropdown dropdown-kanban ">

                                    <button class="dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                        <i class="icon-options-vertical"></i>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton ">
                                        <a class="dropdown-item" href="#" draggable="false">Delete</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <main class="kanban-drag" id="_main">
            </main>
        </div>

        <div class="modal modal-case-focus" tabindex="-1" role="dialog" id="modal_note_detail" data-backdrop="true">
            <div class="modal-dialog modal-xxl modal-xl" role="document">
                <div class="modal-content" id="info_note_modal_content">

                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>

        {% endif %}
    </div>

    {% include 'includes/footer.html' %}
</div>
{% endblock content %}
{% block javascripts %}
{% include 'includes/footer_case.html' %}
<script src="/static/assets/js/plugin/sortable/sortable.js "></script>
<script src="/static/assets/js/core/socket.io.js"></script>
<script src="/static/assets/js/iris/case.notes.js "></script>

<script>
    /* Wait for document to be ready before loading the kanban board */
    $(document).ready(function () {
        /* load board */
        boardNotes.init();
        setInterval(function() { check_update('notes/state'); }, 3000);
        draw_kanban();
    });
</script>

{% endblock javascripts %}