From 2bbe3134db8dda711b23144faf0ab899fcdb2024 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Tue, 15 Oct 2019 11:37:57 +0200
Subject: [PATCH 01/21] sib-core 0.9

---
 src/dependencies.pug |  8 ++++----
 src/page-circle.pug  | 46 ++++++++++++++++++++++----------------------
 2 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/src/dependencies.pug b/src/dependencies.pug
index 491c23d..fbb8abe 100644
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@@ -1,4 +1,4 @@
-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.7")
+script(type="module" src="https://unpkg.com/@startinblox/oidc@0.8")
 script(src="/scripts/index.js")
 
 //- Stylesheets
@@ -15,10 +15,10 @@ link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:3
 //- script(type="module" src="/lib/sib-job-board/sib-job-board.js")
 
 //- CDN
-script(type="module" src="https://unpkg.com/@startinblox/core@0.8")
+script(type="module" src="https://unpkg.com/@startinblox/core@0.9")
 script(type="module" src="https://unpkg.com/@startinblox/router@0.7")
-script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.3")
-script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2")
+script(type="module" src="https://unpkg.com/@startinblox/component-chat@0.4")
+//- script(type="module" src="https://unpkg.com/@startinblox/component-notifications@0.2")
 //- script(type="module" src="https://unpkg.com/@startinblox/component-conversation@0.3")
 //- script(type="module" src="https://unpkg.com/@startinblox/component-directory@0.3")
 //- script(type="module" src="https://unpkg.com/@startinblox/component-job-board@0.3")
diff --git a/src/page-circle.pug b/src/page-circle.pug
index b66986c..43c0769 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -1,26 +1,26 @@
 .views-container
   #circle-chat
     include page-circle-chat.pug
-  //- #circle-profile
-  //-   include page-circle-profile.pug
-  //- #circle-edit
-  //-   include page-circle-edit.pug
-  //- #circle-create
-  //-   include page-circle-create.pug
-//- nav.jsRightMenu(role='navigation')
-//-   sib-router(default-route='circle-chat')
-//-     ul
-//-       li.jsOffsiteToggle
-//-         a Fold menu
-//-       sib-route(name='circle-chat')
-//-         li
-//-           a Chat
-//-       sib-route(name='circle-profile')
-//-         li
-//-           a Information
-//-       sib-route(name='circle-edit')
-//-       //-   li
-//-       //-     a Edit
-//-       sib-route(name='circle-create')
-//-       //-   li
-//-       //-     a Add new
\ No newline at end of file
+  #circle-profile
+    include page-circle-profile.pug
+  #circle-edit
+    include page-circle-edit.pug
+  //-#circle-create
+    include page-circle-create.pug
+nav.jsRightMenu(role='navigation')
+  sib-router(default-route='circle-chat')
+    ul
+      li.jsOffsiteToggle
+        a Fold menu
+      sib-route(name='circle-chat')
+        li
+          a Chat
+      sib-route(name='circle-profile')
+        li
+          a Information
+      sib-route(name='circle-edit')
+        li
+          a Edit
+      //-sib-route(name='circle-create')
+        li
+          a Add new

From e32b8aa4b75f7bb0451c42eaa21aa95a5ad61206 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Tue, 15 Oct 2019 12:14:54 +0200
Subject: [PATCH 02/21] wip

---
 src/page-circle-edit.pug | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 7e23b00..e2f2bb0 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -1,9 +1,12 @@
 #circle-edit.content-box.with-padding.with-form.full-width
-  h1 Edit group
-  sib-form.block(
-    range-owner=`${endpoints.users}`,
-    fields="name, description, owner, team, jabberID, jabberRoom"
-    range-team=`${endpoints.users}`,
-    bind-resources
-  )
-    //- widget-team='sib-form-multiple-dropdown',
+  .content-box.with-padding.with-form.full-width
+    h1 Edit your circle
+    
+    sib-form.block(
+      bind-resources
+      
+      fields='block-circle__info(name, status), description'
+
+      
+    )
+      //- widget-team='sib-form-multiple-dropdown',

From feadf0e2756451b23cecf37137310122737e47e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Tue, 15 Oct 2019 13:54:06 +0200
Subject: [PATCH 03/21] wip

---
 src/page-circle-edit.pug | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index e2f2bb0..5b6fa63 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -7,6 +7,8 @@
       
       fields='block-circle__info(name, status), description'
 
-      
+      class-name='form-label is-light is-half-width'
+      class-status='form-label is-light is-half-width'
+      class-description='form-label is-light is-full-width'
     )
       //- widget-team='sib-form-multiple-dropdown',

From 456580aa3c14df6aefdafbe52cf15866ab6595cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Tue, 15 Oct 2019 17:10:16 +0200
Subject: [PATCH 04/21] sib-form ok. Need work on the team edition

---
 src/page-circle-edit.pug | 51 ++++++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 12 deletions(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 5b6fa63..16d5fdf 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -1,14 +1,41 @@
 #circle-edit.content-box.with-padding.with-form.full-width
-  .content-box.with-padding.with-form.full-width
-    h1 Edit your circle
-    
-    sib-form.block(
-      bind-resources
-      
-      fields='block-circle__info(name, status), description'
 
-      class-name='form-label is-light is-half-width'
-      class-status='form-label is-light is-half-width'
-      class-description='form-label is-light is-full-width'
-    )
-      //- widget-team='sib-form-multiple-dropdown',
+  sib-widget(name='circle-team-template')
+    template
+      sib-display(
+        data-src="${await value['@id']}"
+        fields='name'
+        widget-account.picture='hd-user-avatar'
+      )
+
+      sib-delete(
+        data-src="${await value['@id']}"
+      )
+
+  h1 Edit your circle
+  
+  sib-form.block(
+    bind-resources
+    
+    fields='block-circle__info(name, status), description'
+
+    label-status='status (coming soon)'
+
+    class-name='form-label is-light is-half-width'
+    class-status='form-label is-light is-half-width'
+    class-description='form-label is-light is-full-width'
+
+    widget-description='sib-form-textarea'
+  )
+  
+  h3 List of members
+
+  sib-display(
+    bind-resources
+
+    fields='team'
+
+    multiple-team=''
+
+    widget-team='circle-team-template'
+  )

From 4d2566abe070bbf19f16a348307a684e3b8ff92c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Thu, 17 Oct 2019 16:06:22 +0200
Subject: [PATCH 05/21] wip table

---
 src/page-circle-edit.pug                      |  7 +-
 src/styles/abstracts/_variables.scss          |  1 +
 src/styles/layout/circle-profile/_index.scss  |  3 +-
 .../layout/circle-profile/circle-edit.scss    | 79 +++++++++++++++++++
 4 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 src/styles/layout/circle-profile/circle-edit.scss

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 16d5fdf..c9f976a 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -30,12 +30,13 @@
   
   h3 List of members
 
+  div.table
+    div.cell.un Name
+    div.cell.deux Status
+    
   sib-display(
     bind-resources
-
     fields='team'
-
     multiple-team=''
-
     widget-team='circle-team-template'
   )
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index e63db81..53cbb47 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -10,6 +10,7 @@ $color-210-25-95: hsl(210, 25%, 95%);
 $color-222-57-95: hsl(222, 57%, 95%);
 $color-213-20-91: hsl(213, 20%, 91%);
 $color-221-51-90: hsl(221, 51%, 90%);
+$color-228-25-79: hsl(228, 25%, 79%);
 $color-0-0-85: hsl(0, 0%, 85%);
 $color-229-25-79: hsl(229, 25%, 79%);
 $color-215-9-73: hsl(215, 9%, 73%);
diff --git a/src/styles/layout/circle-profile/_index.scss b/src/styles/layout/circle-profile/_index.scss
index 293bc89..6efac3d 100644
--- a/src/styles/layout/circle-profile/_index.scss
+++ b/src/styles/layout/circle-profile/_index.scss
@@ -1 +1,2 @@
-@import 'circle-profile';
\ No newline at end of file
+@import 'circle-profile';
+@import 'circle-edit';
\ No newline at end of file
diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss
new file mode 100644
index 0000000..c6be16c
--- /dev/null
+++ b/src/styles/layout/circle-profile/circle-edit.scss
@@ -0,0 +1,79 @@
+/*.table {
+  display: table;
+  width: 100%;
+  
+  .row.header {
+    display: table-row;
+    
+    .cell {
+      display: table-cell;
+
+      &.un {
+        background: pink;
+      }
+
+      &.deux {
+        background: paleturquoise;
+      }
+    }
+  }
+}
+
+[widget='circle-team-template'] {
+
+  >div {
+    display: table;
+    width: 100%;
+
+    >circle-team-template {
+      display: table-row;
+
+      >* {
+        border-bottom: 1px solid $color-228-25-79;
+        border-left: 1px solid $color-228-25-79;
+      }
+
+      >sib-display {
+        display: table-cell;
+
+        div {
+          display: flex;
+          background: bisque;
+        }
+      }
+
+      sib-delete {
+        border-right: 1px solid $color-228-25-79;
+        display: table-cell;
+      }
+    }
+  }
+}*/
+
+.table {
+  display: flex;
+  justify-content: space-around;
+  background: pink;
+
+  >*{
+    flex: 1;
+    width: 50%;
+    padding: 1rem;
+    border-right: 1px solid $color-228-25-79;
+    border-bottom: 1px solid $color-228-25-79;
+  }
+}
+
+circle-team-template {
+  display: flex;
+  justify-content: space-between;
+  background: paleturquoise;
+
+  >* {
+    flex: 1;
+    width: 50%;
+    padding: 1rem;
+    border-right: 1px solid $color-228-25-79;
+    border-bottom: 1px solid $color-228-25-79;
+  }
+}
\ No newline at end of file

From ba6e21a71c8600f96de59bcbd0b8fa0500c4a924 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Fri, 18 Oct 2019 10:26:08 +0200
Subject: [PATCH 06/21] wip

---
 .../layout/circle-profile/circle-edit.scss    | 67 ++++---------------
 src/templates/hd-circle-team.pug              |  0
 2 files changed, 12 insertions(+), 55 deletions(-)
 create mode 100644 src/templates/hd-circle-team.pug

diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss
index c6be16c..d7c7f80 100644
--- a/src/styles/layout/circle-profile/circle-edit.scss
+++ b/src/styles/layout/circle-profile/circle-edit.scss
@@ -1,73 +1,26 @@
-/*.table {
-  display: table;
-  width: 100%;
-  
-  .row.header {
-    display: table-row;
-    
-    .cell {
-      display: table-cell;
-
-      &.un {
-        background: pink;
-      }
-
-      &.deux {
-        background: paleturquoise;
-      }
-    }
-  }
-}
-
-[widget='circle-team-template'] {
-
-  >div {
-    display: table;
-    width: 100%;
-
-    >circle-team-template {
-      display: table-row;
-
-      >* {
-        border-bottom: 1px solid $color-228-25-79;
-        border-left: 1px solid $color-228-25-79;
-      }
-
-      >sib-display {
-        display: table-cell;
-
-        div {
-          display: flex;
-          background: bisque;
-        }
-      }
-
-      sib-delete {
-        border-right: 1px solid $color-228-25-79;
-        display: table-cell;
-      }
-    }
-  }
-}*/
-
 .table {
+  background: $color-228-25-79;
+  color: white;
   display: flex;
   justify-content: space-around;
-  background: pink;
+  font-weight: 600;
+  font-size: 1.6rem;
 
   >*{
     flex: 1;
     width: 50%;
     padding: 1rem;
     border-right: 1px solid $color-228-25-79;
-    border-bottom: 1px solid $color-228-25-79;
+  }
+
+  >*:first-of-type {
+    border-right: 1px solid white;
   }
 }
 
 circle-team-template {
   display: flex;
   justify-content: space-between;
-  background: paleturquoise;
 
   >* {
     flex: 1;
@@ -76,4 +29,8 @@ circle-team-template {
     border-right: 1px solid $color-228-25-79;
     border-bottom: 1px solid $color-228-25-79;
   }
+
+  >*:nth-child(odd) {
+    border-left: 1px solid $color-228-25-79;
+  }
 }
\ No newline at end of file
diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug
new file mode 100644
index 0000000..e69de29

From 57885c6655261f14153b504c3a8aad0057a8bb39 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Fri, 18 Oct 2019 15:39:56 +0200
Subject: [PATCH 07/21] wip

---
 src/page-circle-edit.pug                      | 13 ++--
 .../layout/circle-profile/circle-edit.scss    | 69 +++++++++++++++++++
 src/templates/hd-circle-team.pug              | 43 ++++++++++++
 3 files changed, 120 insertions(+), 5 deletions(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index c9f976a..2e5e696 100644
--- a/src/page-circle-edit.pug
+++ b/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']}"
diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss
index d7c7f80..e014c4e 100644
--- a/src/styles/layout/circle-profile/circle-edit.scss
+++ b/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;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug
index e69de29..c747f1a 100644
--- a/src/templates/hd-circle-team.pug
+++ b/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'
+    )
\ No newline at end of file

From 795bdb11e8ce2fa70e53fd7315b079a6a2198d2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 21 Oct 2019 11:37:07 +0200
Subject: [PATCH 08/21] wip on owner dropdown

---
 src/page-circle-edit.pug | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 2e5e696..40c538d 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -20,14 +20,16 @@
   sib-form.block(
     bind-resources
     
-    fields='block-circle__info(name, status), description'
+    fields='block-circle__info(name, owner), description'
+    range-owner=`${endpoints.users}`
 
-    label-status='status (coming soon)'
+    label-owner='owner'
 
     class-name='form-label is-light is-half-width'
-    class-status='form-label is-light is-half-width'
+    class-owner='form-label is-light is-half-width member-select'
     class-description='form-label is-light is-full-width'
 
+    widget-owner='sib-form-auto-completion'
     widget-description='sib-form-textarea'
   )
   

From 6d4b863e3bd4d58b296371f66d9ac24288b1e2c9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 21 Oct 2019 13:12:04 +0200
Subject: [PATCH 09/21] delete button ok

---
 src/page-circle-edit.pug                      |  2 ++
 src/styles/base/main.scss                     | 20 +++++++++++++++++++
 .../layout/circle-profile/circle-edit.scss    |  7 ++++++-
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 40c538d..f2d8470 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -13,6 +13,8 @@
 
       sib-delete(
         data-src="${await value['@id']}"
+        data-label='Delete from circle'
+        resourceDeleted=''
       )
 
   h1 Edit your circle
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 8fa3b61..722a63b 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -105,6 +105,26 @@ a {
   }
 }
 
+sib-delete {
+  
+  button {
+    @include icon('close');
+    background-color: $color-233-18-29;
+    border: none;
+    border-radius: 100em;
+    color: $color-0-0-100;
+    cursor: pointer;
+    font-size: 1.4rem;
+    font-weight: bold;
+    padding: 0.55rem 2.5rem;
+    text-transform: uppercase;
+
+    &::before {
+      margin-right: 1rem;
+    }
+  }
+}
+
 %padding-main {
   padding: 5rem;
 }
diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss
index e014c4e..42f6548 100644
--- a/src/styles/layout/circle-profile/circle-edit.scss
+++ b/src/styles/layout/circle-profile/circle-edit.scss
@@ -3,8 +3,9 @@
   color: white;
   display: flex;
   justify-content: space-around;
-  font-weight: 600;
   font-size: 1.6rem;
+  font-weight: 600;
+  text-align: center;
 
   >*{
     flex: 1;
@@ -30,6 +31,10 @@ circle-team-template {
     border-bottom: 1px solid $color-228-25-79;
   }
 
+  >*:nth-child(even) {
+    display: flex;
+  }
+
   >*:nth-child(odd) {
     border-left: 1px solid $color-228-25-79;
   }

From afa5fa0451b75b0cfaf9264e08b56f49671e59ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 21 Oct 2019 15:02:12 +0200
Subject: [PATCH 10/21] new architecture for member list yeah

---
 src/page-circle-edit.pug                      | 12 +++++++---
 .../layout/circle-profile/circle-edit.scss    | 24 +++++++++++++------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index f2d8470..adfa132 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -11,6 +11,8 @@
         )
         span ${await value.profile.city}
 
+  sib-widget(name='circle-delete-template')
+    template
       sib-delete(
         data-src="${await value['@id']}"
         data-label='Delete from circle'
@@ -37,13 +39,17 @@
   
   h3 List of members
 
-  div.table
+  div.table-header
     div.cell.un Name
     div.cell.deux Status
     
-  sib-display(
+  sib-display.table-body(
     bind-resources
-    fields='team'
+    fields='team, members'
+
     multiple-team=''
+    multiple-members=''
+
     widget-team='circle-team-template'
+    widget-members='circle-delete-template'
   )
diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss
index 42f6548..599639d 100644
--- a/src/styles/layout/circle-profile/circle-edit.scss
+++ b/src/styles/layout/circle-profile/circle-edit.scss
@@ -1,4 +1,4 @@
-.table {
+.table-header {
   background: $color-228-25-79;
   color: white;
   display: flex;
@@ -19,24 +19,34 @@
   }
 }
 
-circle-team-template {
+.table-body>div {
   display: flex;
   justify-content: space-between;
 
   >* {
     flex: 1;
     width: 50%;
-    padding: 1rem;
-    border-right: 1px solid $color-228-25-79;
-    border-bottom: 1px solid $color-228-25-79;
   }
 
-  >*:nth-child(even) {
+  /*>*:nth-child(even) {
     display: flex;
+  }*/
+
+  /*>*:nth-child(odd) {
+    border-left: 1px solid $color-228-25-79;
+  }*/
+
+  circle-team-template {
+    display: block;
+    border-bottom: 1px solid $color-228-25-79;
+    border-left: 1px solid $color-228-25-79;
   }
 
-  >*:nth-child(odd) {
+  circle-delete-template {
+    display: block;
+    border-bottom: 1px solid $color-228-25-79;
     border-left: 1px solid $color-228-25-79;
+    border-right: 1px solid $color-228-25-79;
   }
 }
 

From 3940bafda3037cdec1041c6fd809723b187f1569 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Mon, 21 Oct 2019 15:38:49 +0200
Subject: [PATCH 11/21] wip

---
 src/page-circle-edit.pug | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index adfa132..eb29ab6 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -1,8 +1,23 @@
 #circle-edit.content-box.with-padding.with-form.full-width
 
+  include templates/hd-user-avatar.pug
+
   sib-widget(name='circle-team-template')
     template
-      div(name='team')
+      sib-widget(name='hd-user-groups')
+        template ${await value.name}
+
+      sib-display(
+        data-src='${await value}'
+        fields='account.picture, sup(name, groups), sub(profile.city)'
+
+        widget-account.picture='hd-user-avatar'
+        widget-groups='hd-user-groups'
+
+        multiple-groups=''
+      )
+
+      //-div(name='team')
         div(name='user.thumb')
           span ${await value.name}
           sib-display(

From a7faff9b882482362b6d7486d0c6227df088c197 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Tue, 22 Oct 2019 15:50:15 +0200
Subject: [PATCH 12/21] members block OK + delete-circle button added

---
 src/page-circle-edit.pug                      |  44 +++----
 src/styles/base/form.scss                     |   9 +-
 .../layout/circle-profile/circle-edit.scss    | 110 ++++++++++--------
 3 files changed, 88 insertions(+), 75 deletions(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index eb29ab6..37cd03f 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -2,32 +2,21 @@
 
   include templates/hd-user-avatar.pug
 
-  sib-widget(name='circle-team-template')
-    template
-      sib-widget(name='hd-user-groups')
-        template ${await value.name}
+  sib-widget(name='hd-user-groups')
+    template ${await value.name}
 
+  sib-widget(name='team-template')
+    template
       sib-display(
-        data-src='${await value}'
+        data-src='${await value.user}'
         fields='account.picture, sup(name, groups), sub(profile.city)'
 
         widget-account.picture='hd-user-avatar'
-        widget-groups='hd-user-groups'
 
         multiple-groups=''
+        widget-groups='hd-user-groups'
       )
 
-      //-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-widget(name='circle-delete-template')
-    template
       sib-delete(
         data-src="${await value['@id']}"
         data-label='Delete from circle'
@@ -50,21 +39,26 @@
 
     widget-owner='sib-form-auto-completion'
     widget-description='sib-form-textarea'
+
+    submit-button='Register'
+  )
+
+  sib-delete(
+    bind-resources
+    data-label='Delete circle'
+    resourceDeleted=''
   )
   
-  h3 List of members
+  h2 List of members
 
   div.table-header
-    div.cell.un Name
-    div.cell.deux Status
+    div.cell Name
+    div.cell Access
     
   sib-display.table-body(
     bind-resources
-    fields='team, members'
+    fields='members'
 
-    multiple-team=''
     multiple-members=''
-
-    widget-team='circle-team-template'
-    widget-members='circle-delete-template'
+    widget-members='team-template'
   )
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index c1ae4a7..89177aa 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -151,15 +151,19 @@
 
     sib-form-auto-completion.member-select {
       align-self: flex-end;
-      font-weight: normal;
+
+      >label:first-of-type>div {
+        font-weight: 600;
+      }
 
       .ss-single-selected {
         background-color: $color-222-57-95;
         border: none;
         border-radius: 0px;
         display: flex;
+        font-weight: normal;
         margin-top: 0.8rem;
-        min-height: 3.9rem;
+        min-height: 4.4rem;
         padding-left: 1rem;
         text-transform: none;
 
@@ -170,6 +174,7 @@
       }
 
       .ss-content .ss-list .ss-option {
+        font-weight: normal;
         text-transform: none;
       }
     }
diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss
index 599639d..fb84e2c 100644
--- a/src/styles/layout/circle-profile/circle-edit.scss
+++ b/src/styles/layout/circle-profile/circle-edit.scss
@@ -1,3 +1,9 @@
+h2 {
+  font-size: 1.7rem;
+  font-weight: bold;
+  text-transform: uppercase;
+}
+
 .table-header {
   background: $color-228-25-79;
   color: white;
@@ -19,102 +25,110 @@
   }
 }
 
-.table-body>div {
+.table-body div team-template {
   display: flex;
   justify-content: space-between;
 
   >* {
     flex: 1;
     width: 50%;
-  }
-
-  /*>*:nth-child(even) {
-    display: flex;
-  }*/
-
-  /*>*:nth-child(odd) {
-    border-left: 1px solid $color-228-25-79;
-  }*/
-
-  circle-team-template {
-    display: block;
     border-bottom: 1px solid $color-228-25-79;
-    border-left: 1px solid $color-228-25-79;
   }
-
-  circle-delete-template {
-    display: block;
-    border-bottom: 1px solid $color-228-25-79;
+  
+  >*:nth-child(odd) {
     border-left: 1px solid $color-228-25-79;
     border-right: 1px solid $color-228-25-79;
+    padding: 0 2.2rem;
+  }
+  
+  >*:nth-child(even) {
+    display: flex;
+    border-right: 1px solid $color-228-25-79;
+    justify-content: flex-end;
+    padding: 2.5rem 2.2rem;
   }
 }
 
 
-sib-multiple {
+sib-multiple[widget='team-template'] {
 
   label {
     display: none;
   }
 
-  >team-template[name='members'] {
+  >div>team-template>sib-display>div {
     display: grid;
     grid-column-gap: 1.6rem;
     grid-template-columns: 7vh auto;
     grid-template-rows: repeat(2, 5.2vh);
 
-    >sib-display:first-child {
+    >[name='account.picture'] {
+      align-items: center;
       align-self: center;
+      background-color: $color-213-20-91;
+      border-radius: 50%;
+      display: flex;
       grid-column: 1 / span 1;
       grid-row: 1 / span 2;
+      height: 7vh;
+      justify-content: center;
+      overflow: hidden;
+      position: relative;
+      width: 7vh;
 
-      div {
-        background-color: $color-0-0-100;
-        border-radius: 50%;
-        height: 7vh;
-        overflow: hidden;
-        position: relative;
-        width: 7vh;
+      img {
+        background-color: white;
+        height: 100%;
+        left: 0;
+        object-fit: cover;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
 
-        img {
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          position: absolute;
-          top: 0;
-          width: 100%;
-        }
+      object {
+        height: 45%;
+        width: 45%;
       }
     }
 
-    >div:nth-child(2) {
+    >[name='sup'] {
       align-self: end;
       display: flex;
       grid-column: 2 / span 1;
       grid-row: 1 / span 1;
+      margin-bottom: 0.50rem;
 
-      span {
-        align-self: center;
+      [name='name'] {
         font-weight: 600;
       }
 
-      span~sib-display {
+      sib-multiple {
+        display: flex;
+        margin-left: 1rem;
 
-        >div {
-          display: flex;
-          margin-left: 1rem;
-
-          sib-multiple [name='name'] {
-            @extend %user-role;
-          }
+        [name='groups'] {
+          @extend %user-role;
         }
       }
     }
 
-    >span:nth-child(3) {
+    >[name='sub'] {
       align-self: start;
       grid-column: 2 / span 1;
       grid-row: 2 / span 1;
+      margin-top: 0.50rem;
+
+      >[name$='profile.city']:not(:empty) {
+        @include mdi('atom');
+        align-items: center;
+        display: flex;
+
+        &::before {
+          color: $color-43-100-50;
+          margin-right: 0.50rem;
+        }
+      }
     }
   }
 }
\ No newline at end of file

From 397e0a4dc38a509bb24cc1ef6660b4d40dcfec9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Wed, 23 Oct 2019 09:57:34 +0200
Subject: [PATCH 13/21] wip

---
 src/page-circle-edit.pug                       |  8 +-------
 src/styles/base/main.scss                      |  1 +
 .../layout/circle-profile/circle-edit.scss     | 18 ++++++++++++------
 3 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 37cd03f..73a9f43 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -34,7 +34,7 @@
     label-owner='owner'
 
     class-name='form-label is-light is-half-width'
-    class-owner='form-label is-light is-half-width member-select'
+    class-owner='form-label is-light is-half-width member-select color'
     class-description='form-label is-light is-full-width'
 
     widget-owner='sib-form-auto-completion'
@@ -42,12 +42,6 @@
 
     submit-button='Register'
   )
-
-  sib-delete(
-    bind-resources
-    data-label='Delete circle'
-    resourceDeleted=''
-  )
   
   h2 List of members
 
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 722a63b..d5f835a 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -120,6 +120,7 @@ sib-delete {
     text-transform: uppercase;
 
     &::before {
+      font-size: 1.6rem;
       margin-right: 1rem;
     }
   }
diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss
index fb84e2c..1b182fb 100644
--- a/src/styles/layout/circle-profile/circle-edit.scss
+++ b/src/styles/layout/circle-profile/circle-edit.scss
@@ -8,16 +8,16 @@ h2 {
   background: $color-228-25-79;
   color: white;
   display: flex;
-  justify-content: space-around;
   font-size: 1.6rem;
   font-weight: 600;
+  justify-content: space-around;
   text-align: center;
 
   >*{
-    flex: 1;
-    width: 50%;
-    padding: 1rem;
     border-right: 1px solid $color-228-25-79;
+    flex: 1;
+    padding: 1rem;
+    width: 50%;
   }
 
   >*:first-of-type {
@@ -30,9 +30,9 @@ h2 {
   justify-content: space-between;
 
   >* {
+    border-bottom: 1px solid $color-228-25-79;
     flex: 1;
     width: 50%;
-    border-bottom: 1px solid $color-228-25-79;
   }
   
   >*:nth-child(odd) {
@@ -45,10 +45,16 @@ h2 {
     display: flex;
     border-right: 1px solid $color-228-25-79;
     justify-content: flex-end;
-    padding: 2.5rem 2.2rem;
+    padding: 2.7rem 2.2rem;
   }
 }
 
+.member-select.color {
+
+  .ss-main {
+    color: $color-233-18-29;
+  }
+}
 
 sib-multiple[widget='team-template'] {
 

From 45064062fd665912d56f3f5c792d6b8ff2e462ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Wed, 23 Oct 2019 13:55:42 +0200
Subject: [PATCH 14/21] wip

---
 src/index.pug               |  3 +++
 src/menu-left.pug           |  1 +
 src/page-circle-profile.pug | 12 ++++++++++++
 src/page-circle.pug         |  4 ++--
 src/styles/base/main.scss   | 31 +++++++++++++++++++++++++++++++
 5 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index cf0f8d0..2752f66 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -35,6 +35,9 @@ html(lang="en")
         #circle(hidden).with-sidebar
           include page-circle.pug
 
+        #circle-edit(hidden).no-sidebar
+          include page-circle-edit.pug
+
         #messages(hidden).with-sidebar
           include page-messages.pug
         
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 0c3114e..327780b 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -77,6 +77,7 @@ nav#main__menu
           order-by='username'
           next='messages'
         )
+    sib-route(hidden, name='circle-edit')
 
     //- div.divider
     //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug
index 9deac43..6f5fbc1 100644
--- a/src/page-circle-profile.pug
+++ b/src/page-circle-profile.pug
@@ -1,4 +1,16 @@
 .content-box.with-padding.full-width
+
+
+
+  sib-display.content-box__header.with-edit(
+    bind-resources
+    fields='name'
+    class-name='name'
+    value-status='Public'
+  )
+
+  sib-link(class="editlink", next="circle-edit" bind-resources)
+
   h2 Channel's name:
   sib-display(
     fields='name',
diff --git a/src/page-circle.pug b/src/page-circle.pug
index 43c0769..d60080a 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -3,7 +3,7 @@
     include page-circle-chat.pug
   #circle-profile
     include page-circle-profile.pug
-  #circle-edit
+  //-#circle-edit
     include page-circle-edit.pug
   //-#circle-create
     include page-circle-create.pug
@@ -18,7 +18,7 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='circle-profile')
         li
           a Information
-      sib-route(name='circle-edit')
+      //-sib-route(name='circle-edit')
         li
           a Edit
       //-sib-route(name='circle-create')
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index d5f835a..59c74c5 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -155,6 +155,23 @@ sib-delete {
   border: 0;
 }
 
+.content-box__header.with-edit {
+  border-bottom: 1px solid $color-221-51-90;
+
+  div {
+
+    .name {
+      text-transform: uppercase;
+    }
+
+    .edit {
+      color: $color-213-4-50;
+      font-size: 1.6rem;
+      margin-left: auto;
+    }
+  }
+}
+
 .backlink {
   font-size: 1.5rem;
   margin: 2rem 0 0 2rem;
@@ -172,6 +189,20 @@ sib-delete {
   }
 }
 
+.editlink {
+  font-size: 1.6rem;
+  @include icon('pencil');
+  color: white;
+
+  &::before {
+    background: $color-244-73-62;
+    border-radius: 50%;
+    text-decoration: none;
+    height: 34px;
+    width: 34px;
+  }
+}
+
 .name {
   color: $color-216-4-22;
   font-size: 2rem;

From 5a865693a13a864893962ccfebc17137b9773ffe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Wed, 25 Sep 2019 16:16:17 +0200
Subject: [PATCH 15/21] feature: new page to display info about a circle and
 add members

- New styles for "add users" drodown
- New custom widget to display members
- Use of the permission system
---
 src/page-circle-chat.pug                      |   4 +-
 src/page-circle-profile.pug                   |  68 ++++---
 src/page-circle.pug                           |  46 ++---
 src/page-messages.pug                         |   4 +-
 src/styles/_index.scss                        |   1 -
 src/styles/base/form.scss                     |  45 +++++
 src/styles/base/header.scss                   |   1 +
 src/styles/base/main.scss                     |  60 +++++-
 src/styles/components/_index.scss             |   1 +
 src/styles/components/chat.scss               |  17 --
 src/styles/components/user-role.scss          |   2 +-
 .../layout/circle-profile/circle-profile.scss | 179 ++++++++++++------
 .../project-profile/project-profile.scss      |   2 +-
 src/templates/hd-circle-team.pug              |  16 ++
 src/templates/template-team.pug               |   1 +
 15 files changed, 312 insertions(+), 135 deletions(-)
 create mode 100644 src/templates/hd-circle-team.pug

diff --git a/src/page-circle-chat.pug b/src/page-circle-chat.pug
index 6d1df86..34b02a8 100644
--- a/src/page-circle-chat.pug
+++ b/src/page-circle-chat.pug
@@ -1,7 +1,9 @@
 .content-box.full-width
-  sib-display.chat-header(
+  sib-display.content-box__header(
     bind-resources
     fields='name'
+
+    class-name='name'
   )
   .chat-view
     sib-chat(
diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug
index 9deac43..507818a 100644
--- a/src/page-circle-profile.pug
+++ b/src/page-circle-profile.pug
@@ -1,29 +1,49 @@
-.content-box.with-padding.full-width
-  h2 Channel's name:
-  sib-display(
-    fields='name',
-    bind-resources
-  )
+.content-box.full-width.with-form
 
-  h2 Description:
-  sib-display(
-    fields='description',
-    bind-resources
-  )
+  include templates/hd-circle-team.pug
+  
+  div.content-box__header.with-edit
+    sib-display(
+      bind-resources
+      fields='name'
 
-  h2 In group:
-  sib-display.block-group(
-    nested-field='team',
-    fields='teammate-img(account.picture), teammate-name(name), teammate-pseudonym(before-pseudo, username), teammate-profile, teammate-contact',
+      class-name='name'
+    )
 
-    template-teammate-contact='chat-link',
+    sib-link(class="editlink", next="circle-edit" bind-resources)
 
-    value-before-pseudo='@',
-    value-teammate-contact='Send a message',
-    value-teammate-profile='View profile',
+  div.content-box__info
+
+    sib-display.block(
+      bind-resources
+      fields='label-description, description, entitled(title, creationDate)'
+
+      value-label-description='Description: '
+
+      default-description='No description available.'
+
+      value-title='Creation date:'
+    )
+
+    sib-ac-checker(permission='acl:Write' bind-resources)
+      sib-form.block.team-form(
+        bind-resources 
+        fields='team'
+        range-team=`${endpoints.users}`
+        partial=''
+
+        class-team='team form-label is-dark'
+        label-team='Members:'
+        widget-team='sib-form-auto-completion'
+
+        submit-button='Add a member'
+      )
+
+    sib-display.block(
+      bind-resources
+      fields='team'
+
+      multiple-team=''
+      widget-team='team-template'
+    )
 
-    widget-account.picture='sib-display-img',
-    
-    next='member',
-    bind-resources
-  )
diff --git a/src/page-circle.pug b/src/page-circle.pug
index b66986c..d60080a 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -1,26 +1,26 @@
 .views-container
   #circle-chat
     include page-circle-chat.pug
-  //- #circle-profile
-  //-   include page-circle-profile.pug
-  //- #circle-edit
-  //-   include page-circle-edit.pug
-  //- #circle-create
-  //-   include page-circle-create.pug
-//- nav.jsRightMenu(role='navigation')
-//-   sib-router(default-route='circle-chat')
-//-     ul
-//-       li.jsOffsiteToggle
-//-         a Fold menu
-//-       sib-route(name='circle-chat')
-//-         li
-//-           a Chat
-//-       sib-route(name='circle-profile')
-//-         li
-//-           a Information
-//-       sib-route(name='circle-edit')
-//-       //-   li
-//-       //-     a Edit
-//-       sib-route(name='circle-create')
-//-       //-   li
-//-       //-     a Add new
\ No newline at end of file
+  #circle-profile
+    include page-circle-profile.pug
+  //-#circle-edit
+    include page-circle-edit.pug
+  //-#circle-create
+    include page-circle-create.pug
+nav.jsRightMenu(role='navigation')
+  sib-router(default-route='circle-chat')
+    ul
+      li.jsOffsiteToggle
+        a Fold menu
+      sib-route(name='circle-chat')
+        li
+          a Chat
+      sib-route(name='circle-profile')
+        li
+          a Information
+      //-sib-route(name='circle-edit')
+        li
+          a Edit
+      //-sib-route(name='circle-create')
+        li
+          a Add new
diff --git a/src/page-messages.pug b/src/page-messages.pug
index dec706a..f12cb83 100644
--- a/src/page-messages.pug
+++ b/src/page-messages.pug
@@ -1,7 +1,9 @@
 .content-box.full-width
-  sib-display.chat-header(
+  sib-display.content-box__header(
     bind-resources
     fields='username'
+
+    class-username='name'
   )
   .chat-view
     sib-chat(
diff --git a/src/styles/_index.scss b/src/styles/_index.scss
index e18fd59..3abbbe1 100644
--- a/src/styles/_index.scss
+++ b/src/styles/_index.scss
@@ -16,7 +16,6 @@ div#viewport {
     @import 'components/index';
     @import 'layout/members/index';
     @import 'layout/job-offers/index';
-    @import 'components/comment.scss';
     @import 'layout/project-profile/index';
     @import 'layout/circle-profile/index';
     @import 'layout/user/index';
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index c1ae4a7..2b0e644 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -102,6 +102,51 @@
 
     /* CLASSES Peut-être à sortir de .content-box */
 
+    .block.team-form>form { /* circle-profile */
+      display: flex;
+      flex-direction: row;
+
+      label {
+
+        >.ss-main {
+          font-weight: normal;
+          min-width: 35vw;
+          text-transform: none;
+
+          >.ss-single-selected {
+            align-items: center;
+            background-color: #ebeffa;
+            border: none;
+            border-radius: 0px;
+            display: flex;
+            justify-content: flex-end;
+            min-height: 4.2rem;
+            padding-left: 1.2rem;
+
+            .ss-arrow {
+              font-size: 1.8rem;
+              margin: 0 18px 0 0;
+
+              span {
+                border: solid $color-244-73-62;
+                border-width: 0 2px 2px 0;
+              }
+            }
+          }
+        }
+      }
+
+      >input[type='submit'] {
+        background-color: transparent;
+        border: 1px solid #6157e5;
+        color: #6157e5;
+        font-size: 1.4rem;
+        align-self: flex-end;
+        margin-bottom: 0.6rem;
+        margin-left: 4.2rem;
+      }
+    }
+
 		.form-container>form {
 		  margin-top: 2.7rem;
 		}
diff --git a/src/styles/base/header.scss b/src/styles/base/header.scss
index 776381b..51cc2af 100644
--- a/src/styles/base/header.scss
+++ b/src/styles/base/header.scss
@@ -145,6 +145,7 @@
         }
 
         img {
+          background-color: white;
           height: 100%;
           object-fit: cover;
           object-position: center;
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 8fa3b61..c57f4a6 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -56,14 +56,14 @@ h6 {
   font-weight: 600;
   padding: 0;
 
-  span {
+  /*span {
     font-weight: 400;
     padding-left: 0.85rem;
 
     &:before {
       content: '// ';
     }
-  }
+  }*/
 }
 
 h1 {
@@ -75,7 +75,7 @@ h2 {
 }
 
 h3 {
-  font-size: 1.6rem;
+  font-size: 1.7rem;
 }
 
 h4 {
@@ -109,6 +109,10 @@ a {
   padding: 5rem;
 }
 
+%padding-block {
+  padding: 3.2rem;
+}
+
 .content-box {
   @include window-style-modal();
   display: flex;
@@ -119,7 +123,7 @@ a {
   &.full-width {
     background: $color-0-0-100;
     flex: 1;
-    font-size: 1.5rem;
+    font-size: 1.6rem;
     margin: 0 auto;
     min-height: calc(100vh - 84px);
   }
@@ -129,6 +133,45 @@ a {
   }
 }
 
+.content-box__header {
+  padding: 2.3rem 3rem;
+
+  div {
+    color: $color-233-18-29;
+    display: flex;
+    font-size: 2rem;
+
+    &>* {
+      align-self: center;
+    }
+
+    .name {
+      font-size: 2rem;
+      font-weight: bold;
+      margin: 1.1rem 0;
+    }
+  }
+}
+
+.content-box__header.with-edit {
+  border-bottom: 1px solid $color-221-51-90;
+  display: flex;
+  justify-content: space-between;
+
+  sib-display {
+    display: flex;
+    text-transform: uppercase;
+  }
+
+  sib-link {
+    display: flex;
+    &::before {
+      align-self: center;
+      display: flex;
+    }
+  }
+}
+
 .drive {
   width: 100%;
   border: 0;
@@ -151,6 +194,15 @@ a {
   }
 }
 
+.editlink {
+  
+  @include icon('pencil');
+  background: $color-244-73-62;
+  border-radius: 50%;
+  color: white;
+  padding: 12px;
+}
+
 .name {
   color: $color-216-4-22;
   font-size: 2rem;
diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss
index ee78562..ce38dc6 100644
--- a/src/styles/components/_index.scss
+++ b/src/styles/components/_index.scss
@@ -1,4 +1,5 @@
 @import 'chat';
+@import 'comment.scss';
 @import 'filters';
 @import 'howto';
 @import 'sidebar';
diff --git a/src/styles/components/chat.scss b/src/styles/components/chat.scss
index 3683b44..1004736 100644
--- a/src/styles/components/chat.scss
+++ b/src/styles/components/chat.scss
@@ -1,20 +1,3 @@
-
-// chat
-.chat-header {
-  
-  div {
-    color: $color-233-18-29;
-    display: flex;
-    flex-direction: column;
-    margin: 3rem;
-    
-    &>:first-child {
-      font-size: 2rem;
-      font-weight: bold;
-    }
-  }
-}
-
 .chat-view {
   padding: 0;
   height: calc(100vh - 84px - 83px);
diff --git a/src/styles/components/user-role.scss b/src/styles/components/user-role.scss
index fed7680..4e2c47e 100644
--- a/src/styles/components/user-role.scss
+++ b/src/styles/components/user-role.scss
@@ -5,5 +5,5 @@
     font-size: 1.4rem;
     font-weight: 400;
     margin-right: 0.4rem;
-    padding: calc(1.6rem - 0.8em) 0.7em;
+    padding: 0.2rem 0.98rem;
   }
\ No newline at end of file
diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss
index 1df3fff..c4d75e4 100644
--- a/src/styles/layout/circle-profile/circle-profile.scss
+++ b/src/styles/layout/circle-profile/circle-profile.scss
@@ -1,79 +1,134 @@
 #circle-profile {
 
-  .block-group > div {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    margin: 0;
-    padding: 0;
+  .content-box__info {
+    @extend %padding-block;
+  }
 
-    sib-display > div {
-      align-items: center;
-      box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
-      display: grid;
-      font-size: 1.6rem;
-      grid-template-columns: repeat(4, 1fr);
-      grid-template-rows: repeat(3, 1fr);
-      height: auto;
-      justify-items: center;
-      margin: 1rem 0.5rem 1rem 0;
-      position: relative;
-      padding-right: 1rem;
-      padding-top: 1rem;
-      text-align: center;
-      width: 14em;
+  .block {
 
-      &:hover {
-        cursor: pointer;
-	      box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
-	      top: -2px;
-      }
+    >form { /* peut-être à mettre dans main.scss */
+      margin-bottom: 2.6rem;
 
-      > sib-set-default[name='teammate-img'] {
-        background-color: $color-215-9-73;
-        border-radius: 50%;
-        grid-column: 1 / span 2;
-        grid-row: 1 / span 2;
-        height: 6vh;
-        overflow: hidden;
-        width: 6vh;
+      .form-label.is-dark>label {
+        margin-top: 0;
 
-        img {
-          height: 100%;
-          left: 0;
-          object-fit: cover;
-          top: 0;
-          width: 100%;
+        >div:first-child {
+          @extend h3;
+          font-weight: bold;
+          margin: 0 0 1.4rem;
+          text-transform: uppercase;
         }
       }
+    }
 
-      sib-set-default[name='teammate-name'] {
-        grid-column: 3 / span 2;
-        grid-row: 1 / span 1;
+    >div { /* peut-être à mettre dans main.scss */
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 2.6rem;
+      position: relative;
+
+      >[name^='label'] {
+        @extend h3;
+        font-weight: bold;
+        margin: 0 0 1.4rem;
+        text-transform: uppercase;
       }
 
-      > sib-set-default[name='teammate-pseudonym'] {
-        align-self: start;
-        font-size: 1.2rem;
-        grid-column: 3 / span 2;
-        grid-row: 2 / span 1;
+      >[name='description'] {
+        max-width: 80%;
       }
 
-      > sib-display-value[name='teammate-profile'] {
-        color: $color-216-4-22;
-        display: block;
-        font-size: 1.2rem;
-        grid-column: 1 / span 2;
-        grid-row: 3 / span 1;
-      }
+      >[name='entitled'] {
+        align-self: flex-end;
+        position: absolute;
 
-      > sib-display-value[name='teammate-contact'] {
-        color: $color-244-73-62;
-        font-size: 1.2rem;
-        justify-self: stretch;
-        grid-column: 3 / span 2;
-        grid-row: 3 / span 1;
+        >*:first-child {
+          margin-right: 0.8rem;
+        }
+      }
+      
+      >sib-multiple {
+
+        label {
+          display: none;
+        }
+
+        >div>team-template[name='team']>sib-display>div {
+          display: grid;
+          grid-column-gap: 1.6rem;
+          grid-template-columns: 7vh auto;
+          grid-template-rows: repeat(2, 5.2vh);
+
+          >[name='account.picture'] {
+            align-items: center;
+            align-self: center;
+            background-color: $color-213-20-91;
+            border-radius: 50%;
+            display: flex;
+            grid-column: 1 / span 1;
+            grid-row: 1 / span 2;
+            height: 7vh;
+            justify-content: center;
+            overflow: hidden;
+            position: relative;
+            width: 7vh;
+
+            img {
+              background-color: white;
+              height: 100%;
+              left: 0;
+              object-fit: cover;
+              position: absolute;
+              top: 0;
+              width: 100%;
+            }
+
+            object {
+              height: 45%;
+              width: 45%;
+            }
+          }
+
+          >[name='sup'] {
+            align-self: end;
+            display: flex;
+            grid-column: 2 / span 1;
+            grid-row: 1 / span 1;
+            margin-bottom: 0.50rem;
+
+            [name='name'] {
+              font-weight: 600;
+            }
+
+            sib-multiple {
+              display: flex;
+              margin-left: 1rem;
+
+              [name='groups'] {
+                @extend %user-role;
+              }
+            }
+          }
+
+          >[name='sub'] {
+            align-self: start;
+            grid-column: 2 / span 1;
+            grid-row: 2 / span 1;
+            margin-top: 0.50rem;
+
+            >[name$='profile.city']:not(:empty) {
+              @include mdi('atom');
+              align-items: center;
+              display: flex;
+
+              &::before {
+                color: $color-43-100-50;
+                margin-right: 0.50rem;
+              }
+            }
+          }
+        }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss
index e8b8cdc..1a8b0f2 100644
--- a/src/styles/layout/project-profile/project-profile.scss
+++ b/src/styles/layout/project-profile/project-profile.scss
@@ -6,7 +6,7 @@
     [name^='label-'] {
       display: block;
       font-weight: bold;
-      margin-bottom: 1.4rem;
+      margin: 1.4rem 0;
       text-transform: uppercase;
       @extend h2;
     }
diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug
new file mode 100644
index 0000000..62f7b37
--- /dev/null
+++ b/src/templates/hd-circle-team.pug
@@ -0,0 +1,16 @@
+include hd-user-avatar.pug
+
+sib-widget(name='team-template')
+  template
+    sib-display(
+      data-src="${await value}"
+      fields='account.picture, sup(name, groups), sub(profile.city)'
+
+      widget-account.picture='hd-user-avatar'
+      widget-groups='hd-user-groups'
+
+      multiple-groups=''
+    )
+
+sib-widget(name='hd-user-groups')
+  template ${await value.name}
diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug
index f529ecf..9a89ada 100644
--- a/src/templates/template-team.pug
+++ b/src/templates/template-team.pug
@@ -21,3 +21,4 @@ sib-widget(name='team-template')
       data-src="${value.user ? value.user['@id'] : ''}"
       fields='username'
     )
+

From 67697ab03dd1aa92662a1611ea3caa2f91bf6644 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Thu, 24 Oct 2019 11:21:35 +0200
Subject: [PATCH 16/21] route for edit ok

---
 src/index.pug            | 1 +
 src/menu-left.pug        | 2 +-
 src/page-circle-edit.pug | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index 2752f66..d903a37 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -36,6 +36,7 @@ html(lang="en")
           include page-circle.pug
 
         #circle-edit(hidden).no-sidebar
+          sib-link(class="backlink", bind-resources) Back
           include page-circle-edit.pug
 
         #messages(hidden).with-sidebar
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 327780b..71a8de7 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -77,7 +77,7 @@ nav#main__menu
           order-by='username'
           next='messages'
         )
-    sib-route(hidden, name='circle-edit')
+    sib-route(hidden, name='circle-edit', use-id)
 
     //- div.divider
     //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 73a9f43..bedbed6 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -1,4 +1,4 @@
-#circle-edit.content-box.with-padding.with-form.full-width
+#circle-edit.content-box.with-padding.with-form
 
   include templates/hd-user-avatar.pug
 

From b18fb237f2038469919ab091ebf4dad5c07f8a9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Thu, 24 Oct 2019 11:22:38 +0200
Subject: [PATCH 17/21] delete former route

---
 src/page-circle.pug | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/page-circle.pug b/src/page-circle.pug
index d60080a..25f48b3 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -3,8 +3,6 @@
     include page-circle-chat.pug
   #circle-profile
     include page-circle-profile.pug
-  //-#circle-edit
-    include page-circle-edit.pug
   //-#circle-create
     include page-circle-create.pug
 nav.jsRightMenu(role='navigation')
@@ -18,9 +16,6 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='circle-profile')
         li
           a Information
-      //-sib-route(name='circle-edit')
-        li
-          a Edit
       //-sib-route(name='circle-create')
         li
           a Add new

From bf2b89d6d4702df6a9617657ca91746964daf75f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= <morin.gaelle@gmail.com>
Date: Thu, 24 Oct 2019 14:53:29 +0200
Subject: [PATCH 18/21] sib link

---
 src/index.pug     | 7 ++++++-
 src/menu-left.pug | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index d903a37..e05f554 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -36,7 +36,12 @@ html(lang="en")
           include page-circle.pug
 
         #circle-edit(hidden).no-sidebar
-          sib-link(class="backlink", bind-resources) Back
+          sib-action.backlink(
+            bind-resources
+            label='Back'
+            data-src='${src}'
+          )
+          sib-link(class='backlink', bind-resources, next='') Back
           include page-circle-edit.pug
 
         #messages(hidden).with-sidebar
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 71a8de7..900d002 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -77,7 +77,7 @@ nav#main__menu
           order-by='username'
           next='messages'
         )
-    sib-route(hidden, name='circle-edit', use-id)
+    sib-route(hidden, name='circle-edit', use-id='')
 
     //- div.divider
     //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')

From a4314210b4fb5a5abd54c822363a65b5888656cb Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Thu, 24 Oct 2019 21:23:11 +0200
Subject: [PATCH 19/21] update: working form + back link

---
 src/index.pug             |  2 +-
 src/page-circle-edit.pug  | 21 ++++++++++++++++-----
 src/styles/base/main.scss |  4 ----
 3 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index d903a37..76d9580 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -36,7 +36,7 @@ html(lang="en")
           include page-circle.pug
 
         #circle-edit(hidden).no-sidebar
-          sib-link(class="backlink", bind-resources) Back
+          sib-link(class="backlink", bind-resources, next='circle') Back
           include page-circle-edit.pug
 
         #messages(hidden).with-sidebar
diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index bedbed6..3661352 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -17,10 +17,19 @@
         widget-groups='hd-user-groups'
       )
 
-      sib-delete(
+      sib-ac-checker(
+        permission="acl:Delete"
+        data-src="${await value['@id']}"
+      )
+        sib-delete(
+          data-src="${await value['@id']}"
+          data-label='Leave the circle'
+        )
+
+      //- Only to show the table grid
+      sib-ac-checker(
+        no-permission="acl:Delete"
         data-src="${await value['@id']}"
-        data-label='Delete from circle'
-        resourceDeleted=''
       )
 
   h1 Edit your circle
@@ -40,10 +49,12 @@
     widget-owner='sib-form-auto-completion'
     widget-description='sib-form-textarea'
 
-    submit-button='Register'
+    partial=''
+
+    submit-button='Save'
   )
   
-  h2 List of members
+  h2 Members list
 
   div.table-header
     div.cell Name
diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
index 59c74c5..5e8464c 100644
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@@ -7,10 +7,6 @@ $breakpoints: (phone: 480px,
   display: none !important;
 }
 
-sib-ac-checker[hidden] {
-  display: block !important;
-}
-
 * {
   outline: none;
 }

From 9e3dc8fe8c1064f61c4c081da0274f13e31fd21d Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Thu, 24 Oct 2019 21:44:35 +0200
Subject: [PATCH 20/21] fix: edit template dup name

---
 src/page-circle-edit.pug                          | 4 ++--
 src/styles/layout/circle-profile/circle-edit.scss | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index 3661352..f03f232 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -5,7 +5,7 @@
   sib-widget(name='hd-user-groups')
     template ${await value.name}
 
-  sib-widget(name='team-template')
+  sib-widget(name='team-template-edit')
     template
       sib-display(
         data-src='${await value.user}'
@@ -65,5 +65,5 @@
     fields='members'
 
     multiple-members=''
-    widget-members='team-template'
+    widget-members='team-template-edit'
   )
diff --git a/src/styles/layout/circle-profile/circle-edit.scss b/src/styles/layout/circle-profile/circle-edit.scss
index 1b182fb..1c3fe92 100644
--- a/src/styles/layout/circle-profile/circle-edit.scss
+++ b/src/styles/layout/circle-profile/circle-edit.scss
@@ -25,7 +25,7 @@ h2 {
   }
 }
 
-.table-body div team-template {
+.table-body div team-template-edit {
   display: flex;
   justify-content: space-between;
 
@@ -56,13 +56,13 @@ h2 {
   }
 }
 
-sib-multiple[widget='team-template'] {
+sib-multiple[widget='team-template-edit'] {
 
   label {
     display: none;
   }
 
-  >div>team-template>sib-display>div {
+  >div>team-template-edit>sib-display>div {
     display: grid;
     grid-column-gap: 1.6rem;
     grid-template-columns: 7vh auto;

From 48075b241937f372560c7cf6f169cd6112871d8f Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Pasquier <contact@jbpasquier.eu>
Date: Thu, 24 Oct 2019 22:03:15 +0200
Subject: [PATCH 21/21] update: imbricate edit in profile & fix css

---
 src/index.pug                                 |  4 -
 src/menu-left.pug                             |  1 -
 src/page-circle-edit.pug                      |  8 +-
 src/page-circle-profile.pug                   | 90 ++++++++++---------
 src/page-circle.pug                           |  9 +-
 src/styles/components/sidebar.scss            |  2 +-
 .../layout/circle-profile/circle-profile.scss |  7 +-
 7 files changed, 63 insertions(+), 58 deletions(-)

diff --git a/src/index.pug b/src/index.pug
index 76d9580..cf0f8d0 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -35,10 +35,6 @@ html(lang="en")
         #circle(hidden).with-sidebar
           include page-circle.pug
 
-        #circle-edit(hidden).no-sidebar
-          sib-link(class="backlink", bind-resources, next='circle') Back
-          include page-circle-edit.pug
-
         #messages(hidden).with-sidebar
           include page-messages.pug
         
diff --git a/src/menu-left.pug b/src/menu-left.pug
index 89f082a..1213473 100644
--- a/src/menu-left.pug
+++ b/src/menu-left.pug
@@ -81,7 +81,6 @@ nav#main__menu
           order-by='username'
           next='messages'
         )
-    sib-route(hidden, name='circle-edit', use-id='')
 
     //- div.divider
     //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')
diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug
index f03f232..1121969 100644
--- a/src/page-circle-edit.pug
+++ b/src/page-circle-edit.pug
@@ -1,4 +1,4 @@
-#circle-edit.content-box.with-padding.with-form
+div.content-box__info
 
   include templates/hd-user-avatar.pug
 
@@ -32,8 +32,10 @@
         data-src="${await value['@id']}"
       )
 
+  sib-link(class="backlink", bind-resources, next='circle-profile') Back
+
   h1 Edit your circle
-  
+
   sib-form.block(
     bind-resources
     
@@ -53,7 +55,7 @@
 
     submit-button='Save'
   )
-  
+
   h2 Members list
 
   div.table-header
diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug
index 507818a..72d0f52 100644
--- a/src/page-circle-profile.pug
+++ b/src/page-circle-profile.pug
@@ -1,49 +1,55 @@
 .content-box.full-width.with-form
+  sib-router(default-route='circle-profile')
+    sib-route(name='circle-profile')
+    sib-route(name='circle-edit')
 
-  include templates/hd-circle-team.pug
-  
-  div.content-box__header.with-edit
-    sib-display(
-      bind-resources
-      fields='name'
+  #circle-profile(hidden)
+    include templates/hd-circle-team.pug
+    
+    div.content-box__header.with-edit
+      sib-display(
+        bind-resources
+        fields='name'
 
-      class-name='name'
-    )
-
-    sib-link(class="editlink", next="circle-edit" bind-resources)
-
-  div.content-box__info
-
-    sib-display.block(
-      bind-resources
-      fields='label-description, description, entitled(title, creationDate)'
-
-      value-label-description='Description: '
-
-      default-description='No description available.'
-
-      value-title='Creation date:'
-    )
-
-    sib-ac-checker(permission='acl:Write' bind-resources)
-      sib-form.block.team-form(
-        bind-resources 
-        fields='team'
-        range-team=`${endpoints.users}`
-        partial=''
-
-        class-team='team form-label is-dark'
-        label-team='Members:'
-        widget-team='sib-form-auto-completion'
-
-        submit-button='Add a member'
+        class-name='name'
       )
 
-    sib-display.block(
-      bind-resources
-      fields='team'
+      sib-link(class="editlink", next="circle-edit" bind-resources)
 
-      multiple-team=''
-      widget-team='team-template'
-    )
+    div.content-box__info
 
+      sib-display.block(
+        bind-resources
+        fields='label-description, description, entitled(title, creationDate)'
+
+        value-label-description='Description: '
+
+        default-description='No description available.'
+
+        value-title='Creation date:'
+      )
+
+      sib-ac-checker(permission='acl:Write' bind-resources)
+        sib-form.block.team-form(
+          bind-resources 
+          fields='team'
+          range-team=`${endpoints.users}`
+          partial=''
+
+          class-team='team form-label is-dark'
+          label-team='Members:'
+          widget-team='sib-form-auto-completion'
+
+          submit-button='Add a member'
+        )
+
+      sib-display.block(
+        bind-resources
+        fields='team'
+
+        multiple-team=''
+        widget-team='team-template'
+      )
+
+  #circle-edit(hidden)
+    include page-circle-edit.pug
\ No newline at end of file
diff --git a/src/page-circle.pug b/src/page-circle.pug
index 25f48b3..f132b75 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -1,7 +1,7 @@
 .views-container
-  #circle-chat
+  #circle-chat(hidden)
     include page-circle-chat.pug
-  #circle-profile
+  #circle-information(hidden)
     include page-circle-profile.pug
   //-#circle-create
     include page-circle-create.pug
@@ -13,9 +13,6 @@ nav.jsRightMenu(role='navigation')
       sib-route(name='circle-chat')
         li
           a Chat
-      sib-route(name='circle-profile')
+      sib-route(name='circle-information')
         li
           a Information
-      //-sib-route(name='circle-create')
-        li
-          a Add new
diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss
index 2377358..cea2695 100644
--- a/src/styles/components/sidebar.scss
+++ b/src/styles/components/sidebar.scss
@@ -89,7 +89,7 @@
             @include ci('list');
           }
 
-          &[name$='profile']>li {
+          &[name$='profile']>li, &[name$='information']>li  {
             @include ci('information');
           }
 
diff --git a/src/styles/layout/circle-profile/circle-profile.scss b/src/styles/layout/circle-profile/circle-profile.scss
index c4d75e4..834985a 100644
--- a/src/styles/layout/circle-profile/circle-profile.scss
+++ b/src/styles/layout/circle-profile/circle-profile.scss
@@ -1,7 +1,12 @@
-#circle-profile {
+#circle-information, #circle-edit {
 
   .content-box__info {
     @extend %padding-block;
+
+    .backlink {
+      text-align: right;
+      display: block;
+    }
   }
 
   .block {