{% autoescape None %}
{% extends ../../../templates/base.html %}

{% block title %}[{{instance.hostname}}:{{instance.pg_port}}] - Activity / {% if mode == 'waiting' %}Waiting{% elif mode == 'blocking' %}Blocking{% elif mode == 'running' %}Running{% end %} queries{% end %}

{% block head %}
{% for link in vitejs.css_links_for('activity.js') %}{% raw link %}{% end %}
{% end %}

{% block content %}
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="ModalLabel"></h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" id="ModalInfo">
      </div>
      <div class="modal-body" id="ModalBody">
      </div>
      <div class="modal-footer" id="ModalFooter">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

<!-- Mode Tabs -->
<ul class="nav nav-tabs">
  <li class="{{'active' if mode == 'running' else ''}} nav-item">
    <a href="/server/{{instance.agent_address}}/{{instance.agent_port}}/activity/running" class="nav-link running"> Running</a>
  </li>
  <li class="{{'active' if mode == 'waiting' else ''}} nav-item">
    <a href="/server/{{instance.agent_address}}/{{instance.agent_port}}/activity/waiting" class="nav-link waiting"> Waiting
      <div id="waiting-count" class="badge badge-light" style="min-width: 2em;">&nbsp;</div>
    </a>
  </li>
  <li class="{{'active' if mode == 'blocking' else ''}} nav-item">
    <a href="/server/{{instance.agent_address}}/{{instance.agent_port}}/activity/blocking" class="nav-link blocking">Blocking
      <div id="blocking-count" class="badge badge-light" style="min-width: 2em;">&nbsp;</div>
    </a>
  </li>
</ul>

<!-- Action bar -->
<div class="row d-flex justify-content-between">
  <div class="col-auto">
    <span class="d-inline-block" data-toggle="tooltip" title="Terminate the backends selected below">
      <button type="button" class="btn btn-danger disabled" id="killButton">Terminate</button>
    </span>
  </div>
  <div class="col-auto align-self-center">
    <span id="autoRefreshResume" class="d-none text-muted">
      <a class="btn btn-secondary" id="resumeAutoRefresh" role="button" href><i class="fa fa-play"></i> resume auto refresh</a>
    </span>
    <span id="autoRefreshMsg" class="text-muted">
      <img id="loadingIndicator" src="/images/ring-alt.svg" width="24" class="fa-fw">
      Auto refresh
      <span id="intervalDuration">2s</span>
      <span id="autoRefreshPaused">paused</span>
    </span>
  </div>
  <div class="col-auto">
    <a class="btn collapse-toggle dropdown-toggle collapsed" data-toggle="collapse" href="#filters" role="button" aria-expanded="false" aria-controls="filters">
      filters
    </a>
  </div>
</div>

<!-- Filters drop down -->
<div class="row">
  <div class="col-12 collapse" id="filters">
    <div class="justify-content-end d-flex">
      <div class="form-group mb-1">
        <input id="searchFilter" type="text" placeholder="Search" class="form-control">
      </div>
    </div>
    <form id="state-filter" class="form-inline justify-content-end d-flex">
      <div class="form-group pr-1">
        <label><strong>States:</strong></label>
      </div>
      {% for state in ['active', 'idle', 'idle in transaction', 'idle in transaction (aborted)', 'fastpath function call', 'disabled'] %}
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="checkbox" id="state-filter-{{state}}" value="{{ state }}" checked>
        <label class="form-check-label" for="state-filter-{{state}}">{{ state }}</label>
      </div>
      {% end %}
    </form>
  </div>
</div>

<!-- Sessions table -->
<div class="row">
  <div class="col-12">
    <table id="tableActivity" class="table-activity table table-sm table-striped small table-query"></table>
    <p class="text-center text-muted">Showing 300 longest queries.</p>
  </div>
</div>

<script type="module" src="{{ vitejs.url_for('activity.js') }}"></script>
<script>
var xsession = {{ json_encode(xsession) }};
var agent_address = "{{instance.agent_address}}";
var agent_port = "{{instance.agent_port}}";
var activityMode = "{{mode}}";
var agentLoginUrl = '/server/{{ instance.agent_address }}/{{ instance.agent_port }}/login';
</script>

{% end %}