div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal
  h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')

div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-medium.whitespace-normal

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

  solid-widget(name='hubl-admin-project-counter')
    template
      div(style='float:right')
        solid-display(
          fields=''
          data-src="${src}"
          nested-field="members"
          counter-template="\\\${counter}"
        )
        span.icon.icon-people.icon-xsmall.margin-right-xxsmall

  solid-widget(name='hubl-admin-project-counter-alternate')
    template
      div(style='float:right')
        solid-display(
          fields=''
          data-src="${src}"
          nested-field="project.members"
          counter-template="\\\${counter}"
        )
        span.icon.icon-people.icon-xsmall.margin-right-xxsmall

  solid-widget(name='admin-project-link')
    template
      solid-link(
        data-src='${src}'
        next='project-information'
      )
        solid-display(
          data-src='${src}'
          fields='customer.name'
        )

  solid-widget(name='admin-project-link-alternate')
    template
      solid-display(
        data-src='${src}'
        nested-field='project'
        fields='name'
        class-name='segment block margin-bottom-xxsmall text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline text-ellipsis admin-name-ellipsis'
        action-name='name'
        widget-name='admin-project-link'
      )

  solid-form-search.form(
    id="admin-project-filter"
    fields='cell1'
    label-cell1=''
    data-trans='label-cell1=project.list.searchBy'
    widget-cell1='solid-form-label-text'
    class-cell1="segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
  )

  .segment.table-wrapper
    .table

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

      solid-widget(name="leave-project-reactivity")
        template
          hubl-reactivity(data-src=`${endpoints.get.projects}` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.get.projects}joinable/` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.post.projects}` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src='${value}')
          hubl-reactivity(bind-user nested-field="projects" target-src='${value}')

      solid-widget(name="hubl-admin-project-leave-button")
        template
          solid-delete(
            class='segment text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered'
            data-src="${src}"
            data-label=''
            data-trans='data-label=project.list.buttonQuit'
          )
          hubl-reactivity(data-src=`${endpoints.get.projects}` target-src='${src}')
          hubl-reactivity(data-src=`${endpoints.get.projects}joinable/` target-src='${src}')
          hubl-reactivity(data-src=`${endpoints.post.projects}` target-src='${src}')
          hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src='${src}')
          hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
          solid-display(
            data-src="${src}"
            fields="project"
            widget-project='leave-project-reactivity'
            hidden
          )

      solid-widget(name='hubl-project-captain')
        template
          solid-display.segment.margin-top-xxsmall.margin-bottom-xxsmall.labelled-avatar.two-lines.block(
            data-src='${await value}'
            fields='segment1(account.picture), segment2(line1(name), line2(at, username))'

            class-segment1='segment'
            class-account.picture='avatar'

            class-segment2='segment three-quarter margin-left-xsmall'
            class-line1='segment block'
            class-name='text-small text-semibold text-color-heading text-sub'
            class-line2='segment block text-xsmall'

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

            value-at='@'
          )

      solid-form-search(
        id="hubl_project_is_admin"
        fields="is_admin"
        value-is_admin='true'
        widget-is_admin='solid-form-checkbox'
        hidden
      )

      solid-widget(name='hubl-project-admins')
        template
          solid-display(
            data-src='${value}'
            fields='user'
            filtered-by='hubl_project_is_admin'
            widget-user='hubl-project-captain'
          )

      solid-display(
        class='table-body'
        filtered-by="admin-project-filter"

        bind-user
        nested-field="projects"
        fields='cell1(project.customer.name, counter, project.name), cell2(project.members), cell3(project.captain), cell4(leaveButton)'
        loader-id='loader-admin-projects'

        class-cell1='segment table-cell quarter text-left whitespace-normal'
        class-cell2='segment table-cell quarter text-left'
        class-cell3='segment table-cell quarter text-left'
        class-cell4='segment table-cell quarter text-center'

        action-project.customer.name='project.customer.name'
        widget-project.customer.name='admin-project-link-alternate'
        class-project.name='segment full'

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

        widget-project.captain='hubl-project-captain'
        widget-project.members='hubl-project-admins'
        action-counter="counter"
        widget-counter="hubl-admin-project-counter-alternate"

        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.get.projects}` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.get.projects}joinable/` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.post.projects}` target-src='${value}')
          hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src='${value}')
          hubl-reactivity(bind-user nested-field="projects" target-src='${value}')

      solid-display(
        class='table-body'
        filtered-by="admin-project-filter"

        data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
        fields='cell1(customer.name, counter, name), cell2(members), cell3(captain), cell4(joinButton)'
        loader-id='loader-admin-projects'

        class-cell1='segment table-cell quarter text-left whitespace-normal'
        class-cell2='segment table-cell quarter text-left'
        class-cell3='segment table-cell quarter text-left'
        class-cell4='segment table-cell quarter text-center'

        action-project.customer.name='project.customer.name'
        widget-project.customer.name='admin-project-link'
        class-name='segment full'

        action-joinButton="joinButton"
        widget-joinButton="hubl-admin-project-join-button"

        widget-captain='hubl-project-captain'
        widget-members='hubl-project-admins'
        action-counter="counter"
        widget-counter="hubl-admin-project-counter"

        order-by="name"
      )

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