{% load i18n static dashboard_tags vault_tags %}

<nav id="sidebar" class="col-md-2">

  <a href="{% url 'main' %}" class="vault-logo">
    <img src="{% static 'vault/img/logo-white.svg' %}" alt="Vault">
  </a>

  <div class="current-project btn-group">
  {% if project_name and project_id %}
    <button class="btn btn-primary p-name" type="button" title="{{ project_name }}">{{ project_name }}</button>
    <button class="btn btn-primary p-options dropdown-toggle dropdown-toggle-split" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu dropdown-menu-right">
      <a class="dropdown-item" href="{% url 'change_project' %}">{% trans "Change Project" %}</a>
      <a class="dropdown-item" href="{% url 'edit_project' project_name project_id %}">{% trans "Edit Project" %}</a>
    </div>
  {% endif %}
  </div>

  <div class="sidebar-secrets">
    <div class="vault-env {% get_vault_env %}">{% get_vault_env %}</div>
  </div>

  <div class="separator">
    <span>{% trans 'Main' %}</span>
  </div>

  <ul class="app-menus" id="sidebar-app-menus">
    <li>
      <a href="{% url 'main' %}" title="{% trans 'Home' %}" data-toggle="tooltip" data-placement="right">
        <i class="icon fa fa-home"></i> {% trans 'Home' %}
      </a>
    </li>
  </ul>

  <div class="separator">
    <span>{% trans 'Settings' %}</span>
  </div>

  <ul class="admin-menus" id="sidebar-admin-menus">
    <li>
      <a href="{% url 'update_teams_users' project_name %}" title="{% trans 'Manage Team' %}"
         data-toggle="tooltip" data-placement="right">
        <i class="icon fas fa-users-cog"></i> {% trans 'Manage my Team' %}
      </a>
    </li>
    {% if user.is_staff %}
    <li>
      <a href="{% url 'team_users' project_name %}" title="Teams and Users" data-toggle="tooltip" data-placement="right">
        <i class="icon fa fa-building"></i> {% trans 'Teams and Users' %}
      </a>
    </li>
    <li>
      <a href="{% url 'admin:index' %}" title="{% trans 'Settings' %}" data-toggle="tooltip" data-placement="right">
        <i class="icon fa fa-cog"></i> {% trans 'Vault Admin' %}
      </a>
    </li>
    {% endif %}
  </ul>

  <script type="text/html" id="menu_icon_default">
    <a class="app-main-menu-item" href="<%=url%>" title="<%=name%>">
      <i class="icon <%=icon%>"></i> <%=name%>
    </a>
  </script>

  <script type="text/html" id="submenu_icon_default">
    <a href="<%=url%>" title="<%=name%>">
      <i class="icon fas fa-caret-right"></i> <%=name%>
    </a>
  </script>

  <script src="{% static 'vault/js/menu.js' %}"></script>
  <script>
    $(document).ready(function() {
      VaultMenu.init({
        'endpoints': [{% autoescape off %}{% info_endpoints %}{% endautoescape %}]
      });
    });
  </script>

</nav>
