<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />

    <title>{% block title %}temBoard {% if instance is defined %}/ {{ instance }} {% endif %}{% endblock %}</title>
    {% if vitejs.PROD %}
    {% for link in vitejs.css_links_for('temboard.js') %}{{ link|safe }}{% endfor %}
    {% else %}
    <!-- Require starting vitejs dev server with npm run dev. -->
    <script type="module" src="{{ vitejs.url_for('@vite/client') }}"></script>
    {% endif %}

    {% block head %}{# Put link and meta in head block to inject here #}{% endblock %}
  </head>

  <body>
    <script type="module" src="{{ vitejs.url_for('temboard.js') }}"></script>

    {# Header bar, hidden only on login page. #}
    {% if headerbar|default(True) %}
    <div class="navbar bg-primary navbar-static-top navbar-expand sticky-top p-0" data-bs-theme="dark">
      {% if sidebar|default(instance is defined) %}
      <a class="navbar-text fs-6 ms-3 text-white" href id="menu-collapse">
        <i class="fa fa-bars"></i>
      </a>
      {% endif %}
      <a class="navbar-brand p-0 ms-3 fw-bolder" href="/home" style="letter-spacing: -1px;">temBoard</a>
      {% if instance is defined %}
      {% set d = instance.discover or {} %}
      <span class="navbar-text p-0 fs-5 text-white text-truncate">
        /
        <span>{{instance.environment.name}}</span>
        /
        <strong>{{ instance.hostname }}:{{ instance.pg_port }}</strong>
      </span>
      {% endif %}
      {% if role %}
      <ul class="navbar-nav ms-auto">
        {% if role.is_admin %}
        <li class="nav-item text-nowrap">
          <a
            id="linkSettings"
            href="/settings/instances"
            data-bs-toggle="tooltip"
            data-bs-placement="bottom"
            class="nav-link"
            title="Manage instances and users"
          >
            <i class="fa fa-wrench"></i>
            Settings
          </a>
        </li>
        {% endif %}
        <li class="dropdown nav-item text-nowrap">
          <a
            href="#"
            class="nav-link dropdown-toggle"
            data-bs-toggle="dropdown"
            role="button"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <i class="fa fa-user"></i>
            {{role.role_name}}
            <span class="caret"></span>
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <a class="dropdown-item" href="/logout"><i class="fa fa-sign-out"></i> Logout</a>
          </div>
        </li>
      </ul>
      {% endif %}
    </div>
    {% endif %}{# end of header bar #}

    <div class="container-fluid">
      <div class="row">
        <!-- side bar -->
        {% if sidebar|default(instance is defined) %}
        <div class="sidebar sidebar-fixed-width col-lg-3 bg-light">
          <div class="sidebar-sticky d-flex flex-column">
            {% if instance is defined %}
            <ul class="nav nav-pills flex-column">
              {% set plugin_names = [] %}
              {% for plugin in instance.plugins %}
              {% set _ = plugin_names.append(plugin.plugin_name) %}
              {% endfor %}
              {% if plugin is undefined %}
              {% set plugin = 'builtin' %}
              {% endif %}
              {% if 'dashboard' in plugin_names %}
              <li class="nav-item">
                <a
                  href="/server/{{instance.agent_address}}/{{instance.agent_port}}/dashboard"
                  class="{{'active' if plugin == 'dashboard' else ''}} dashboard nav-link"
                >
                  <i class="fa fa-dashboard fa-fw"></i>
                  <span>Dashboard</span>
                </a>
              </li>
              {% endif %}
              {% if 'activity' in plugin_names %}
              <li class="nav-item">
                <a
                  href="/server/{{instance.agent_address}}/{{instance.agent_port}}/activity"
                  class="{{'active' if plugin == 'activity' else ''}} activity nav-link"
                >
                  <i class="fa fa-bars fa-fw"></i>
                  <span>Activity</span>
                </a>
              </li>
              {% endif %}
              {% if 'monitoring' in plugin_names %}
              <li class="nav-item">
                <a
                  href="/server/{{instance.agent_address}}/{{instance.agent_port}}/monitoring"
                  class="{{'active' if plugin == 'monitoring' else ''}} monitoring nav-link"
                >
                  <i class="fa fa-bar-chart-o fa-fw"></i>
                  <span>Monitoring</span>
                </a>
              </li>
              {% endif %}
              {% if 'monitoring' in plugin_names %}
              <li class="nav-item">
                <a
                  href="/server/{{instance.agent_address}}/{{instance.agent_port}}/alerting"
                  class="{{'active' if plugin == 'alerting' else ''}} alerting nav-link"
                >
                  <i class="fa fa-heart fa-fw"></i>
                  <span>Status</span>
                </a>
              </li>
              {% endif %}
              {% if 'pgconf' in plugin_names %}
              <li class="nav-item">
                <a
                  href="/server/{{instance.agent_address}}/{{instance.agent_port}}/pgconf/configuration"
                  class="{{'active' if plugin == 'pgconf' else ''}} pgconf nav-link"
                >
                  <i class="fa fa-cog fa-fw"></i>
                  <span>Configuration</span>
                </a>
              </li>
              {% endif %}
              {% if 'maintenance' in plugin_names %}
              <li class="nav-item">
                <a
                  href="/server/{{instance.agent_address}}/{{instance.agent_port}}/maintenance"
                  class="{{'active' if plugin == 'maintenance' else ''}} maintenance nav-link"
                >
                  <i class="fa fa-wrench fa-fw"></i>
                  <span>Maintenance</span>
                </a>
              </li>
              {% endif %}
              {% if 'statements' in plugin_names %}
              <li class="nav-item">
                <a
                  href="/server/{{instance.agent_address}}/{{instance.agent_port}}/statements"
                  class="{{'active' if plugin == 'statements' else ''}} statements nav-link"
                >
                  <i class="fa fa-tasks fa-fw"></i>
                  <span>Statements</span>
                </a>
              </li>
              {% endif %}
              <li class="nav-item">
                <a
                  href="/server/{{instance.agent_address}}/{{instance.agent_port}}/notifications"
                  class="{{'active' if plugin == 'notifications' else ''}} nav-link"
                >
                  <i class="fa fa-envelope fa-fw"></i>
                  <span>Notifications</span>
                </a>
              </li>
              <li class="nav-item">
                <a href="/server/{{instance.agent_address}}/{{instance.agent_port}}/about" class="nav-link">
                  <i class="fa fa-info fa-fw"></i>
                  <span>About</span>
                </a>
              </li>
            </ul>
            {% endif %}{# end of instance #} {% block sidebar %}{% endblock %}
          </div>
        </div>
        {% endif %}{# end of sidebar #}

        <!-- Contents -->
        <div class="main ms-auto p-3 position-relative">
          {% if instance is defined and instance.status is defined and instance.status is not none %}
          {%   set s = instance.status %}
          {%   if "pending_restart" in s.get("postgres",{}) and s.get("postgres",{})["pending_restart"] %}
          <div class="alert alert-warning" role="alert">
            <h2>
              <i class="fa fa-warning fa-fw"></i>WARNING
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </h2>
            <p>Some changes are pending and PostgreSQL should be restarted.</p>
          </div>
          {%   endif %}
          {% endif %}

          <div id="errorApp" class="row justify-content-center">
            <div class="col col-xl-6 col-10" v-cloak>
              <Error ref="error"></Error>
            </div>
          </div>

          {% block content %} {% endblock %}
        </div>
      </div>
    </div>
  </body>
</html>
