<label
  for={{dasherize (or @title @value)}}
  class="radio-card {{if (eq @value @groupValue) 'is-selected'}} {{if @disabled 'is-disabled'}}"
  ...attributes
>
  <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
    <T.Trigger tabindex="-1" class="radio-card-container">
      {{#if (has-block)}}
        {{yield}}
      {{else}}
        <div class="radio-card-row">
          <div>
            <Icon @name={{@icon}} @size="24" class={{or @iconClass "has-text-grey-light"}} />
          </div>
          <div class="has-left-margin-s">
            <h5 class="radio-card-message-title">
              {{@title}}
            </h5>
            <p class="radio-card-message-body">
              {{@description}}
            </p>
          </div>
        </div>
      {{/if}}
      <div class="radio-card-radio-row">
        <RadioButton
          id={{dasherize (or @title @value)}}
          name="config-mode"
          class="radio"
          @disabled={{@disabled}}
          @value={{@value}}
          @groupValue={{@groupValue}}
          @onChange={{@onChange}}
        />
        <span class="dot"></span>
      </div>
    </T.Trigger>
    {{#if (and @disabled @disabledTooltipMessage)}}
      <T.Content @defaultClass="tool-tip smaller-font">
        <div class="box">
          {{@disabledTooltipMessage}}
        </div>
      </T.Content>
    {{/if}}
  </ToolTip>
</label>