hubl/src/html/member.html

<div id="member" class="view-with-vertical-menu" style="display: none">
  <ldp-router id="member-page-router" class="vertical-menu border-left" default-route="member-chat">
    <ldp-route name="member-chat">
      <i class="fa fa-comment" aria-hidden="true"></i>
    </ldp-route>
    <ldp-route name="member-detail">
      <i class="fa fa-user" aria-hidden="true"></i>
    </ldp-route>
  </ldp-router>

  <hd-chat-window
      data-authentication="anonymous"
      data-auto-login="true"
      data-bosh-service-url="https://conversejs.org/http-bind/"
      data-debug="true"
      data-jid="nomnom.im"
      data-locales-url="http://hd-app.local/dist/lib/xmpp-chat-component/node_modules/converse.js/locale/{{{locale}}}/LC_MESSAGES/converse.json",
      data-room-jid="anonymous@conference.nomnom.im">
  </hd-chat-window>

  <div id="member-detail" style="display: none">
    <ldp-display 
      id="member-info" 
      set-name="firstname, name-separator, lastname"
      value-name-separator="&nbsp;"
      data-fields="avatar, name, cell, email, number"
      widget-avatar="ldp-display-img"
      widget-cell="ldp-display-cell"
      widget-email="ldp-display-mailto"
      widget-number="ldp-display-tel"
      bind-resources
    ></ldp-display>

    <h2 class="section skills">Compétences</h2>
    <ldp-display 
      id="member-skills" 
      id-suffix="skills"
      bind-resources
      ></ldp-display>
  </div>
</div>