wip

src/page-circle-edit.pug

@@ -2,11 +2,14 @@
 
   sib-widget(name='circle-team-template')
     template
-      sib-display(
-        data-src="${await value['@id']}"
-        fields='name'
-        widget-account.picture='hd-user-avatar'
-      )
+      div(name='team')
+        div(name='user.thumb')
+          span ${await value.name}
+          sib-display(
+          data-src="${await value.groups}",
+          fields='name'
+        )
+        span ${await value.profile.city}
 
       sib-delete(
         data-src="${await value['@id']}"

src/styles/layout/circle-profile/circle-edit.scss

@@ -33,4 +33,73 @@ circle-team-template {
   >*:nth-child(odd) {
     border-left: 1px solid $color-228-25-79;
   }
+}
+
+
+sib-multiple {
+
+  label {
+    display: none;
+  }
+
+  >team-template[name='members'] {
+    display: grid;
+    grid-column-gap: 1.6rem;
+    grid-template-columns: 7vh auto;
+    grid-template-rows: repeat(2, 5.2vh);
+
+    >sib-display:first-child {
+      align-self: center;
+      grid-column: 1 / span 1;
+      grid-row: 1 / span 2;
+
+      div {
+        background-color: $color-0-0-100;
+        border-radius: 50%;
+        height: 7vh;
+        overflow: hidden;
+        position: relative;
+        width: 7vh;
+
+        img {
+          height: 100%;
+          left: 0;
+          object-fit: cover;
+          position: absolute;
+          top: 0;
+          width: 100%;
+        }
+      }
+    }
+
+    >div:nth-child(2) {
+      align-self: end;
+      display: flex;
+      grid-column: 2 / span 1;
+      grid-row: 1 / span 1;
+
+      span {
+        align-self: center;
+        font-weight: 600;
+      }
+
+      span~sib-display {
+
+        >div {
+          display: flex;
+          margin-left: 1rem;
+
+          sib-multiple [name='name'] {
+            @extend %user-role;
+          }
+        }
+      }
+    }
+
+    >span:nth-child(3) {
+      align-self: start;
+      grid-column: 2 / span 1;
+      grid-row: 2 / span 1;
+    }
+  }
 }

src/templates/hd-circle-team.pug

@@ -0,0 +1,43 @@
+include hd-user-avatar.pug
+
+sib-widget(name='team-template')
+  template
+    sib-display(
+      data-src="${value.user ? value.user['@id'] : ''}"
+      fields='account.picture',
+      widget-account.picture='hd-user-avatar'
+    )
+    div(name='user.thumb')
+      span ${value.user.name}
+      sib-display(
+        data-src="${value.user ? value.user.groups['@id'] : ''}",
+        fields='name',
+        multiple-name
+      )
+    span ${value.name}
+
+
+
+include hd-user-avatar.pug
+
+sib-widget(name='team-template')
+  template
+    sib-display.project-profile-user-avatar(
+      data-src="${value.user ? value.user['@id'] : ''}"
+      fields='account.picture',
+      widget-account.picture='hd-user-avatar'
+    )
+    div(name='user.thumb')
+      sib-display(
+        data-src="${value.user ? value.user['@id'] : ''}"
+        fields='name'
+      )
+      sib-display(
+        data-src="${value.user ? value.user['@id'] : ''}",
+        fields='name'
+        nested-field="groups"
+      )
+    sib-display(
+      data-src="${value.user ? value.user['@id'] : ''}"
+      fields='username'
+    )