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')

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

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

  div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading
    div
      h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
    div.segment.lg-hidden
      button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')

  div.segment.padding-large
    div.segment.margin-bottom-medium.clearfix
      div.segment.lg-half.float-left
        h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle')
      div.segment.lg-half.float-left.text-right.padding-top-xxsmall
        solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
          solid-link(
            class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
            next='admin-project-create'
            data-trans='project.list.buttonCreate'
          )

    .table-wrapper
      .table

        div.table-header.bg-color-third.text-color-heading
          div.table-cell.w280(data-trans='project.list.tableHeader1')
          div.table-cell.w280(data-trans='project.list.tableHeader2')
          div.table-cell.w280(data-trans='project.list.tableHeader3')
          div.table-cell.w230(data-trans='project.list.tableHeader4')

        solid-widget(name="hubl-admin-project-leave-button")
          template
            solid-delete(
              class='button text-xsmall text-bold text-uppercase color-secondary bordered'
              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.segment.margin-left-xlarge.user-thumb(
              data-src='${await value}'
              fields='account.picture, content(name-and-icon(name), sub(username))'

              class-account.picture='user-thumb-avatar'
              class-content='user-thumb-content'
              class-name-and-icon='user-thumb-content__name-and-icon'
              class-name='name'
              class-sub='user-thumb-content__sub-text username'
              class-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-xsmall text-bold text-uppercase color-secondary bordered'
              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='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
          class-project.members='table-cell w280'
          class-project.captain='table-cell w280'
          class-leaveButton='table-cell w230'

          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(
              class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
              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='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
          class-members='table-cell w280'
          class-captain='table-cell w280'
          class-joinButton='table-cell w230'

          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