feat: add template for circle admin page

src/page-circle-admin.pug

@@ -1,20 +1,28 @@
-h1 Circles
+sib-widget(name='circle-admin-leave-button-template')
+  template
+    sib-ac-checker(
+      permission="acl:Delete"
+      data-src="${await value['@id']}"
+    )
+      sib-delete(
+        data-src="${await value['@id']}"
+        data-label='Leave the circle'
+      )
 
-sib-widget(name='template-admin-circle')
+sib-widget(name='circle-admin-join-button-template')
-    template
+  template
-      sib-display(
+    sib-form.circle-admin-join-button(
-        fields='name'
+      data-src='${src}'
-        bind-resources
+      nested-field='members'
-      )
+      fields='user'
-      sib-display(
+      widget-user='sib-form-dropdown'
-        data-src='${await value.owner}'
+      label-user=''
-        fields='account.picture, sup(name)'
+      range-user=`${endpoints.users}`
-        widget-account.picture='hd-user-avatar'
+      submit-button='Join'
-      )
+      set-user-id-select="user"
-      sib-display(
+    )
-        fields='team'
+
-        bind-resources
+h1 Circles
-      )
 
 div
   //- Search a circle
@@ -26,7 +34,11 @@ div.table-header
 
 sib-display.table-body(
   data-src=`${endpoints.circles}`
-  fields='circles(name, team, owner)'
+  fields="name,own(owner.name,owner.account['@id']),members,button"
-  multiple-circles
+
-  widget-circles='template-admin-circle'
+  widget-members='circle-admin-leave-button-template'
+  multiple-members
+
+  widget-button='circle-admin-join-button-template'
+  action-button='button'
 )

src/styles/base/main.scss

@@ -260,4 +260,5 @@ sib-delete {
 // Other base components
 @import 'form';
 @import 'header';
-@import 'menu-left';
+@import 'menu-left';
+@import 'user-avatar';

src/styles/base/user-avatar.scss

@@ -0,0 +1,29 @@
+.project-profile-user-avatar {
+  align-self: center;
+  grid-column: 1 / span 1;
+  grid-row: 1 / span 2;
+  display: inline;
+
+  * {
+    height: 100%;
+    width: 100%;
+  }
+
+  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%;
+    }
+  }
+}

src/styles/layout/circle/_index.scss

@@ -1,2 +1,3 @@
 @import 'circle-profile';
-@import 'circle-edit';
+@import 'circle-edit';
+@import 'circle-admin';

src/styles/layout/circle/circle-admin.scss

@@ -0,0 +1,3 @@
+.circle-admin-join-button select[name='user'] {
+  display: none;
+}

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

@@ -13,11 +13,22 @@ h2 {
   justify-content: space-around;
   text-align: center;
 
-  >*{
+  .cell {
-    border-right: 1px solid $color-228-25-79;
+    border-bottom: none;
+    border-top: none;
     flex: 1;
     padding: 1rem;
     width: 50%;
+
+    &:not(:last-child) {
+      border-left: none;
+      border-right: 1px solid white;
+    }
+
+    &:not(:last-child) {
+      border-left: 1px solid white;
+      border-right: none;
+    }
   }
 
   >*:last-of-type {

src/styles/layout/project-profile/project-profile.scss

@@ -169,30 +169,6 @@
       display: none;
     }
 
-    sib-display.project-profile-user-avatar {
-      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%;
-        }
-      }
-    }
-
     team-template[name='members'], captain-template[name='captain'] {
       display: grid;
       grid-column-gap: 1.6rem;
@@ -231,13 +207,4 @@
       }
     }
   }
-
-  .project-profile-user-avatar {
-    display: inline;
-
-    * {
-      height: 100%;
-      width: 100%;
-    }
-  }
 }