<div data-dojo-type="dijit.MenuBar" id="navMenu">
  {% if user.is_authenticated %}

  <div id="menuBar_Account" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openAccount();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/account.png" />
    <br />
    <span>{% trans "Account" %}</span>
  </div>

  <div id="menuBar_System" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openSystem();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/system.png" />
    <br />
    <span>{% trans "System" %}</span>
  </div>

  <div id="menuBar_Tasks" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openTasks();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/tasks.png" />
    <br />
    <span>{% trans "Tasks" %}</span>
  </div>

  <div id="menuBar_Network" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openNetwork();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/network.png" />
    <br />
    <span>{% trans "Network" %}</span>
  </div>

  <div id="menuBar_Storage" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openStorage();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/storage.png" />
    <br />
    <span>{% trans "Storage" %}</span>
  </div>

  <div id="menuBar_DirectoryService" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openDirectoryService();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/directoryservice.png" />
    <br />
    <span>{% trans "Directory" %}</span>
    <!-- span>{% trans "Directory Service" %}</span -->
  </div>

  <div id="menuBar_Sharing" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openSharing();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/sharing.png" />
    <br />
    <span>{% trans "Sharing" %}</span>
  </div>

  <div id="menuBar_Services" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openServices();" class="menu_icon">
    <img src="{{ STATIC_URL }}images/ui/menu/services.png" />
    <br />
    <span>{% trans "Services" %}</span>
  </div>

  {% for menu in menu_hook %}
  <div id="{% if menu.id %}{{ menu.id }}{% else %}menuBar_{{ forloop.counter }}{% endif %}" data-dojo-type="dijit.MenuBarItem" onClick="{{ menu.onclick }}" class="menu_icon{% if menu.align %} {{ menu.align }}{% endif %}"{% if menu.style %} style="{{ menu.style }}"{% endif %}>
    {% if menu.img %}
      {{ menu.img|safe }}
    {% else %}
      {% if menu.icon %}
      <img src="{{ STATIC_URL }}{{ menu.icon }}" />
      <br />
      {% endif %}
    {% endif %}
    <span>{{ menu.name|safe }}</span>
  </div>
  {% endfor %}

  <div id="menuBar_Alert" data-dojo-type="dijit.MenuBarItem" class="menu_icon right" onClick="alert_open();">
    <div data-dojo-type="dijit.layout.ContentPane" id="alert_status" class="alert_ok"></div>
    <span id="menuBar_AlertText">{% trans "Alert" %}</span>
  </div>

  {% if sw_name|lower != "freenas" %}
    <div id="menuBar_Documentation" data-dojo-type="dijit.PopupMenuBarItem" class="menu_icon right">
      <span>
        <img src="{{ STATIC_URL }}images/ui/menu/{{ sw_name|lower }}guide.png" />
        <br />
        Guide
      </span>
      <div data-dojo-type="dijit.DropDownMenu">
          <div data-dojo-type="dijit.MenuItem" onClick="Menu.openDocumentation();">User Guide (HTML)</div>
          <div data-dojo-type="dijit.MenuItem">
            User Guide (PDF)
            <script type="dojo/method" data-dojo-event="onClick">
              window.open("{% url 'download_guide' %}");
            </script>
          </div>
      </div>
    </div>
  {% else %}
    <div id="menuBar_Documentation" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openDocumentation();" class="menu_icon right">
      <img src="{{ STATIC_URL }}images/ui/menu/{{ sw_name|lower }}guide.png" />
      <br />
      <span>{% trans "Guide" %}</span>
    </div>
  {% endif %}

  <div id="menuBar_Support" data-dojo-type="dijit.MenuBarItem" onClick="Menu.openSystem('system.Support');" class="menu_icon right">
    <img src="{{ STATIC_URL }}images/ui/menu/support.png" />
    <br />
    <span>{% trans "Support" %}</span>
  </div>

  {% else %}
  <div id="menuBar_Login" data-dojo-type="dijit.MenuBarItem" onClick="window.location='/account/login/'" class="menu_icon" style="font-weight:bold;">
    <img src="{{ STATIC_URL }}images/ui/menu/login.png" />
    <br />
    <span>{% trans "Log In" %}</span>
  </div>
  {% endif %}
</div>
