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
  div.segment.full.sm-three-quarter
    h2.margin-none.text-color-heading.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='circle.create.title')
  div.segment.half.sm-hidden.text-right
    solid-link(class="backlink", next=`admin-${getRoute('circles', true)}` data-trans='circle.create.backlink')
  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.loader.loader-top(id=`loader-admin-${getComponent('circles').uniq}`)
    div
    div
    div
    div

  solid-form.form(
    data-src=`${getComponent('circles').endpoints.post}`

    fields='status, community.community, name, subtitle, description, help'
    required-status
    required-community.community
    required-name
    required-subtitle
    loader-id=`loader-admin-${getComponent('circles').uniq}`

    class-status='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-community.community='segment margin-bottom-medium half sm-full padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading whitespace-normal'
    class-name='segment margin-bottom-medium half sm-full padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading'
    class-subtitle='segment margin-bottom-medium half sm-full padding-left-small 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'

    label-status=''
    label-community.community=''
    label-name=''
    label-subtitle=''
    label-description=''
    label-help=''

    range-community.community='store://user.communities'
    option-label-community.community="community.name"
    option-value-community.community="community"

    widget-status='solid-form-dropdown-autocompletion-label'
    enum-status=""
    widget-community.community='solid-form-dropdown-autocompletion-label'
    widget-linebreak='solid-form-hidden'

    widget-description='solid-form-richtext-label'
    widget-help='solid-form-hidden-label'

    next=getRoute('circles', true)

    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"

    data-trans='enum-status=orbitStatus;label-status=circle.create.labelStatus;label-community.community=circle.create.labelCommunity;label-name=circle.create.labelName;label-description=circle.create.labelDescription;submit-button=circle.create.buttonSubmit;label-subtitle=circle.create.labelSubtitle;label-help=circle.create.descriptionHelp'
  )