.content-box.flex.full-width.with-form
  solid-router(default-route='admin-project-list', hidden)
    solid-route(name='admin-project-list')
    solid-route(name='admin-project-create')
    solid-route(name='project-left')

  div.content-box__header.flex.space-between
    h1.without-margin(data-trans='project.list.title')
    button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')

  #project-left(hidden, data-view="project-left")
    include ../project/page-project-left.pug

  #admin-project-list.content-box__height(hidden, data-view="admin-project-list")

    div.content-box__info.flex
      div.admin-header.flex
        h3(data-trans='project.list.subTitle')
        solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
          solid-link(
            class='button text-bold text-uppercase reversed button-primary bordered with-icon icon-plus'
            next='admin-project-create'
            data-trans='project.list.buttonCreate'
          )

      .table-wrapper
        .table
          div.table-header.grey-color
            div.w280(data-trans='project.list.tableHeader1')
            div.w280(data-trans='project.list.tableHeader2')
            div.w280(data-trans='project.list.tableHeader3')
            div.w230(data-trans='project.list.tableHeader4')

          solid-widget(name="hubl-admin-project-leave-button")
            template
              solid-delete(
                class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
                data-src="${src}"
                data-label=''
                data-trans='data-label=project.list.buttonQuit'
              )
              hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
              hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
              hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
              if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
                hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${src}`)
                hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${src}`)

          solid-widget(name='hubl-project-captain')
            template
              solid-display.user-thumb.block.is-spaced(
                data-src='${await value}'
                fields='account.picture, sup(name), sub(username)'

                class-account.picture='avatar user-thumb__picture'
                class-name='user-thumb__name'
                class-username='user-thumb__username'

                widget-account.picture='hubl-user-avatar'
              )

          solid-widget(name='hubl-project-admins')
            template
              solid-display(
                data-src='${value}'
                fields='user'
                search-fields='is_admin'
                search-value-is_admin='true'
                search-widget-is_admin='solid-form-hidden'
                widget-user='hubl-project-captain'
              )

          solid-widget(name='hubl-admin-project-leave-button')
            template
              solid-delete(
                class='button text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
                data-src="${src}"
                data-label=''
                data-trans='data-label=project.list.buttonQuit'
              )

          solid-display(
            class='table-body'

            bind-user
            nested-field="projects"
            fields='project.name, project.members, project.captain, leaveButton'
            loader-id='loader-admin-projects'

            class-project.name='w280 cell border cell-with-name'
            class-project.members='w280 cell border cell-with-id-card'
            class-project.captain='w280 cell border cell-with-id-card'
            class-leaveButton='w230 cell border cell-with-buttons is-spaced'

            action-leaveButton="joinButton"
            widget-leaveButton="hubl-admin-project-leave-button"

            widget-project.captain='hubl-project-captain'
            widget-project.members='hubl-project-admins'

            order-by="project.name"
          )

          solid-widget(name='hubl-admin-project-join-button')
            template
              solid-form.button.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex(
                data-src='${src}'
                nested-field="members"

                fields='user.username'
                value-user.username='hubl-workaround-493'
                widget-user.username='solid-form-hidden'

                submit-button=''
                data-trans='submit-button=project.list.buttonJoin'
              )
              hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
              hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
              hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
              if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
                hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${value}`)
                hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${value}`)

          solid-display(
            class='table-body'

            data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
            fields='name, members, captain, joinButton'
            loader-id='loader-admin-projects'

            class-name='w280 cell border cell-with-name'
            class-members='w280 cell border cell-with-id-card'
            class-captain='w280 cell border cell-with-id-card'
            class-joinButton='w230 cell border cell-with-buttons is-spaced'

            action-joinButton="joinButton" # Workaround: I need members two times
            widget-joinButton="hubl-admin-project-join-button"

            widget-captain='hubl-project-captain'
            widget-members='hubl-project-admins'

            order-by="name"
          )

      div#loader-admin-projects.loader.loader-top
        div
        div
        div
        div

  #admin-project-create(hidden, data-view="admin-project-create")
    include page-admin-projects-create.pug