<metal:page define-macro="master">
  <html xmlns="http://www.w3.org/1999/xhtml"
        xmlns:i18n="http://xml.zope.org/namespaces/i18n"
        xmlns:metal="http://xml.zope.org/namespaces/metal"
        xmlns:tal="http://xml.zope.org/namespaces/tal"
        lang="en"
        metal:use-macro="context/main_template/macros/master"
        xml:lang="en"
        i18n:domain="ploneintranet"
  >
    <metal:content fill-slot="content"
                   tal:define="
                     is_me view/is_me;
                     display_followers view/display_followers;
                     display_following view/display_following;
                     following python:view.following() if display_following else [];
                     num_following python: len(following);
                     followers python:view.followers() if display_followers else [];
                     num_followers python: len(followers);
                     absolute_url here/absolute_url;
                     fullname here/fullname;
                     default_tab view/default_tab;
                     proto nocall: here/@@proto;
                     app nocall: view/app|nothing;
                   "
    >
      <div class="state-on"
           id="app-space"
      >
        <div class="application-body focus-document sidebar-normal application-contacts sidebar-left-closed sidebar-right-closed"
             id="application-body"
        >
          <aside class="left sidebar">
            <div id="sidebar-content">
              <a class="pat-inject"
                 href="${app/absolute_url}/@@app-contacts-sidebar"
                 data-pat-inject="source: #sidebar-content::element; target: #sidebar-content::element; trigger: autoload-visible"
                 tal:condition="python: app"
                 i18n:translate=""
              >Open sidebar</a>
            </div>
          </aside>
          <tal:sidebar-toggle-button replace="structure here/@@sidebar-toggle-button|nothing" />
          <div class="document-body"
               id="document-body"
          >
            <div class="document-content"
                 id="document-content"
            >
              <div class="canvas-toolbar"
                   id="contact-nav-toolbar"
              >
                <a class="ueber-back-button pat-inject"
                   id="button-level-up-contacts"
                   href="${view/back_to_url}"
                   data-pat-inject="history: record"
                   tal:condition="python: app"
                >${view/back_to_title}</a>
              </div>

              <div class="container contact-info">
                <figure class="contact-info-header type-">
                  <span class="pat-gallery">
                    <a tal:replace="structure python:view.get_avatar_tag()"></a>
                  </span>
                  <form class="pat-inject pat-autosubmit"
                        id="change-personal-image"
                        action="${here/absolute_url}"
                        enctype="multipart/form-data"
                        method="post"
                        data-pat-inject="source: #user-avatar; target: #user-avatar; loading-class:'' &amp;&amp; source: .contact-info-header; target: .contact-info-header;"
                        tal:condition="python: view.display_change_personal_image"
                  >
                    <label class="edit icon-pencil iconified">
                      <input accept="image/*;capture=camera"
                             name="portrait"
                             type="file"
                      />
                      <button type="submit"
                              i18n:translate=""
                      >Update avatar</button>
                      <input name="submit"
                             type="hidden"
                             value="submit"
                      />
                    </label>
                  </form>
                  <figcaption>
                    <span tal:replace="fullname"></span>
                  </figcaption>
                </figure>

                <div id="user-data-view">
                  <form class="canvas-toolbar pat-inject"
                        id="contact-tool-bar"
                        action="${here/absolute_url}#contact-tool-bar"
                        method="POST"
                  >
                    <div class="canvas-toolbar-section pat-navigation navigation">
                      <nav class="canvas-toolbar-subnav button-cluster pat-tabs pat-navigation"
                           id="user-profile-sections"
                           tal:condition="view/display_tabs"
                      >
                        <a class="${python: view.get_tab_css_classes(tab)}"
                           href="${tab/url}"
                           data-pat-inject="history: record; source: #user-data-content; target: #user-data-content"
                           tal:repeat="tab view/tabs"
                        >${tab/title}</a>
                      </nav>
                    </div>
                    <div class="canvas-toolbar-section quick-functions">

                      <div class="functions">
                        <a class="icon icon-pencil pat-inject"
                           href="${absolute_url}/@@edit#main"
                           data-pat-inject="#user-data-view::element;"
                           tal:condition="view/can_edit"
                           i18n:translate=""
                        >Edit</a>
                        <a tal:condition="python: not is_me and (display_following or display_followers)"
                           tal:replace="structure context/@@follow-link-iconified"
                        ></a>
                        <a tal:replace="structure context/@@bookmark-link-iconified|nothing"></a>
                        <tal:todo replace="nothing">
                          <a class="pat-tooltip icon more"
                             href="${here/absolute_url}/contact-more-menu#document-content"
                             data-pat-tooltip="position-list: tr; source: ajax"
                             i18n:translate=""
                          >More&hellip;</a>
                        </tal:todo>
                      </div>
                    </div>

                  </form>

                  <div id="user-data-content">
                    <metal:slot define-slot="user-data-content">
                      <dl class="pat-grid-list"
                          tal:define="
                            fields view/fields_for_display;
                          "
                      >
                        <tal:field repeat="field fields">
                          <tal:display condition="field/raw">
                            <dt class="${field/icon_class}"
                                tal:content="field/label"
                                i18n:translate=""
                            ></dt>
                            <dd>
                              <span tal:replace="structure field/html"></span>
                            </dd>
                          </tal:display>
                        </tal:field>
                      </dl>
                      <a class="pat-inject"
                         href="${here/absolute_url}/@@userprofile-group"
                         data-pat-inject="trigger:autoload; loading-class: none; source:#person-groups; target: self::element; delay: 1ms;"
                         i18n:translate=""
                      >Loading group information &hellip;
                      </a>
                      <a class="pat-inject"
                         href="${here/absolute_url}/@@userprofile-workspaces"
                         data-pat-inject="trigger:autoload; loading-class: none; source:#person-workspaces; target: self::element; delay: 1ms;"
                         i18n:translate=""
                      >Loading group information &hellip;
                      </a>

                      <article class="pat-rich"
                               tal:condition="context/biography|nothing"
                      >
                        <h2 i18n:translate="">Biography</h2>
                        <p tal:content="context/biography">
                    Some content goes here on Jeff
                        </p>
                      </article>
                    </metal:slot>
                  </div>
                </div>

              </div>

            </div>
          </div>
        </div>
      </div>
    </metal:content>
  </html>
</metal:page>
