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
  div.segment.full.sm-three-quarter
    h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
  div.segment.lg-hidden.sm-quarter.text-right
    div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading

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=`${getComponent('projects').endpoints.post}`, permission='acl:Append')
        solid-link(
          class='segment sm-full button text-xsmall text-bold text-uppercase text-center reversed color-secondary bordered button-icon icon icon-margin-right-xsmall icon-plus'
          next=`admin-${getRoute('projects', true)}-create`
          data-trans='project.list.buttonCreate'
        )

  solid-form-search.form.search-form(
    id="admin-project-filter"
    fields='cell1'
    label-cell1=''
    widget-cell1='solid-form-label-text'
    class-cell1="segment margin-bottom-medium third sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
    submit-button=""
    submit-widget="button"
    class-submit-button="search-button segment sm-full text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
    data-trans='label-cell1=project.list.searchBy;submit-button=goButton'
  )

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

      solid-widget(name=`orbit-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'
          )
          orbit-reactivity(data-src=`${getComponent('projects').endpoints.get}` target-src='${src}')
          orbit-reactivity(data-src=`${getComponent('projects').endpoints.get}joinable/` target-src='${src}')
          orbit-reactivity(data-src=`${getComponent('projects').endpoints.post}` target-src='${src}')
          orbit-reactivity(data-src=`${getComponent('projects').endpoints.post}joinable/` target-src='${src}')
          orbit-reactivity(bind-user nested-field="projects" target-src='${src}')
          solid-display(
            data-src="${src}"
            fields="project"
            widget-project=`leave-project-reactivity`
            hidden
          )

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

      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='orbit-admin-project-link-alternate'
        class-project.name='segment full'

        action-leaveButton="joinButton"
        widget-leaveButton=`orbit-admin-project-leave-button`

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

        order-by="project.name"
      )

      solid-widget(name=`orbit-admin-project-join-button`)
        template
          solid-form(
            class=''
            data-src='${src}'
            nested-field="members"

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

            submit-button=''
            submit-widget="button"
            class-submit-button="add-member-button segment margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-reversed color-secondary bordered children-button-icon children-icon-arrow-right-circle children-icon-small children-icon-margin-right-xsmall"
            data-trans='submit-button=project.list.buttonJoin'
          )
          orbit-reactivity(data-src=`${getComponent('projects').endpoints.get}` target-src='${value}')
          orbit-reactivity(data-src=`${getComponent('projects').endpoints.get}joinable/` target-src='${value}')
          orbit-reactivity(data-src=`${getComponent('projects').endpoints.post}` target-src='${value}')
          orbit-reactivity(data-src=`${getComponent('projects').endpoints.post}joinable/` target-src='${value}')
          orbit-reactivity(bind-user nested-field="projects" target-src='${value}')

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

        data-src=`${getComponent('projects').endpoints.get}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='orbit-admin-project-link'
        class-name='segment full'

        action-joinButton="joinButton"
        widget-joinButton=`orbit-admin-project-join-button`

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

        order-by="name"
      )

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