{{#accordion-list-item
  title=(t 'formGlobalRoles.title')
  detail=(t 'formGlobalRoles.description' appName=settings.appName)
  expandOnInit=true
  showExpand=false
}}

  <div class="radio">
    <label>
      {{radio-button selection=mode value="user"}} {{t 'formGlobalRoles.mode.user.label'}}
      <p class="help-block">{{t 'formGlobalRoles.mode.user.detail'}}</p>
    </label>
  </div>
  <div class="radio">
    <label>
      {{radio-button selection=mode value="admin"}} {{t 'formGlobalRoles.mode.admin.label'}}
      <p class="help-block">{{t 'formGlobalRoles.mode.admin.detail'}}</p>
    </label>
  </div>
  <div class="radio">
    <label>
      {{radio-button selection=mode value="custom"}} {{t 'formGlobalRoles.mode.custom.label'}}
      <p class="help-block">{{t 'formGlobalRoles.mode.custom.detail'}}</p>
    </label>
  </div>

  {{#if (eq mode 'custom')}}
    <div class="pl-20">
      {{#each custom as |row|}}
        <div class="input-group mb-10 border" onclick={{action "toggle"}}>
          <label class="input-group-addon bg-default p-10 vertical-middle">
            {{input type="checkbox" checked=row.active}}
          </label>
          <div class="form-control p-10 vertical-middle">
            {{row.role.displayName}}
            {{#if row.role.detail}}
              <p class="help-block">{{row.role.detail}}</p>
            {{/if}}
          </div>
        </div>
      {{/each}}
      <div class="input-group mb-10 border">
        <label class="input-group-addon bg-default p-10 vertical-middle">
          {{input type="checkbox" checked=true disabled=true}}
        </label>
        <div class="form-control p-10 vertical-middle">
          {{t 'formGlobalRoles.role.base.label'}}
        </div>
      </div>
    </div>
  {{/if}}

{{/accordion-list-item}}
