<div class="container" style="position:relative;">

  <a href="/stream">
    <img alt="Logo_small" class="diaspora_header_logo" height="38px" width="65px" src="{{imageUrl "branding/header-logo.png"}}" />
  </a>

  <span class="header-nav">
    <span>
        <a href="/stream">
          {{t "my_stream"}}
        </a>
    </span>

    <span>
        <a href="/activity">
          {{t "my_activity"}}
        </a>
     </span>
  </span>

  <div id="nav_badges">
    <div class="badge badge-inverse" id="notification_badge">
      <a href="/notifications" title="{{t "header.notifications"}}">
        <img alt="{{t "header.notifications"}}" id="notification-flag" src="{{imageUrl "icons/notifications_grey.png"}}" />
        <div class="badge_count {{#unless current_user.notifications_count}} hidden {{/unless}}">
          {{current_user.notifications_count}}
        </div>
      </a>
    </div>

    <div class="badge badge-inverse" id="message_inbox_badge">
      <a href="/conversations" title="{{t "header.messages"}}">
        <img alt="{{t "header.messages"}}" src="{{imageUrl "icons/mail_grey.png"}}" />
        <div class="badge_count {{#unless current_user.unread_messages_count}} hidden {{/unless}}">
          {{current_user.unread_messages_count}}
        </div>
      </a>
    </div>


      <div id="notification_dropdown">
        <div class="header">
          <div class="right">
            <a href="#" id="mark_all_read_link">
              {{t "header.mark_all_as_read"}}
            </a>
            |
            <a href="/notifications" id="view_all_notifications">
              {{t "header.view_all"}}
            </a>
          </div>

          <h4>
            {{t "header.recent_notifications"}}
          </h4>
        </div>

        <div class="notifications">
          <div class="ajax_loader">
            <img alt="Ajax-loader" src="{{imageUrl "ajax-loader.gif"}}">
          </div>
        </div>
      </div>
  </div>


  <div id="hovercard_container">
    <div id="hovercard">
      <img class="avatar">
      <h4>
        <a class="person"></a>
      </h4>
      <p class="handle"></p>
      <div id="hovercard_dropdown_container"></div>
      <div class="hovercard_footer">
        <div class="footer_container">
          <div class="hashtags"></div>
        </div>
      </div>
    </div>
  </div>

  <ul class="dropdown" id="user_menu">
    <li>
    <div class="right">
      ▼
    </div>
    <img alt="{{current_user.name}}" class="avatar" src="{{current_user.avatar.small}}" title="{{current_user.name}}" />
    <a href="#">{{current_user.name}}</a>
    </li>
    <li><a href="/people/{{current_user.guid}}">{{t "header.profile"}}</a></li>
    <li><a href="/contacts">{{t "header.contacts"}}</a></li>
    <li><a href="/user/edit">{{t "header.settings"}}</a></li>
    {{#if current_user.admin}}
      <li><a href="/admins/user_search">{{t "header.admin"}}</a></li>
    {{/if}}
    <li><a href="/users/sign_out">{{t "header.log_out"}}</a></li>
  </ul>


  <div id="global_search">
    <form accept-charset="UTF-8" action="/people" class="search_form" method="get">
      <input name="utf8" type="hidden" value="✓">
      <input id="q" name="q" placeholder="{{t "header.search"}}" results="5" type="search" autocomplete="off" class="ac_input">
    </form>
  </div>

  <div id="lightbox">
    <div id="lightbox-content">
      <a href="#" id="lightbox-close-link">[x] {{t "header.close"}}</a>
      <img id="lightbox-image">
      <div id="lightbox-imageset"></div>
    </div>
  </div>
  <div id="lightbox-backdrop"></div>

</div>
