{% extends "base_generic.html" %}
{% load crispy_forms_tags static %}

{% block pagetitle %}{{ name }} Entries{% endblock %}


{% block content %}
    <link rel="stylesheet" href="{% static 'vendor/asciinema-player/asciinema-player.css' %}" />
    <script src="{% static 'vendor/asciinema-player/asciinema-player.min.js' %}"></script>
    <script src="{% static 'js/purify.min.js' %}"></script>
    <script src="{% static 'js/oplog.js' %}"></script>
    <header class="oplog-page-heading" aria-labelledby="oplog-page-title">
        <div class="oplog-page-identity">
            <span class="detail-eyebrow">Activity log</span>
            <h2 id="oplog-page-title">{{ oplog.name }}</h2>
            <p>
                <a href="{% url 'rolodex:client_detail' oplog.project.client.id %}">{{ oplog.project.client }}</a>
                <span aria-hidden="true">&middot;</span>
                <a href="{% url 'rolodex:project_detail' oplog.project.id %}">{{ oplog.project }}</a>
            </p>
        </div>
        <div class="oplog-page-statuses" aria-label="Log status">
            <span
                class="oplog-header-badge oplog-status-badge is-neutral px-3 py-2"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="Oplog ID for use with the API and tools like `mythic_sync` and `cobalt_sync`"
            >Oplog ID #{{ oplog.id }}</span>
            <div id="oplog-sanitization-status" {% if not oplog_last_sanitization %}style="display:none;"{% endif %}>
                <button
                    id="oplog-sanitization-status-button"
                    type="button"
                    class="btn oplog-header-badge oplog-status-badge px-3 py-2 {% if oplog_sanitation_is_stale %}is-warning{% else %}is-information{% endif %}"
                    data-bs-toggle="modal"
                    data-bs-target="#oplog-sanitization-details-modal"
                    aria-label="View sanitization details"
                >
                    <i id="oplog-sanitization-status-icon" class="fas {% if oplog_sanitation_is_stale %}fa-exclamation-triangle{% else %}fa-shield-alt{% endif %}"></i>
                    <span id="oplog-sanitization-status-text">
                        {% if oplog_sanitation_is_stale %}Sanitized &middot; new changes{% else %}Sanitized{% endif %}
                    </span>
                </button>
            </div>
            <span id="oplog-notification-status" class="oplog-header-badge oplog-status-badge is-muted px-3 py-2 icon silenced-notification-icon" {% if not oplog.mute_notifications %}style="display:none;"{% endif %}>Notifications silenced</span>
            <span id="connectionStatus" class="oplog-header-badge oplog-status-badge is-neutral px-3 py-2 js-connection-status icon network-icon disconnected" aria-live="polite">Disconnected</span>
        </div>
    </header>

    <!-- Toolbar -->
    <div class="oplog-toolbar">
        <div class="oplog-toolbar-actions">
            <button id="createNewEntryButton" type="button" class="btn btn-sm oplog-create-entry oplog-toolbar-action" onclick="createEntry({{ oplog.pk }});">
                <i class="fas fa-plus-square" aria-hidden="true"></i> Create Entry
            </button>
            <button id="columnSelectDropdown" type="button" class="btn btn-outline-secondary btn-sm oplog-toolbar-action" aria-expanded="false" aria-controls="columnSelect">
                <i class="fas fa-angle-double-right oplog-columns-icon" aria-hidden="true"></i> Columns
            </button>
            <button id="resetSortBtn" type="button" class="btn btn-outline-secondary btn-sm oplog-toolbar-action">
                <i class="fas fa-sync" aria-hidden="true"></i> Reset Sort
            </button>
            <button class="btn btn-outline-secondary btn-sm" type="button" data-bs-toggle="modal" data-bs-target="#oplog-help-modal" title="Help"><i class="fas fa-question-circle"></i> Help</button>
            <div class="dropdown d-inline-block">
                <button id="oplog-dropdown-btn" type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="More oplog actions" title="More actions">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
                <div class="dropdown-menu oplog-action-menu" aria-labelledby="oplog-dropdown-btn">
                    <a href="{% url 'oplog:oplog_update' oplog.id %}" class="dropdown-item icon edit-icon" >Edit Log</a>
                    <a href="{% url "oplog:oplog_import" %}?log={{ oplog.id }}" class="dropdown-item icon upload-icon">Import Entries</a>
                    <a href="javascript:void(0)" id="exportEntries" class="dropdown-item icon export-icon">Export Entries</a>
                    {% if request.user.is_staff or request.user.role == "manager" or request.user.role == "admin" %}
                        <button
                            id="sanitize-button-{{ oplog.id }}"
                            type="button"
                            class="dropdown-item icon clean-icon js-confirm-sanitize"
                            data-sanitize-csrftoken="{{ csrf_token }}"
                            data-sanitize-url="{% url 'oplog:ajax_oplog_sanitize' oplog.id %}"
                            data-sanitize-id="{{ oplog.id }}"
                        >
                          Sanitize Entries
                        </button>
                        <a
                          href="javascript:void(0)"
                          class="dropdown-item js-toggle-mute icon {% if oplog.mute_notifications %}silenced-notification-icon{% else %}notification-bell-icon{% endif %}"
                          toggle-mute-csrftoken="{{ csrf_token }}"
                          toggle-mute-url="{% url 'oplog:ajax_oplog_mute_toggle' oplog.id %}"
                          toggle-mute-id="{{ oplog.id }}"
                        >
                          {% if oplog.mute_notifications %}
                              Notifications: Off
                          {% else %}
                              Notifications: On
                          {% endif %}
                        </a>
                    {% endif %}
                </div>
            </div>
        </div>

        <div class="oplog-toolbar-right">
            <button
                id="entryDefaultsButton"
                type="button"
                class="btn btn-outline-secondary btn-sm oplog-entry-defaults-button"
                data-bs-toggle="modal"
                data-bs-target="#oplog-entry-defaults-modal"
                aria-controls="oplog-entry-defaults-modal"
                title="Configure values applied to newly created entries"
            >
                <i class="fas fa-sliders-h" aria-hidden="true"></i>
                Entry Defaults
                <span id="entryDefaultsCount" class="oplog-entry-defaults-count d-none" aria-live="polite"></span>
            </button>
            <div class="input-group input-group-sm oplog-filter-group">
                <span class="input-group-text" id="filter-addon"><i class="fas fa-filter"></i></span>
                <input id="searchInput" type="search" class="form-control" placeholder="Filter entries" aria-label="Filter log entries" aria-describedby="filter-addon">
                <button id="clearSearchBtn" class="btn btn-outline-secondary" type="button" aria-label="Clear entry filter" disabled><i class="fas fa-times"></i></button>
            </div>
        </div>
    </div>

    <div id="columnSelect" style="display:none;">
        <div class="list-group-row" id="checkboxList">
        </div>
    </div>

    <!-- Split-pane oplog viewer -->
    <div class="oplog-split-container"
        data-oplog-name="{{ oplog.name }}"
        data-oplog-id="{{ oplog.id }}"
        data-time-zone="{{ TIME_ZONE }}"
        data-oplog-export-url="{% url 'oplog:oplog_export' oplog.pk %}"
        data-csrf-token="{{ csrf_token }}"
        data-evidence-upload-base-url="/oplog/entry/"
        data-project-has-reports="{% if project_has_reports %}true{% else %}false{% endif %}"
        data-project-url="{% url 'rolodex:project_detail' oplog.project.id %}"
    >
        <!-- Left: Entry List -->
        <div class="oplog-list-pane" id="oplogListPane">
            <div class="oplog-list-header" id="oplogListHeader">
                <table class="oplog-list-header-table">
                    <thead id="oplogTableHeader"></thead>
                </table>
            </div>
            <div class="oplog-list-scroll" id="oplogListScroll">
                <table id="oplogTable" class="oplog-list-table">
                    <thead id="oplogTableHeaderHidden" style="display:none;"></thead>
                    <tbody id="oplogTableBody"></tbody>
                </table>
                <div style="display:none;" id="oplogTableNoEntries" class="oplog-list-placeholder">
                    <i class="fas fa-inbox oplog-list-placeholder-icon" aria-hidden="true"></i>
                    <p id="oplogEmptyTitle" class="oplog-empty-title">No entries yet</p>
                    <p id="oplogEmptyDescription" class="oplog-empty-description">Create an entry to begin recording activity.</p>
                    <button id="oplogEmptyAction" type="button" class="btn btn-sm btn-outline-secondary">Create Entry</button>
                </div>
                <div style="display:none;" id="oplogTableLoading" class="oplog-list-placeholder">
                    <i class="fas fa-sync fa-spin" aria-hidden="true"></i> Loading entries...
                </div>
            </div>
        </div>

        <!-- Resize handle -->
        <div class="oplog-resize-handle" id="oplogResizeHandle" role="separator" aria-orientation="vertical" aria-label="Resize entry list and detail panes" tabindex="0">
            <div class="oplog-resize-grip"></div>
        </div>

        <!-- Right: Detail Viewer -->
        <div class="oplog-detail-pane" id="oplogDetailPane">
            <div class="oplog-detail-empty" id="oplogDetailEmpty">
                <i class="fas fa-mouse-pointer oplog-detail-empty-icon" aria-hidden="true"></i>
                <p class="oplog-detail-empty-title">Select an entry to view details</p>
                <p class="oplog-detail-empty-description">Double-click to edit &middot; Ctrl/Cmd+N to create</p>
            </div>
            <div class="oplog-detail-content" id="oplogDetailContent" style="display:none;"></div>
        </div>
    </div>
{% endblock %}

{% block morescripts %}
  {% comment %} Include the reusable delete confirmation modal and related scripts {% endcomment %}
  {% include "confirm_sanitize_modal.html" %}

  <div id="oplog-sanitization-details-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="oplogSanitizationDetailsLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="oplogSanitizationDetailsLabel"><i class="fas fa-shield-alt me-2"></i>Sanitization Details</h5>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <p id="oplog-sanitization-stale-message" class="text-warning {% if not oplog_sanitation_is_stale %}d-none{% endif %}"><i class="fas fa-exclamation-triangle me-1"></i>Changes were made to entries after this sanitization.</p>
                  <dl class="row mb-0">
                      <dt class="col-sm-4">Last sanitized</dt>
                      <dd id="oplog-sanitization-details-time" class="col-sm-8">{% if oplog_last_sanitization %}{{ oplog_last_sanitization.sanitized_at|date:"DATE_FORMAT" }} at {{ oplog_last_sanitization.sanitized_at|time:"TIME_FORMAT" }}{% endif %}</dd>
                      <dt class="col-sm-4">Sanitized by</dt>
                      <dd id="oplog-sanitization-details-user" class="col-sm-8">{% if oplog_last_sanitization %}{{ oplog_last_sanitization.sanitized_by_name }}{% endif %}</dd>
                      <dt class="col-sm-4">Fields</dt>
                      <dd id="oplog-sanitization-details-fields" class="col-sm-8 mb-0">
                          {% for field in oplog_last_sanitization_fields %}<span class="oplog-sanitization-field">{{ field }}</span>{% endfor %}
                      </dd>
                  </dl>
              </div>
          </div>
      </div>
  </div>

  <div id="edit-modal" class="modal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="oplog-entry-edit-title" data-tiptap-min-height="150" data-submit-on-mod-enter>
      <div class="modal-dialog modal-dialog-centered modal-super-sized modal-dialog-scrollable" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <div>
                      <span class="detail-eyebrow">Operation log</span>
                      <h5 class="modal-title" id="oplog-entry-edit-title">Edit entry</h5>
                      <p class="oplog-entry-modal-intro">Update the activity record without losing your place in the timeline.</p>
                  </div>
                  <button type="button" class="btn-close ms-auto align-self-start" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body text-start oplog-form-div"></div>
          </div>
      </div>
  </div>

  <div id="evidence-modal" class="modal fade oplog-evidence-modal" tabindex="-1" role="dialog" aria-labelledby="evidence-modal-title" aria-describedby="evidence-modal-description" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-lg modal-dialog-scrollable" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <div>
                      <span class="detail-eyebrow">Entry attachment</span>
                      <h5 class="modal-title" id="evidence-modal-title">Upload evidence</h5>
                      <p class="oplog-entry-modal-intro" id="evidence-modal-description">Attach supporting material without leaving the activity timeline.</p>
                  </div>
                  <button type="button" class="btn-close oplog-evidence-modal-close ms-auto align-self-start" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body oplog-evidence-form-div"></div>
          </div>
      </div>
  </div>

  <div id="oplog-entry-defaults-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="oplog-entry-defaults-title" aria-describedby="oplog-entry-defaults-description" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <div>
                      <span class="detail-eyebrow">New entries</span>
                      <h5 class="modal-title" id="oplog-entry-defaults-title">Entry defaults</h5>
                      <p class="oplog-entry-modal-intro" id="oplog-entry-defaults-description">Pre-fill routine context without changing existing or copied entries.</p>
                  </div>
                  <button type="button" class="btn-close ms-auto align-self-start" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body text-start">
                  <div class="row">
                      <div class="col-md-6 mb-3">
                          <label for="defaultSourceInput" class="form-label">Source</label>
                          <input id="defaultSourceInput" type="text" class="form-control js-oplog-entry-default" placeholder="IP address or hostname" autocomplete="off">
                      </div>
                      <div class="col-md-6 mb-3">
                          <label for="defaultDestinationInput" class="form-label">Destination</label>
                          <input id="defaultDestinationInput" type="text" class="form-control js-oplog-entry-default" placeholder="IP address or hostname" autocomplete="off">
                      </div>
                      <div class="col-12">
                          <label for="defaultUserContextInput" class="form-label">User Context</label>
                          <input id="defaultUserContextInput" type="text" class="form-control js-oplog-entry-default" placeholder="Domain or local account context" autocomplete="off">
                      </div>
                  </div>
                  <p class="oplog-entry-defaults-note mb-0"><i class="fas fa-info-circle" aria-hidden="true"></i> Defaults remain on this page until it is reloaded or closed.</p>
              </div>
              <div class="modal-footer">
                  <button id="clearEntryDefaultsBtn" type="button" class="btn btn-outline-secondary me-auto" disabled>Clear Defaults</button>
                  <button type="button" class="btn oplog-defaults-done" data-bs-dismiss="modal">Done</button>
              </div>
          </div>
      </div>
  </div>

  <div id="oplog-entry-delete-modal" class="modal fade destructive-confirmation-modal" tabindex="-1" role="dialog" aria-labelledby="oplog-entry-delete-title" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <div>
                      <span class="detail-eyebrow">Permanent action</span>
                      <h5 class="modal-title" id="oplog-entry-delete-title">Delete log entry?</h5>
                  </div>
                <button type="button" class="btn-close destructive-confirmation-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <p class="destructive-confirmation-copy">This entry and its linked activity record will be permanently removed.</p>
                  <div class="destructive-confirmation-warning" role="note">
                      <i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
                      <p><strong>This cannot be undone.</strong> The activity record cannot be restored after deletion.</p>
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button id="confirmOplogEntryDelete" type="button" class="btn btn-danger">Delete permanently</button>
              </div>
          </div>
      </div>
  </div>

  <!-- Export Modal -->
  <div id="export-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exportModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <h5 class="modal-title" id="exportModalLabel"><i class="fas fa-file-archive me-2"></i> Export Entries</h5>
                  <button type="button" class="btn-close ms-auto align-self-start" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                  <p>Select what to include with the export. If no attachments are selected, a plain CSV will be returned.</p>
                  <div class="mb-3">
                      <div class="form-check form-switch">
                          <input type="checkbox" class="form-check-input" id="export-recordings">
                          <label class="form-check-label" for="export-recordings">Include terminal recordings</label>
                      </div>
                      <div class="form-check form-switch mt-2">
                          <input type="checkbox" class="form-check-input" id="export-evidence">
                          <label class="form-check-label" for="export-evidence">Include linked evidence files</label>
                      </div>
                  </div>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                  <button id="exportModalDownload" type="button" class="btn btn-primary">Download</button>
              </div>
          </div>
      </div>
  </div>

  {{ oplog_entry_extra_fields_spec_ser|json_script:"oplog_entry_extra_fields_spec" }}

  <!-- Oplog Help Modal -->
  <div id="oplog-help-modal" class="modal fade oplog-help-modal" tabindex="-1" role="dialog" aria-labelledby="oplogHelpModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
          <div class="modal-content">
              <div class="modal-header">
                  <div>
                      <span class="oplog-help-modal-eyebrow">Activity log</span>
                      <h2 class="modal-title" id="oplogHelpModalLabel">Quick reference</h2>
                      <p class="oplog-help-modal-intro">Shortcuts and workflow cues for keeping the current log moving.</p>
                  </div>
                  <button type="button" class="btn-close oplog-help-modal-close" data-bs-dismiss="modal" aria-label="Close">
                  </button>
              </div>
              <div class="modal-body">
                  <div class="oplog-help-topic-grid">
                      <article class="oplog-help-topic">
                          <header><span class="oplog-help-topic-icon"><i class="fas fa-wifi" aria-hidden="true"></i></span><h3>Live updates</h3></header>
                          <p>Entries are kept in sync via <strong>WebSockets</strong>. The <span class="oplog-help-status is-connected">Connected</span> / <span class="oplog-help-status is-disconnected">Disconnected</span> indicator in the toolbar shows the current connection state.</p>
                          <p>Changes made by other operators appear automatically &mdash; no refresh needed.</p>
                      </article>

                      <article class="oplog-help-topic">
                          <header><span class="oplog-help-topic-icon"><i class="fas fa-sliders-h" aria-hidden="true"></i></span><h3>Entry defaults</h3></header>
                          <p>Use <strong>Entry Defaults</strong> to pre-fill Source, Destination, and User Context for entries created with <strong>Create Entry</strong>, <kbd>Ctrl+N</kbd>, or <kbd>Cmd+N</kbd>.</p>
                          <p>Defaults remain only on this page and clear when it reloads or closes. They do not overwrite existing or copied entries.</p>
                      </article>

                      <article class="oplog-help-topic oplog-help-topic-wide">
                          <header><span class="oplog-help-topic-icon"><i class="fas fa-mouse-pointer" aria-hidden="true"></i></span><h3>Navigation and selection</h3></header>
                          <ul>
                              <li><strong>Click</strong> a row to open the details pane; <strong>double-click</strong> to edit it.</li>
                              <li><strong>&uarr;&darr; arrow keys</strong> move between entries once one is selected; <kbd>Enter</kbd> opens its edit form.</li>
                              <li><kbd>Ctrl+Enter</kbd> or <kbd>Cmd+Enter</kbd> saves the edit form and closes it. <kbd>Esc</kbd> closes the details pane and returns the table to full width.</li>
                              <li><kbd>Ctrl+N</kbd> or <kbd>Cmd+N</kbd> creates a new entry.</li>
                              <li>Typing <code>@today</code>/<code>@date</code> or <code>@now</code>/<code>@time</code>, followed by a space or punctuation in rich text, inserts the current date or time.</li>
                          </ul>
                      </article>

                      <article class="oplog-help-topic">
                          <header><span class="oplog-help-topic-icon"><i class="fas fa-sort" aria-hidden="true"></i></span><h3>Sorting</h3></header>
                          <ul>
                              <li>The default order is <strong>start date, newest first</strong>.</li>
                              <li><strong>Click</strong> a column header to sort; <strong>Shift+click</strong> additional headers to add a secondary sort.</li>
                              <li>Sort preferences persist. Use <strong>Reset Sort</strong> to restore the default.</li>
                          </ul>
                      </article>

                      <article class="oplog-help-topic">
                          <header><span class="oplog-help-topic-icon"><i class="fas fa-columns" aria-hidden="true"></i></span><h3>Columns</h3></header>
                          <p>Click <strong>Columns</strong> to toggle individual columns. Your preferences are saved in your browser.</p>
                          <p>Long-form fields are truncated in the table; select an entry to read its full content in the details pane.</p>
                      </article>

                      <article class="oplog-help-topic">
                          <header><span class="oplog-help-topic-icon"><i class="fas fa-filter" aria-hidden="true"></i></span><h3>Filtering</h3></header>
                          <p>Use <strong>Filter Entries</strong> to search across every field, including fields hidden from the current table and terminal recording input or output.</p>
                          <p>Results update as you type. Clear the field or select <i class="fas fa-times" aria-hidden="true"></i> to remove the filter.</p>
                      </article>

                      <article class="oplog-help-topic">
                          <header><span class="oplog-help-topic-icon"><i class="fas fa-link" aria-hidden="true"></i></span><h3>Details and deep links</h3></header>
                          <p>The details pane includes full entry content, evidence attachments, and a terminal recording player.</p>
                          <p>Use the <i class="fas fa-link" aria-hidden="true"></i> <strong>deep link</strong> action to copy a URL that opens the log directly at an entry.</p>
                      </article>
                  </div>
              </div>
              <div class="modal-footer oplog-help-modal-footer">
                  <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
              </div>
          </div>
      </div>
  </div>


{% endblock %}