{% extends "base.html" %}
{% block title %}{{ config.APP_NAME }}{% endblock %}
{% block init_script %}
try {
  require(
    ['pgadmin', 'pgadmin.browser'],
    function(pgAdmin, pgBrowser) {
      pgBrowser.init();
    },
    function() {
      /* TODO:: Show proper error dialog */
      console.log(arguments);
    });
} catch (err) {
  /* Show proper error dialog */
  console.log(err);
}
{% endblock %}
{% block body %}
<nav class="navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-menu">
        <span class="sr-only">{{ _('Toggle navigation') }}</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="app-icon {{ config.APP_ICON }}"></i>
        <span>&nbsp;{{ config.APP_NAME }}</span>
      </a>
    </div>

    <div class="collapse navbar-collapse" id="navbar-menu">

      <ul class="nav navbar-nav">

        <li id="mnu_file" class="dropdown hide">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ _('File') }} <span class="caret"></span></a>
          <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
        </li>
        <li id="mnu_edit" class="dropdown hide">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ _('Edit') }} <span class="caret"></span></a>
          <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
        </li>
        <li id="mnu_obj" class="dropdown ">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ _('Object') }} <span class="caret"></span></a>
          <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
        </li>
        <li id="mnu_management" class="dropdown hide">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ _('Management') }} <span class="caret"></span></a>
          <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
        </li>
        <li id="mnu_tools" class="dropdown hide">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ _('Tools') }} <span class="caret"></span></a>
          <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
        </li>
        <li id="mnu_help" class="dropdown hide">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">{{ _('Help') }} <span class="caret"></span></a>
          <ul class="dropdown-menu navbar-inverse" role="menu"></ul>
        </li>
      </ul>
      {% if config.SERVER_MODE %}
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><img src="{{ username | gravatar }}" width="18" height="18" alt="Gravatar image for {{ username }}"> {{ username }} <span class="caret"></span></a>
          <ul class="dropdown-menu navbar-inverse">
            <li><a href="{{ url_for('security.change_password') }}">{{ _('Change Password') }}</a></li>
            <li class="divider"></li>
            <li><a href="{{ url_for('security.logout') }}">{{ _('Logout') }}</a></li>
          </ul>
        </li>
      </ul>
      {% endif %}
    </div>

  </div>
</nav>

<div id="dockerContainer" style="position:absolute;left:0px;right:0px;top:50px;bottom:0px;"></div>

{% include 'browser/messages.html' %}

{% endblock %}