{% extends "html/report_base.html" %}
{% import 'macros/report_title.macro' as TITLE %}
{% set NO_AGENT_SERVER_MSG = _('This group does not have any agent or server.') %}
{% set NO_DATA_MSG = _('No data found.') %}
{% block title %} {{ _("System Configuration Report") }} {% endblock %}
{% block report_header_text %}
    {{ TITLE.TitleElement("System Configuration Report") }}
{%endblock%}

{% block loading_text %}
{%endblock%}

{% block status_element_block %}
    <ul class="status-info pull-left p-2">
    {{ INFO.element(
      'pem-dashboard-icon icon-date_time',
      gettext("Generated On:"), 'report_generated', summary.report_generated_time
    ) }}
    </ul>

    <div class="pull-right p-1 d-flex">
        <span class="my-auto mr-2">
            <span class="my-auto">{{ _('Go to: ') }}</span>
        </span>
        <span>
            <select id="menu" class="select-font-size form-control">
                {% for key,group in report.items() %}
                <option value="{{group.name}}">{{group.name}}</option>
                {% endfor %}
            </select>
        </span>
    </div>

{% endblock %}

{% block css_block %}
  {# Embed files #}
  {% for css_file in css_files %}
    {{ css_file|safe }}
  {% endfor %}
{% endblock %}

{% block dashboard_body %}

<div class="row mb-2">
    <div class="col-12">
        <div class="dashboard-body">
            <div class="card mb-2">
                <div class="card accordian section mb-0">
                    <div class="card-header clearfix" data-toggle="collapse" data-target="#section-pem_summary" aria-expanded="true">
                        <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                            <div class="caret"></div>
                        </div>
                        <div class="label float-left pl-2 pr-2">{{ _('Postgres Enterprise Manager Summary') }}</div>
                    </div>
                    <div id="section-pem_summary" class="card-body negative-bg pl-4 show collapse">
                    <div class="dashboard-row row no-gutters">
                        <div class="chart-container col-12 row table-container" tabindex="0">
                            <div class="table-border-radius overflow-auto col-12">
                    <table class="table presentation table-bordered table-border-radius table-hover table-noouter-border">
                        <caption class="d-none">{{ _('Postgres Enterprise Manager Summary') }}</caption>
                    <thead>
                      <tr>
                          <th role="columnheader" scope="col" class="no-sort w-25">{{ _('Parameter') }}</th>
                          <th role="columnheader" scope="col" class="no-sort w-75">{{ _('Value') }}</th>
                      </tr>
                    </thead>
                        <tbody>
                            <tr>
                                <td>{{ _('Name') }}</td>
                                <td>{{ pem_info.name }}</td>
                            </tr>

                            <tr>
                                <td>{{ _('Backend version') }}</td>
                                <td>{{ pem_info.database }}</td>
                            </tr>

                            <tr>
                                <td>{{ _('App version') }}</td>
                                <td>{{ pem_info.version }}</td>
                            </tr>

                            <tr>
                                <td>{{ _('User') }}</td>
                                <td>{{ pem_info.user }}</td>
                            </tr>

                            <tr>
                                <td>{{ _('Python version') }}</td>
                                <td>{{ pem_info.python }}</td>
                            </tr>

                            <tr>
                                <td>{{ _('Flask  version') }}</td>
                                <td>{{ pem_info.flask }}</td>
                            </tr>

                            {% for key, value in pem_info.items() %}
                                {% if key == 'platform' %}
                                <tr>
                                    <td>{{ key|capitalize }}</td>
                                    <td>
                                        {% for key, val in value.items() %}
                                        <div class="col-12 pl-0 d-flex">
                                            <div class="col-1"><strong>{{ key|capitalize }}</strong></div>
                                            <div class="col-11">: {{ val }}</div>
                                        </div>
                                        {% endfor %}
                                    </td>

                                </tr>
                                {% endif %}
                            {% endfor %}
                        </tbody>
                </table>
                </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <div class="card mb-2">
                <div class="card accordian section mb-0">
                    <div class="card-header clearfix" data-toggle="collapse" data-target="#section_summary" aria-expanded="true">
                        <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                            <div class="caret"></div>
                        </div>
                        <div class="label float-left pl-2 pr-2">{{ _('Summary') }}</div>
                    </div>
                    <div id="section_summary" class="card-body negative-bg pl-4 show collapse">
                        <div class="dashboard-row row no-gutters">
                            <div class="chart-container col-12 row table-container" tabindex="0">
                                <div class="table-border-radius overflow-auto col-12">
                                    <table class="table presentation table-bordered table-border-radius table-hover table-noouter-border">
                                        <caption class="d-none">{{ _('Summary') }}</caption>
                                        <thead>
                                      <tr>
                                          <th role="columnheader" scope="col" class="no-sort w-25">{{ _('Parameter') }}</th>
                                          <th role="columnheader" scope="col" class="no-sort w-75">{{ _('Value') }}</th>
                                      </tr>
                                    </thead>
                                        <tbody>
                                            <tr>
                                                <td>{{ _('Agents') }}</td>
                                                <td>
                                                    <div class="col-12 pl-0 d-flex">
                                                        <div class="col-2"><strong>{{ _('Windows') }}</strong></div>
                                                        <div class="col-10">: {{ summary.total_windows_agents }}</div>
                                                    </div>
                                                    <div class="col-12 pl-0 d-flex">
                                                        <div class="col-2"><strong>{{ _('Linux') }}</strong></div>
                                                        <div class="col-10">: {{ summary.total_unix_linux_agents }}</div>
                                                    </div>
                                                </td>
                                            </tr>

                                            <tr>
                                                <td>{{ _('Servers') }}</td>
                                                <td>
                                                    <div class="col-12 pl-0 d-flex">
                                                        <div class="col-2"><strong>{{ _('PG') }}</strong></div>
                                                        <div class="col-10">: {{ summary.total_pg_servers }}</div>
                                                    </div>
                                                    <div class="col-12 pl-0 d-flex">
                                                        <div class="col-2"><strong>{{ _('EPAS') }}</strong></div>
                                                        <div class="col-10">: {{ summary.total_epas_servers }}</div>
                                                    </div>
                                                    <div class="col-12 pl-0 d-flex">
                                                        <div class="col-2"><strong>{{ _('Unknown') }}</strong></div>
                                                        <div class="col-10">: {{ summary.total_unknwon_servers }}</div>
                                                    </div>
                                                    <div class="col-12 pl-0 d-flex">
                                                        <div class="col-2"><strong>{{ _('Locally Managed') }}</strong></div>
                                                        <div class="col-10">: {{ summary.total_locally_monitored_servers }}</div>
                                                    </div>
                                                    <div class="col-12 pl-0 d-flex">
                                                        <div class="col-2"><strong>{{ _('Remotely Managed') }}</strong></div>
                                                        <div class="col-10">: {{ summary.total_remotely_monitored_servers }}</div>
                                                    </div>
                                                    <div class="col-12 pl-0 d-flex">
                                                        <div class="col-2"><strong>{{ _('Unmanaged') }}</strong></div>
                                                        <div class="col-10">: {{ summary.total_unmanaged_servers }}</div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {% for key,group in report.items() %}
                {% set grouploop = loop %}
                <div class="card accordian section">
                    <div class="card-header clearfix" data-toggle="collapse" data-target="#section-{{grouploop.index}}" aria-expanded="true">
                        <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                            <div class="caret"></div>
                        </div>
                        <div id="Group-{{grouploop.index}}" class="label float-left pr-2 pl-2">Group: {{group.name}} </div>
                    </div>

                    <div id="section-{{grouploop.index}}" class="card-body negative-bg show collapse">
                    <div class="dashboard-row row">
                        <div class="chart-container col-12 table-container" tabindex="0">
                            {% if group.agents|length == 0 and group.servers|length == 0%}
                                <span class="table my-auto d-flex justify-content-center p-2">
                                    <em class="fa fa-info my-auto pr-2" role="img"></em>
                                        <span class="my-auto">{{ NO_AGENT_SERVER_MSG }}</span>
                                </span>
                            {% else %}
                                {% for agent in group.agents %}
                                {% set agentloop = loop %}
                                <div class="card mb-2">
                                    <div class="card-header">
                                        <div class="label font-weight-bold" id="agent-{{agent.id}}">{{ _('Agent: ') }} {{agent.description}}</div>
                                    </div>
                                    <div class="card-body">
                                            <table class="table presentation table-bordered table-border-radius table-noouter-border ag_server_details">
                                                <caption class="d-none">{{ _('Agent: ') }} {{agent.description}}</caption>
                                                <thead>
                                                <tr>
                                                    <th scope="col" class="d-none"></th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td class="accordian section m-0 p-0">
                                                            <div class="card-header clearfix" data-toggle="collapse" data-target="#sub-section-agent-{{grouploop.index}}{{agentloop.index}}" aria-expanded="true">
                                                                <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                                                                    <div class="caret"></div>
                                                                </div>
                                                                <div class="label float-left pr-2 pl-2 border-0">
                                                                    {{ _('Agent Details') }}
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="negative-bg show collapse" id="sub-section-agent-{{grouploop.index}}{{agentloop.index}}">
                                                        <td class="m-0 p-0 report-td">
                                                            <div class="card-body negative-bg ml-4">
                                                            <div class="dashboard-row row no-gutters">
                                                                <div class="chart-container col-12 row table-container" tabindex="0">
                                                                    {% if agent|length > 0 %}
                                                                        <div class="table-border-radius overflow-auto col-12">
                                                                            <table class="table presentation table-bordered table-border-radius table-hover table-noouter-border table-sysconfig-agent">
                                                                                <caption class="d-none">{{ _('Agent Details') }}</caption>
                                                                            <thead>
                                                                              <tr>
                                                                                  <th role="columnheader" scope="col" class="no-sort w-25">{{ _('Parameter') }}</th>
                                                                                  <th role="columnheader" scope="col" class="no-sort w-75">{{ _('Value') }}</th>
                                                                              </tr>
                                                                            </thead>
                                                                                <tbody>
                                                                                    <tr>
                                                                                        <td>{{ _('Platform') }}</td>
                                                                                        <td>{{ agent.platform|capitalize }}</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td>{{ _('OS') }}</td>
                                                                                        <td>{{ agent.os_details }}</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td>{{ _('Version') }}</td>
                                                                                        <td>{{ agent.version }}</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td>{{ _('Active') }}</td>
                                                                                        <td>{{ agent.active }}</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td>{{ _('Hostname') }}</td>
                                                                                        <td>{{ agent.hostname }}</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td>{{ _('Domain Name') }}</td>
                                                                                        <td>{{ agent.domainname }}</td>
                                                                                    </tr>
                                                                                    {% if agent.os_details and agent.os_details.startswith('windows') %}
                                                                                        <tr>
                                                                                            <td>{{ _('Windows Domain') }}</td>
                                                                                            <td>{{ agent.windows_domain }}</td>
                                                                                        </tr>
                                                                                    {% endif %}
                                                                                    <tr>
                                                                                        <td>{{ _('Bound Local Servers') }}</td>
                                                                                        {% if agent.bound_local_servers and agent.bound_local_servers|length > 0 %}
                                                                                        <td>
                                                                                            <ul>
                                                                                            {% for server in agent.bound_local_servers %}
                                                                                            <li class="ml-3"><a href="#server-{{ server.server_id }}">{{ server.server_name }}</a></li>
                                                                                            {% endfor %}
                                                                                            </ul>
                                                                                        </td>
                                                                                        {% else %}
                                                                                        <td>(none)</td>
                                                                                        {% endif %}
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td>{{ _('Bound Remote Servers') }}</td>
                                                                                        {% if agent.bound_remote_servers and agent.bound_remote_servers|length > 0 %}
                                                                                        <td>
                                                                                            <ul>
                                                                                            {% for server in agent.bound_remote_servers %}
                                                                                            <li class="ml-3"><a href="#server-{{ server.server_id }}">{{ server.server_name }}</a></li>
                                                                                            {% endfor %}
                                                                                            </ul>
                                                                                        </td>
                                                                                        {% else %}
                                                                                        <td>(none)</td>
                                                                                        {% endif %}
                                                                                    </tr>

                                                                                </tbody>
                                                                        </table>
                                                                        </div>
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        </td>

                                                    </tr>
                                                    <tr>
                                                        <td class="accordian section m-0 p-0">
                                                            <div class="card-header clearfix" data-toggle="collapse" data-target="#sub-section-cpu-{{grouploop.index}}{{agentloop.index}}" aria-expanded="true">
                                                                <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                                                                    <div class="caret"></div>
                                                                </div>
                                                                <div class="label float-left pr-2 pl-2 border-0">
                                                                    {{ _('CPU') }}
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="negative-bg show collapse" id="sub-section-cpu-{{grouploop.index}}{{agentloop.index}}">
                                                        <td>
                                                            <div class="card-body negative-bg ml-4">
                                                            <div class="dashboard-row row no-gutters">
                                                                <div class="chart-container col-12 row table-container" tabindex="0">
                                                                    <div class="col-12">
                                                                        <div class="mb-2">
                                                                            <strong>{{ _('Total CPU Cores: ') }} </strong>
                                                                            <span>{{agent.total_cpu_cores}}</span>
                                                                        </div>
                                                                        <div class="mb-2">
                                                                            <strong>{{ _('Average CPU Utilization (%%): ') }} </strong>
                                                                            <span>{{agent.avg_cpu_utilization_percentage}}</span>
                                                                        </div>
                                                                        {% if agent.cpu_core_details %}
                                                                            {% if agent.cpu_core_details|length > 0 %}
                                                                                <div class="border table-border-radius overflow-auto">
                                                                                    <table class="table presentation table-bordered table-border-radius table-hover table-noouter-border">
                                                                                        <caption class="d-none">{{ _('CPU') }}</caption>
                                                                                    <thead>
                                                                                      <tr>
                                                                                          <th role="columnheader" scope="col" class="no-sort w-25">{{ _('Core ID') }}</th>
                                                                                          <th role="columnheader" scope="col" class="no-sort w-75">{{ _('Load Percentage') }}</th>
                                                                                      </tr>
                                                                                    </thead>
                                                                                 <!-- Display values for each CPU core -->
                                                                                {% for cpu in agent.cpu_core_details %}
                                                                                    <tr>
                                                                                        <td>{{cpu.core_id}}</td>
                                                                                        <td>{{cpu.load_percentage}}</td>
                                                                                    </tr>
                                                                                {% endfor %}
                                                                                </table>
                                                                                </div>
                                                                            {% endif %}
                                                                        {% endif %}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="accordian section m-0 p-0">
                                                            <div class="card-header clearfix" data-toggle="collapse" data-target="#sub-section-disk-{{grouploop.index}}{{agentloop.index}}" aria-expanded="true">
                                                                <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                                                                    <div class="caret"></div>
                                                                </div>
                                                                <div class="label float-left pr-2 pl-2 border-0">
                                                                    {{ _('Disk Utilization') }}
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="negative-bg show collapse" id="sub-section-disk-{{grouploop.index}}{{agentloop.index}}">
                                                        <td>
                                                            <div class="card-body negative-bg ml-4">
                                                            <div class="dashboard-row row no-gutters">
                                                                <div class="chart-container col-12 row table-container" tabindex="0">
                                                                    <div class="col-12">
                                                                        <div class="mb-2">
                                                                            <strong>{{ _('Total Disk Size (MB): ') }} </strong>
                                                                            <span>{{agent.total_disk_size_mb}}</span>
                                                                        </div>
                                                                        <div class="mb-2">
                                                                            <strong>{{ _('Disk Space Used (MB): ') }} </strong>
                                                                            <span>{{agent.total_disk_space_used_mb}}</span>
                                                                        </div>
                                                                        <div class="mb-2">
                                                                            <strong>{{ _('Disk Space Available (MB): ') }} </strong>
                                                                            <span>{{agent.total_disk_space_available_mb}}</span>
                                                                        </div>
                                                                        <div class="mb-2">
                                                                            <strong>{{ _('Disk Utilization (%%): ') }} </strong>
                                                                            <span>{{agent.disk_utilization_percentage}}</span>
                                                                        </div>
                                                                        {% if agent.disk_utilization_details %}
                                                                            {% if agent.disk_utilization_details|length > 0 %}
                                                                                <div class="border table-border-radius overflow-auto">
                                                                                    <table class="table presentation table-bordered table-border-radius table-hover table-noouter-border">
                                                                                        <caption class="d-none">{{ _('Disk Utilization') }}</caption>
                                                                                        <thead>
                                                                                      <tr>
                                                                                          <th role="columnheader" scope="col" class="no-sort">{{ _('Mount Point') }}</th>
                                                                                          <th role="columnheader" scope="col" class="no-sort">{{ _('File System') }}</th>
                                                                                          <th role="columnheader" scope="col" class="no-sort">{{ _('Size (MB)') }}</th>
                                                                                          <th role="columnheader" scope="col" class="no-sort">{{ _('Space Used (MB)') }}</th>
                                                                                          <th role="columnheader" scope="col" class="no-sort">{{ _('Space Available (MB)') }}</th>
                                                                                      </tr>
                                                                                    </thead>

                                                                                        <!-- Display values for each CPU core -->
                                                                                        {% for disk in agent.disk_utilization_details %}
                                                                                            {% if disk.size_mb|int > 0 %}
                                                                                            <tr>
                                                                                                <td>{{disk.mount_point}}</td>
                                                                                                <td>{{disk.file_system}}</td>
                                                                                                <td>{{disk.size_mb}}</td>
                                                                                                <td>{{disk.space_used_mb}}</td>
                                                                                                <td>{{disk.space_available_mb}}</td>
                                                                                            </tr>
                                                                                            {% endif %}
                                                                                        {% endfor %}
                                                                                    </table>
                                                                                </div>
                                                                            {% endif %}
                                                                        {% endif %}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="accordian section m-0 p-0">
                                                            <div class="card-header clearfix" data-toggle="collapse" data-target="#sub-section-memory-{{grouploop.index}}{{agentloop.index}}" aria-expanded="true">
                                                                <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                                                                    <div class="caret"></div>
                                                                </div>
                                                                <div class="label float-left pr-2 pl-2 border-0">
                                                                    {{ _('Memory Details') }}
                                                                </div>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="negative-bg show collapse" id="sub-section-memory-{{grouploop.index}}{{agentloop.index}}">
                                                        <td>
                                                            <div class="card-body negative-bg ml-4">
                                                            <div class="dashboard-row row no-gutters">
                                                                <div class="chart-container col-12 row table-container" tabindex="0">
                                                                    {% if agent.mem_details %}
                                                                        {% if agent.mem_details|length > 0 %}
                                                                            <div class="table-border-radius overflow-auto col-12">
                                                                                <table class="table presentation table-bordered table-border-radius table-hover table-noouter-border">
                                                                                    <caption class="d-none">{{ _('Memory Details') }}</caption>
                                                                                <thead>
                                                                                  <tr>
                                                                                      <th role="columnheader" scope="col" class="no-sort w-25">{{ _('Parameter') }}</th>
                                                                                      <th role="columnheader" scope="col" class="no-sort w-75">{{ _('Value') }}</th>
                                                                                  </tr>
                                                                                </thead>
                                                                                    <tbody>
                                                                                        <tr>
                                                                                            <td>{{ _('Free RAM (MB)') }} </td>
                                                                                            <td>{{agent.mem_details.free_ram_memory_mb}}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Memory Usage Percentage') }} </td>
                                                                                            <td>{{agent.mem_details.mem_usage_percentage}}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Total Swap Memory (MB)') }} </td>
                                                                                            <td>{{agent.mem_details.total_swap_memory_mb}}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Free Swam Memory (MB)') }} </td>
                                                                                            <td>{{agent.mem_details.free_swap_memory_mb}}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Swap Usage Percentage') }} </td>
                                                                                            <td>{{agent.mem_details.swap_usage_percentage}}</td>
                                                                                        </tr>
                                                                                    </tbody>
                                                                            </table>
                                                                            </div>
                                                                        {% else %}
                                                                            <span class="table my-auto d-flex justify-content-center p-2">
                                                                                <em class="fa fa-info my-auto pr-2" role="img"></em>
                                                                                <span class="my-auto">{{ NO_DATA_MSG }}</span>
                                                                            </span>
                                                                        {% endif %}
                                                                    {% endif %}
                                                                </div>
                                                            </div>
                                                        </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                    </div>
                                </div>
                                {% endfor %}



                                {% for server in group.servers %}
                                    {% set serverloop = loop %}
                                    <div class="card mb-2">
                                        <div class="card-header">
                                            <div class="label font-weight-bold" id="server-{{server.id}}">{{ _('Server: ') }} {{server.description}}</div>
                                        </div>
                                        <div class="card-body">
                                                <table class="table presentation table-bordered table-border-radius table-noouter-border ag_server_details">
                                                    <caption class="d-none">{{ _('Server: ') }} {{server.description}}</caption>
                                                    <thead>
                                                    <tr>
                                                        <th scope="col" class="d-none"></th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td class="accordian section m-0 p-0">
                                                                <div class="card-header clearfix" data-toggle="collapse" data-target="#sub-section-server-{{grouploop.index}}{{serverloop.index}}" aria-expanded="true">
                                                                    <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                                                                        <div class="caret"></div>
                                                                    </div>
                                                                    <div class="label float-left pr-2 pl-2 border-0">
                                                                        {{ _('Server Details') }}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr class="negative-bg show collapse" id="sub-section-server-{{grouploop.index}}{{serverloop.index}}">
                                                            <td class="m-0 p-0 report-td">
                                                                <div class="card-body negative-bg ml-4">
                                                                <div class="dashboard-row row no-gutters">
                                                                    <div class="chart-container col-12 row table-container" tabindex="0">
                                                                        {% if server|length > 0 %}
                                                                            <div class="table-border-radius overflow-auto col-12">
                                                                                <table class="table presentation table-bordered table-border-radius table-hover table-noouter-border">
                                                                                    <caption class="d-none">{{ _('Server Details') }}</caption>
                                                                                <thead>
                                                                                  <tr>
                                                                                      <th role="columnheader" scope="col" class="no-sort w-25">{{ _('Parameter') }}</th>
                                                                                      <th role="columnheader" scope="col" class="no-sort w-75">{{ _('Value') }}</th>
                                                                                  </tr>
                                                                                </thead>
                                                                                    <tbody>
                                                                                        <tr>
                                                                                            <td>{{ _('Agent') }}</td>
                                                                                            {% if server.agent_id %}
                                                                                            <td><a href="#agent-{{ server.agent_id }}">{{ server.agent_name }}</a></td>
                                                                                            {% else %}
                                                                                            <td>(none)</td>
                                                                                            {% endif %}
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Host') }}</td>
                                                                                            <td>{{ server.host }}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Port') }}</td>
                                                                                            <td>{{ server.port }}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Database') }}</td>
                                                                                            <td>{{ server.database }}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Version') }}</td>
                                                                                            <td>{{ server.version }}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Sevice Id') }}</td>
                                                                                            <td>{{ server.service_id }}</td>
                                                                                        </tr>
                                                                                        <tr>
                                                                                            <td>{{ _('Remote Monitored?') }}</td>
                                                                                            <td>{{ server.is_remote_monitoring }}</td>
                                                                                        </tr>

                                                                                        <tr>
                                                                                            <td>{{ _('Active') }}</td>
                                                                                            <td>{{ server.active }}</td>
                                                                                        </tr>
                                                                                    </tbody>
                                                                            </table>
                                                                            </div>
                                                                        {% endif %}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            </td>

                                                        </tr>
                                                        <tr>
                                                            <td class="accordian section m-0 p-0">
                                                                <div class="card-header clearfix" data-toggle="collapse" data-target="#sub-section-db-{{grouploop.index}}{{serverloop.index}}" aria-expanded="true">
                                                                    <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                                                                        <div class="caret"></div>
                                                                    </div>
                                                                    <div class="label float-left pr-2 pl-2 border-0">
                                                                        {{ _('Database Details') }}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr class="negative-bg show collapse" id="sub-section-db-{{grouploop.index}}{{serverloop.index}}">
                                                            <td>
                                                                <div class="card-body negative-bg ml-4">
                                                                <div class="dashboard-row row no-gutters">
                                                                    <div class="chart-container col-12 row table-container" tabindex="0">
                                                                        <div class="col-12">
                                                                            {% if server.db_details %}
                                                                                <div class="table-border-radius overflow-auto">
                                                                                    <table class="table presentation table-bordered table-border-radius table-hover table-noouter-border">
                                                                                        <caption class="d-none">{{ _('Database Details') }}</caption>
                                                                                    <thead>
                                                                                      <tr>
                                                                                          <th role="columnheader" scope="col" class="no-sort">{{ _('Name') }}</th>
                                                                                          <th role="columnheader" scope="col" class="no-sort">{{ _('Size (MB)') }}</th>
                                                                                          <th role="columnheader" scope="col" class="no-sort">{{ _('Tablespace Name') }}</th>
                                                                                      </tr>
                                                                                    </thead>
                                                                                {% for db in server.db_details %}
                                                                                    <tr>
                                                                                        <td>{{db.database_name}}</td>
                                                                                        <td>{{db.database_size_mb}}</td>
                                                                                        <td>{{db.tablespace_name}}</td>
                                                                                    </tr>
                                                                                {% endfor %}
                                                                                </table>
                                                                                </div>
                                                                            {% else %}
                                                                                <span class="table my-auto d-flex justify-content-center p-2">
                                                                                    <em class="fa fa-info my-auto pr-2" role="img"></em>
                                                                                    <span class="my-auto">{{ NO_DATA_MSG }}</span>
                                                                                </span>
                                                                            {% endif %}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            </td>
                                                        </tr>
                                                        <tr>
                                                            <td class="accordian section m-0 p-0">
                                                                <div class="card-header clearfix" data-toggle="collapse" data-target="#sub-section-tablespace-{{grouploop.index}}{{serverloop.index}}" aria-expanded="true">
                                                                    <div class="btn collapse-handle float-left negative-bg" tabindex="0" aria-label="{{ _('collapse/expand button') }}">
                                                                        <div class="caret"></div>
                                                                    </div>
                                                                    <div class="label float-left pr-2 pl-2 border-0">
                                                                        {{ _('Tablespace Details') }}
                                                                    </div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        <tr class="negative-bg show collapse" id="sub-section-tablespace-{{grouploop.index}}{{serverloop.index}}">
                                                            <td>
                                                                <div class="card-body negative-bg ml-4">
                                                                <div class="dashboard-row row no-gutters">
                                                                    <div class="chart-container col-12 row table-container" tabindex="0">
                                                                        <div class="col-12">
                                                                            {% if server.tablespace_details %}
                                                                                <div class="table-border-radius overflow-auto">
                                                                                    <table class="table presentation table-bordered table-border-radius table-hover table-noouter-border">
                                                                                        <caption class="d-none">{{ _('Tablespace Details') }}</caption>
                                                                                    <thead>
                                                                                      <tr>
                                                                                          <th role="columnheader" scope="col" class="no-sort w-25">{{ _('Name') }}</th>
                                                                                          <th role="columnheader" scope="col" class="no-sort w-75">{{ _('Size (MB)') }}</th>
                                                                                      </tr>
                                                                                    </thead>
                                                                                {% for tablespace in server.tablespace_details %}
                                                                                    <tr>
                                                                                        <td>{{tablespace.tablespace_name}}</td>
                                                                                        <td>{{tablespace.tablespace_size_mb}}</td>
                                                                                    </tr>
                                                                                {% endfor %}
                                                                                </table>
                                                                                </div>
                                                                            {% else %}
                                                                                <span class="table my-auto d-flex justify-content-center p-2">
                                                                                    <em class="fa fa-info my-auto pr-2" role="img"></em>
                                                                                    <span class="my-auto">{{ NO_DATA_MSG }}</span>
                                                                                </span>
                                                                            {% endif %}
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                        </div>
                                    </div>
                                    {% endfor %}
                                {% endif %}
                        </div>
                    </div>
                </div>
                </div>

            {% endfor %}

        </div>
    </div>
</div>
{% endblock %}

{% block script_block %}
  {% for js_file in js_files %}
    {{ js_file|safe }}
  {% endfor %}
{% endblock %}