{% extends "layouts/default_ext.html" %}

{% block title %} Case Timeline {% endblock title %}

{% block stylesheets %}
<link rel="stylesheet" href="/static/assets/css/bootstrap-datetime.css">
<link rel="stylesheet" href="/static/assets/css/suggestags.css">
<link rel="stylesheet" href="/static/assets/css/bootstrap-select.min.css">
<link rel="stylesheet" href="/static/assets/css/select2.css">

{% endblock stylesheets %}

{% block content %}

{% include 'includes/navigation_ext.html' %}


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

    <div class="content">
			<!-- Navbar Header -->
			<nav class="navbar navbar-header navbar-expand-lg bg-primary-gradient nav-sticky" id="timeline-nav">
				{{ form.hidden_tag() }}
				<ul class="container-fluid mt-3 mb--2">
                    <ul class="navbar-nav col-8">
                        <li class="nav-item hidden-caret col-12">
                            <div class="row">
                                <div id='timeline_filtering' class="col-9 pt-2 pl-2" style="border-radius:3px;" ></div>
                                <button class="btn btn-sm btn-light ml-2 pt-2" onclick="filter_timeline();">
                                   Apply filter
                                </button>
                                <button class="btn btn-sm btn-light ml-1 pt-2" onclick="reset_filters();">
                                   Reset
                                </button>
                                <i class="ml-1 mt-1 fa-regular text-white fa-circle-question" title="Filter help" style="cursor:pointer;" onclick="show_timeline_filter_help();"></i>
                            </div>
                        </li>
                     </ul>
                    <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 hidden-caret">
                            <button class="btn btn-primary btn-sm" onclick="get_or_filter_tm();">
                                <span class="menu-title">Refresh</span>
                            </button>
                        </li>

                        <li class="nav-item hidden-caret">
                            <button class="btn btn-dark btn-sm" onclick="add_event();">
                                <span class="menu-title">Add event</span>
                            </button>
                        </li>
                         <li class="nav-item hidden-caret">
                            <button class="btn btn-dark btn-sm" onclick="toggle_tree_view();">
                                <span class="menu-title">Toggle view</span>
                            </button>
                        </li>
                        <li class="nav-item">
                            <div class="dropdown">
                              <button class="btn btn-sm btn-border btn-black" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <span class="menu-title"><i class="fas fa-ellipsis-v"></i></span>
                              </button>
                              <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                  <a class="dropdown-item" href="javascript:void(0);" onclick="toggle_tree_view();"> Toggle tree view</a>
                                  <a class="dropdown-item" href="javascript:void(0);" onclick="toggle_compact_view();"> Toggle compact view</a>
                                  <div class="dropdown-divider"></div>
                                  <a class="dropdown-item" href="timeline/visualize?cid={{session['current_case'].case_id}}"> Visualize</a>
                                  <a class="dropdown-item" href="timeline/visualize?cid={{session['current_case'].case_id}}&group-by=asset"> Visualize by asset</a>
                                  <a class="dropdown-item" href="timeline/visualize?cid={{session['current_case'].case_id}}&group-by=category">Visualize by category</a>
                                  <div class="dropdown-divider"></div>
                                  <a class="dropdown-item" href="#" onclick="timelineToCsv();"><small class="fa fa-download mr-2"></small> Download as CSV</a>
                                  <a class="dropdown-item" href="#" onclick="timelineToCsvWithUI();"><small class="fa fa-download mr-2"></small> Download as CSV with user info</a>
                                  <div class="dropdown-divider"></div>
                                  <a class="dropdown-item" href="#" onclick="fire_upload_csv_events();"><small class="fa fa-upload mr-2"></small> Upload CSV of events</a>
                              </div>
                            </div>
                        </li>
                    </ul>
                </ul>
			</nav>

        {% if current_user.is_authenticated %}

        <div class="page-inner">
            <div class="row">
                <div class="loader1 text-center ml-mr-auto" id="loading_msg">Loading...</div>
                <div class="col-md-12" id="card_main_load" style="display:none;">
                    <div id="paginator"></div>
                    <ul class="timeline" id="timeline_list">

                    </ul>
                </div>
            </div>
            <div id="side_timeline">
                <button class="btn btn-round bg-transparent btn_over_page_a btn_over_page_delete btn-conditional" title="Delete selected events" onclick="events_bulk_delete();"><i class="fas fa-trash text-danger"></i></button>

            <div class="btn_over_page_b">
                <button class="btn btn-round btn-light btn-conditional-2 colorinput-color bg-white" title="color1" onclick="events_set_attribute('event_color', '#fff')"></button>
                <button class="btn btn-round btn-light btn-conditional-2 colorinput-color bg-primary" title="color2" onclick="events_set_attribute('event_color', '#1572E899')"></button>
                <button class="btn btn-round btn-light btn-conditional-2 colorinput-color bg-secondary" title="color3" onclick="events_set_attribute('event_color', '#6861CE99')"></button>
                <button class="btn btn-round btn-light btn-conditional-2 colorinput-color bg-info" title="color4" onclick="events_set_attribute('event_color', '#48ABF799')"></button>
                <button class="btn btn-round btn-light btn-conditional-2 colorinput-color bg-success" title="color5" onclick="events_set_attribute('event_color', '#31CE3699')"></button>
                <button class="btn btn-round btn-light btn-conditional-2 colorinput-color bg-danger" title="color5" onclick="events_set_attribute('event_color', '#F2596199')"></button>
                <button class="btn btn-round btn-light btn-conditional-2 colorinput-color bg-warning" title="color5" onclick="events_set_attribute('event_color', '#FFAD4699')"></button>
                <button class="btn btn-round bg-transparent  btn-conditional" title="Change color" onclick="toggle_colors()"><i class="fas fa-tint"></i></button>
            </div>
            <div class="btn_over_page_i" style="display: flex; flex-direction: column;">
                <button class="btn btn-round bg-transparent  btn-conditional" title="Toggle Summary" onclick="events_set_attribute('event_in_summary')"><i class="fas fa-newspaper"></i></button>
                <button class="btn btn-round bg-transparent  btn-conditional" title="Toggle Graph" onclick="events_set_attribute('event_in_graph')"><i class="fas fa-share-alt"></i></button>
                <button class="btn btn-round bg-transparent " title="Select events" onclick="toggle_selector();" id="selector-btn"><i class="fas fa-check-double"></i></button>
                <button class="btn btn-round bg-transparent " title="Add new event" onclick="add_event();"><i class="fas fa-plus-circle"></i></button>
                <button class="btn btn-round bg-transparent " title="Toggle child events" onclick="toggle_child_events();"><i class="fas fa-folder-tree"></i></button>
                <button class="btn btn-round bg-transparent  " title="Refresh" onclick="get_or_filter_tm();"><i class="fas fa-redo-alt"></i></button>
                <button class="btn btn-round bg-transparent " title="Go at the top" onclick="to_page_up();"><i class="fas fa-arrow-up"></i></button>
                <button class="btn btn-round bg-transparent" title="Go at the bottom" onclick="to_page_down();"><i class="fas fa-arrow-down"></i></button>
            </div>
        
        </div>


        <div class="modal shadow-lg" tabindex="-1" id="modal_add_event" data-backdrop="static">
            <div class="modal-xl modal-dialog" role="document">
                <div class="modal-content" id="modal_add_event_content">

                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>
        {% endif %}
    </div>

    <!-- BEGIN RS_CODE -->
    <div class="modal " tabindex="-1" role="dialog" id="modal_upload_csv_events" data-backdrop="true">
      <div class="modal-lg modal-dialog" role="document">
        <form method="post" action="" id="form_upload_csv_events">

          <div class="modal-content">
            <div class="modal-header">
              <h5>Upload events list (CSV format)</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span></button>
            </div>

            <div class="modal-body">
                <div class="form-group">
                    <label for="csv_format" class="placeholder">Expected Events CSV File format</label>
                    <textarea id="csv_format" class="form-control col-md-12 col-sm-12 sizable-textarea" rows="2" disabled>event_timestamp,event_title,event_description,linked_assets,linked_IoCs,event_tags (separated with &quot;|&quot;),event_color,event_raw_data</textarea>
                </div>
                <div class="form-group">
                    <label class="placeholder">Events CSV File format example</label>
                    <textarea class="form-control col-md-12 col-sm-12 sizable-textarea" rows="3" disabled>
event_date,event_tz,event_title,event_category,event_content,event_raw,event_source,event_assets,event_iocs,event_tags
"2023-03-26T03:00:30.000","+00:00","An event","Unspecified","Event description","raw","source","","","defender|malicious"
"2023-03-23T12:00:35.000","+00:00","An event","Legitimate","Event description","raw","source","","","admin_action"
                    </textarea>
                </div>
                  <div class="form-group">
                      <label class="placeholder">Choose CSV file to import : </label>
                      <input id="input_upload_csv_events" type="file" accept="text/csv">
                  </div>
            </div>
            <div class='invalid-feedback' id='ioc-invalid-msg'></div>
            <div class="modal-footer">
                    <button type="button" class="btn btn-outline-dark mr-auto" onclick="generate_events_sample_csv();">Download sample CSV</button>
                    <button type="button" class="btn btn-outline-success" onclick="upload_csv_events();">Upload</button>
            </div>
          </div><!-- /.modal-content -->
        </form>
      </div><!-- /.modal-dialog -->
    </div>
    <!-- END_RS_CODE -->
    {% include 'includes/footer.html' %}
</div>

{% endblock content %}
{% block javascripts %}

{% include 'includes/footer_case.html' %}
<script src="/static/assets/js/iris/case.timeline.js"></script>
<script src="/static/assets/js/core/socket.io.js"></script>
<script src="/static/assets/js/timeline.js"></script>

{% endblock javascripts %}