<div style="display: flex; align-items: center; gap: 1rem">
  <div
    onclick="document.location.href=Environment.self + '/pages/issue'"
    class="menu_item_bug top_menu_item"
  ></div>
  <div
    onclick="document.location.href=Environment.self + '/pages/prio'"
    class="menu_item_prio top_menu_item"
  ></div>
  <div
    onclick="document.location.href=Environment.self + '/pages/project'"
    class="menu_item_project top_menu_item"
  ></div>
  <div
    onclick="document.location.href=Environment.self + '/pages/sprint'"
    class="menu_item_sprint top_menu_item"
  ></div>

  

  <div id="notification">
    <img id="notification_btn" data-src = "/images/notif.png" style="width: 24px;">
    <div id="notification_box_wr" class="hidden">
      <div id="notification_box">
        <img id="notification_box_rm"  data-src="/images/rm.png" class="div_image close_inner_form">
        <div id="notification_list"></div>
      </div>
    </div>
  </div>

  <div class="user_info dropdown22">
    <button class="user_info_image profile_picture"></button>

    <div class="dropdown-content22 dropdown-content22-login">
      <div style="display: flex; flex-direction: column; padding: 0.25rem 0">
        <div
          class="user_name_login d_flex flex-row"
          style="
            display: flex !important;
            padding: 1rem 1.25rem;
            width: fit-content;
          "
        >
          <div>
            <img
              class="user_info_image profile_picture"
              style="
                width: 50px !important;
                height: 50px !important;
                background-size: 50px 50px !important;
              "
            />
          </div>
          <div
            style="
              padding: 0 0.75rem;
              display: inherit;
              flex-direction: column;
              justify-content: center;
            "
          >
            <span
              id="___user"
              data-text="global.page.user.name"
              id="_user_name"
              style="
                font-size: 0.9rem;
                font-weight: 600;
                color: #181c32;
                line-height: 18px;
              "
            ></span>

            <span
              data-text="global.page.user.login"
              style="line-height: 18px; color: #a1a5b7"
            ></span>
          </div>
        </div>

        <div
          class="border-bttm-grey padding-1-15 d_flex flex-column"
          style="gap: 0.25rem"
        >
          <a
            href="#"
            data-text="pages.auth.profile.change_profile"
            onclick="____USER.showEditForm('profile_edit')"
          >
          </a>

          <a
            href="#"
            data-text="global.page.change.password"
            onclick="showChangePassword()"
          ></a>

          <a
            href="#"
            data-text="global.page.two.factor.auth"
            onclick="show2factSettings()"
          ></a>
        </div>

        <div class="padding-1-15">
          <a
            
             onclick="____USER.logout()"
            data-text="global.page.logout"
          ></a>
        </div>
      </div>
    </div>
  </div>

  <div class="hidden form modal" id="change_password">
    <img
      data-src="/images/close.png.png"
      width="24px"
      height="24px"
      class="close_inner_form"
      onclick="closeChangePasswordForm()"
    />

    <div class="form_content" id="login-form">
      <div
        class="formTitle"
        data-text="#{auth.page.changepassword.title}"
      ></div>

      <div class="row">
        <div class="text_label_container">
          <label
            data-text="#{login.page.login}"
            class="text_label label"
          ></label>
        </div>

        <div class="bad_input">
          <input
            type="text"
            id="login"
            data-placeholder="login.page.login.placeholder"
          />
        </div>
      </div>

      <div class="row">
        <div class="text_label_container flex-stack">
          <label
            data-text="#{login.page.old_password}"
            class="text_label label"
          ></label>

          <a
            class="link_primary_400"
            style="float: right"
            id="create-account-wrap"
            data-href="/client_login/restore"
            data-text="#{pages.login.restore.link}"
          ></a>
        </div>

        <div class="bad_input">
          <input
            type="password"
            id="password"
            data-placeholder="#{login.page.password.placeholder}"
          />
          <img
            data-src="/images/show_password.png"
            width="16px"
            height="16px"
            onclick="showPassword('password')"
            class="show_password"
          />
        </div>
      </div>

      <div class="row">
        <div class="text_label_container flex-stack">
          <label
            data-text="#{login.page.new_password}"
            class="text_label label"
          ></label>
        </div>

        <div class="bad_input">
          <input
            type="password"
            id="newPassword"
            data-placeholder="#{login.page.password.placeholder}"
          />
          <img
            data-src="/images/show_password.png"
            width="16px"
            height="16px"
            onclick="showPassword('newPassword')"
            class="show_password"
          />
        </div>
      </div>

      <div class="row">
        <div class="text_label_container flex-stack">
          <label
            data-text="#{login.page.repeatpassword}"
            class="text_label label"
          ></label>
        </div>

        <div class="bad_input">
          <input
            type="password"
            id="passwordRepeat"
            data-placeholder="#{login.page.password.placeholder}"
          />
          <img
            data-src="/images/show_password.png"
            width="16px"
            height="16px"
            onclick="showPassword('passwordRepeat')"
            class="show_password"
          />
        </div>
      </div>

      <div class="row">
        <div class="text_label_container">
          <label
            data-text="#{login.page.two.factor.auth}"
            class="text_label label"
          ></label>
        </div>

        <div class="bad_input">
          <input
            type="text"
            id="twoFactorCode"
            data-placeholder="#{login.page.twofa.placeholder}"
          />
        </div>
      </div>
    </div>

    <div class="footer">
      <input
        type="button"
        data-value="#{auth.page.change_password.submit}"
        class="login_submit_button save_auto_form"
        onclick="changePassword()"
      />
      <input
        type="button"
        data-value="#{auth.page.change_password.cancel}"
        class="login_submit_button"
        onclick="closeChangePasswordForm()"
      />
    </div>
  </div>

  <div id="_2factSettings" class="hidden modal form">
    <img
      data-src="/images/close.png.png"
      width="24px"
      height="24px"
      class="close_inner_form"
      onclick="this.parentElement.classList.add('hidden')"
    />

    <div class="form_content" id="">
      <div class="formTitle" data-text="pages.2fa.title"></div>

      <div class="row">
        <label
          for="auth2fEnabled"
          data-text="pages.2fa.enabled"
          class="twofa_label"
        ></label>
        <input type="checkbox" id="auth2fEnabled" class="twofa_checkbox" />
      </div>

      <div class="qr_code_div" id="___qr"></div>
    </div>

    <div class="__footer_2fact footer">
      <input
        type="button"
        data-value="pages.global.save"
        onclick="saveAuthType()"
        class="login_submit_button"
      />
      <input
        type="button"
        onclick="this.parentElement.parentElement.classList.add('hidden')"
        data-value="pages.global.cancel"
        class="login_submit_button"
      />
    </div>
  </div>

 
</div>

<style>
  #submenu a {
    padding: 10px;
    text-decoration: none;
    color: #00b2ff;
  }
</style>

