hubl/src/views/partials/project/page-project-edit.pug

solid-ac-checker(permission='acl:Read', bind-resources)
  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.half.sm-three-quarter.whitespace-normal
      solid-display.text-xlarge.text-letter-spacing-large(
        bind-resources
        fields='const-title1, number, customer.name, dash, name'

        class-const-title1='text-color-heading text-bold text-uppercase'
        class-number='text-color-heading text-bold text-uppercase word-spacing-right'
        class-customer.name='text-color-heading text-bold text-uppercase'
        class-dash='text-color-heading text-bold text-xlarge'
        class-name=''

        value-const-title1='N°'
        value-dash=' - '
      )
    div.segment.half.sm-hidden.text-right
      solid-link(class='backlink', bind-resources, next=`${component.route}-profile` data-trans='project.edit.backlink')
    div.segment.lg-hidden.sm-quarter.text-right
      div.jsMobileRightMenuButton.icon.icon-options-vertical.icon-heading

div.segment.full.padding-large.whitespace-normal

  solid-ac-checker(permission='acl:Write', bind-resources)
    div.loader.loader-top(id=`loader-${component.route}-edit`)
      div
      div
      div
      div

    //- Add translation for description and captain in the translate file

  solid-form.form(
    bind-resources 

    range-captain=`${getComponent('projects').endpoints.captains}`
    
    required-status
    required-customer.name
    required-name
    required-captain
    loader-id=`loader-admin-${getComponent('projects').uniq}`

    label-status=''
    label-projectset=''
    label-customerset=''
    label-name=''
    label-description=''
    label-help=''
    label-captain=''
    label-customer.name=''
    label-customer.address=''
    label-customer.postcode=''
    label-customer.city=''
    label-customer.country=''

    class-projectset='segment full padding-bottom-small margin-bottom-medium border-bottom border-color-grey text-color-heading text-bold text-letter-spacing-large text-xlarge'
    class-customerset='segment full padding-bottom-small margin-bottom-medium border-bottom border-color-grey text-color-heading text-bold text-letter-spacing-large text-xlarge'
    class-customer.name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
    class-customer.address='segment margin-bottom-medium full sm-padding-none text-small text-semibold text-uppercase text-color-heading'
    class-customer.postcode='segment margin-bottom-medium third sm-full padding-right-xsmall sm-padding-none text-small text-semibold text-uppercase text-color-heading'
    class-customer.city='segment margin-bottom-medium third sm-full padding-left-xxsmall padding-righ-xxsmall sm-padding-none text-small text-semibold text-uppercase text-color-heading'
    class-customer.country='segment margin-bottom-medium third sm-full padding-left-xsmall sm-padding-none text-small text-semibold text-uppercase text-color-heading'
    class-description='segment margin-bottom-xxsmall full text-small text-semibold text-uppercase text-color-heading'
    class-help='segment full text-small margin-bottom-medium padding-left-small'
    class-linebreak='segment full sm-hidden'
    
    widget-status='solid-form-hidden'
    value-status='Private'
    widget-projectset='solid-form-hidden-label'
    widget-customerset='solid-form-hidden-label'
    widget-description='solid-form-richtext-label'
    widget-captain='solid-form-dropdown-autocompletion-label'
    widget-help='solid-form-hidden-label'
    widget-linebreak='solid-form-hidden'
    widget-customer.address="solid-form-textarea-label"

    submit-button=''
    submit-widget="button"
    class-submit-button="submit-button segment sm-full 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-rocket children-icon-small children-icon-margin-right-xsmall"
    
    next=getRoute('projects', true)

    data-trans='label-status=project.edit.labelStatus;label-projectset=project.edit.labelProjectset;label-customerset=project.edit.labelCustomerset;label-customer.name=project.edit.labelCustomer;label-customer.address=project.edit.labelCustomerAddress;label-customer.postcode=project.edit.labelCustomerPostcode;label-customer.city=project.edit.labelCustomerCity;label-customer.country=project.edit.labelCustomerCountry;label-name=project.edit.labelName;label-description=project.edit.labelDescription;label-captain=project.edit.labelCaptain;label-help=project.edit.descriptionHelp;submit-button=project.edit.buttonSubmit'
  )&attributes({
    "fields": (componentSet.has('invoices') && getRoute('invoices')) ? "status, projectset, name, captain, description, help, linebreak, customerset, customer.name, customer.address, customer.postcode, customer.city, customer.country" : "status, name, captain, description, help, customer.name, linebreak",
    "class-captain": (componentSet.has('invoices') && getRoute('invoices')) ? 'segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal' : 'segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal',
    "class-name": (componentSet.has('invoices') && getRoute('invoices')) ? 'segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading' : 'segment margin-bottom-medium half sm-full sm-padding-none text-small text-semibold text-uppercase text-color-heading'
  })
 
  if componentSet.has('invoices') && getRoute('invoices')
    h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='project.edit.businessProviderTitle')

    .segment.table-wrapper.margin-top-medium
          .table
            div.table-header.bg-color-third.text-color-heading
              div.segment.table-cell.third(data-trans='project.edit.businessTableHeader1')
              div.segment.table-cell.third(data-trans='project.edit.businessTableHeader2')
              div.segment.table-cell.third

            solid-display(
              bind-resources 
              class='table-body'
              nested-field='businessprovider'
              fields='segment1(name), segment2(fee), remove'

              class-segment1='segment table-cell third text-center'
              class-segment2='segment table-cell third text-center'
              class-remove='segment table-cell third text-center'

              class-name='text-small text-semibold'
              class-fee='text-small text-semibold'

              multiple-businessprovider
              multiple-businessprovider-fields="name, fee"

              action-remove='remove'
              widget-remove='hubl-circle-edit-members-delete'
            )

            solid-form.form.table-body.edit-businessprovider(
              bind-resources 
              class='table-body'
              nested-field='businessprovider'
              fields='segment1(name), segment2(fee)'
              
              placeholder-name=""
              placeholder-fee=""

              class-segment1='segment table-cell third text-center'
              class-segment2='segment table-cell third text-center'

              class-name="segment full text-small"
              class-fee="segment full text-small"

              widget-name="solid-form-placeholder-text"
              widget-fee="solid-form-placeholder-text"

              submit-button=''
              submit-widget="button"
              class-submit-button="segment children text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered"

              data-trans='submit-button=project.edit.buttonAddBusinessProvider;placeholder-name=project.edit.businessTableHeader1;placeholder-fee=project.edit.businessTableHeader2'
            )


  h3.segment.full.padding-bottom-small.border-bottom.border-color-grey.text-color-heading.text-bold.text-letter-spacing-large(data-trans='project.edit.subTitle')

  solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
    solid-form.segment.block.margin-bottom-xlarge.sm-whitespace-normal.form(
      bind-resources 
      nested-field='members'
      fields='user'
      range-user=`${component.endpoints.users}`

      class-user='add-member'
      label-user=''
      widget-user='solid-form-dropdown-autocompletion'

      submit-button=''
      submit-widget="button"
      class-submit-button="add-member-button segment sm-full margin-top-xsmall text-xsmall children-link-button children-link-text-bold children-link-text-uppercase children-link-color-secondary bordered"
      data-trans='submit-button=project.edit.buttonAddMember'
    )

  .segment.table-wrapper
    .table
      div.table-header.bg-color-third.text-color-heading
        div.segment.table-cell.half(data-trans='project.edit.tableHeader2')
        div.segment.table-cell.half(data-trans='project.edit.tableHeader1')

      solid-display(
        class='table-body'
        bind-resources
        nested-field='members'
        fields='cell(segment1(user.account.picture), segment2(line1(user.name, is_admin), line2(atom, user.communities))), self'
        loader-id=`loader-${component.route}-edit`

        class-cell='segment table-cell half labelled-avatar two-lines text-left'
        class-self='segment table-cell half text-center'

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

        class-segment2='segment three-quarter margin-left-xsmall'
        class-line1='segment block'
        class-user.name='text-small text-semibold text-color-heading text-sub margin-right-medium'
        class-is_admin='segment tag color-primary'
        class-line2='segment block'
        class-atom='icon icon-large icon-third mdi-atom margin-right-xxsmall'
        class-user.communities='full'

        multiple-user.communities
        multiple-user.communities-fields="community.name"

        widget-user.account.picture='hubl-user-avatar'
        widget-is_admin='hubl-project-edit-admin'

        action-self='self'
        widget-self='hubl-project-edit-members-delete'
      )