{% extends 'base.html' %}

{% block head %}
  {{ super() }}
  <link href="{{ url_for('static', filename='vendor/tom-select/tom-select.bootstrap5.min.css', v='2.4.3') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='vendor/fa-assets/vendor/bootstrap-daterangepicker/daterangepicker.css', v='1.3.22') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='eportal-css/health_monitor.css') }}" rel="stylesheet">
{% endblock %}

{% block body %}
  {% block filters %}
    <ul class="nav nav-tabs actions-nav">
        <li class="dropdown">
          <a class="dropdown-toggle filter-button" data-bs-toggle="dropdown" href="#" role="button" tabindex="0" aria-expanded="false">
              Add Filter
          </a>
          <ul class="dropdown-menu field-filters">
              {% for k in filter_groups %}
              <li>
                  <a class="filter filter-option">{{ k }}</a>
              </li>
              {% endfor %}
          </ul>
        </li>
        <li class="active">
          <a>Selected servers: <b>{{ selected_servers }}</b> of <b>{{ total_servers }}</b></a>
        </li>
    </ul>
    <form id="filter_form" method="GET" action="{{ return_url }}">
        {% for arg_name, arg_value in extra_args.items() %}
        <input type="hidden" name="{{ arg_name }}" value="{{ arg_value }}">
        {% endfor %}
        {% if sort_column is not none %}
        <input type="hidden" name="sort" value="{{ sort_column }}">
        {% endif %}
        <div class="float-end">
            <button type="submit" class="btn btn-primary hidden-elem">Apply</button>
            {% if active_filters %}
            <a href="{{ clear_search_url }}" class="btn btn-secondary">Reset Filters</a>
            {% endif %}
        </div>
        <table class="filters"></table>
    </form>
    <div class="clearfix"></div>
  {% endblock %}

  <div class="mt-5">&nbsp;</div>
  <div class="dashboard-row">
    {% block uptime_info %}
      <div class="chart-container">
        <canvas id="uptime-distribution-chart"></canvas>
      </div>
      <div class="uptime-stats">
        <table class="table table-sm uptime-info">
          <tr>
            <td>Max uptime:</td>
            <td>{{ uptime['max'] }}</td>
          </tr>
          <tr>
            <td>Average uptime:</td>
            <td>{{ uptime['average'] }}</td>
          </tr>
          <tr>
            <td>Median uptime:</td>
            <td>{{ uptime['median'] }}</td>
          </tr>
        </table>
      </div>
    {% endblock %}
    {% block arch_distribution %}
      <div class="chart-container">
        <canvas id="arch-distribution-chart"></canvas>
      </div>
    {% endblock %}
  </div>

  <div class="mt-5">&nbsp;</div>
  {% block os_distribution %}
    <p class="h5 text-center">OS distribution (top 10)</p>
    <table class="table table-bordered table-striped os-distribution">
      <thead>
        <th>Distro name</th>
        <th title="KCare servers with activity in the last 30 days">KCare active servers</th>
        <th title="KCare servers with no activity in the last 30 days">KCare silent servers</th>
        <th title="LibCare Servers with activity in the last 30 days">LibCare active servers</th>
        <th title="LibCare with no activity in the last 30 days">LibCare silent servers</th>
      </thead>
      <tbody>
        {% for distro, kc_active_count, kc_silent_count, lc_active_count, lc_silent_count in os_distribution %}
        <tr class="{% if loop.last %}table-row--total{% endif %}">
          <td>{{ distro }}</td>
          <td>{{ kc_active_count }}</td>
          <td>{{ kc_silent_count }}</td>
          <td>{{ lc_active_count }}</td>
          <td>{{ lc_silent_count }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  {% endblock os_distribution %}

  {% block kernel_distribution %}
  <p class="h5 text-center">Kernel distribution (top 10)</p>
  <table class="table table-bordered table-striped kernel-distribution">
    <thead>
    <th>Kernel version</th>
    <th title="KCare servers with activity in the last 30 days">KCare active servers</th>
    <th title="KCare servers with no activity in the last 30 days">KCare silent servers</th>
    </thead>
    <tbody>
    {% for kernel, kc_active_count, kc_silent_count in kernel_distribution %}
    <tr class="{% if loop.last %}table-row--total{% endif %}">
      <td>{{ kernel }}</td>
      <td>{{ kc_active_count }}</td>
      <td>{{ kc_silent_count }}</td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
  {% endblock kernel_distribution %}
{% endblock %}

{% block tail %}
  {{ super() }}
  <div id="filter-groups-data" class="hidden-elem">{{ filter_groups|tojson|safe }}</div>
  <div id="active-filters-data" class="hidden-elem">{{ active_filters|tojson|safe }}</div>
  <div id="uptime-distribution-data" class="hidden-elem">{{ uptime_distribution_data|tojson|safe }}</div>
  <div id="arch-distribution-data" class="hidden-elem">{{ arch_distribution_data|tojson|safe }}</div>
  <script src="{{ url_for('static', filename='vendor/fa-assets/vendor/bootstrap-daterangepicker/daterangepicker.js', v='1.3.22') }}"></script>
  <script src="{{ url_for('static', filename='vendor/tom-select/tom-select.popular.min.js', v='2.4.3') }}"></script>
  <script src="{{ url_for('static', filename='vendor/fa-assets/admin/js/form.js', v='1.0.2') }}"></script>
  <script src="{{ url_for('static', filename='vendor/fa-assets/admin/js/filters.js', v='1.0.6') }}"></script>
  <script src="{{ url_for('static', filename='vendor/chart.umd.js', v='4.4.8') }}"></script>
  <script src="{{ url_for('static', filename='eportal-js/health_monitor.js') }}"></script>
{% endblock %}