<div class='control-group'>
  <label class="control-label" for="flair_url">{{i18n 'groups.flair_url'}}</label>

  {{text-field name="flair_url"
      class="input-xxlarge"
      value=model.flair_url
      placeholderKey="groups.flair_url_placeholder"}}
  <div class="control-instructions">
    {{i18n 'groups.flair_url_description'}}
  </div>
</div>

<div class='control-group'>
  <label class="control-label" for="flair_bg_color">{{i18n 'groups.flair_bg_color'}}</label>

  {{text-field name="flair_bg_color"
      class="group-flair-bg-color input-xxlarge"
      value=model.flair_bg_color
      placeholderKey="groups.flair_bg_color_placeholder"}}
</div>

{{#if flairPreviewIcon}}
  <div class='control-group'>
    <label class="control-label" for="flair_color">{{i18n 'groups.flair_color'}}</label>

    {{text-field name="flair_color"
        class="group-flair-color input-xxlarge"
        value=model.flair_color
        placeholderKey="groups.flair_color_placeholder"}}
  </div>
{{/if}}

<div class='control-group'>
  <label class='control-label'>{{flairPreviewLabel}}</label>

  <div class="avatar-flair-preview">
    <div class="avatar-wrapper">
      <img width="45" height="45" src="{{demoAvatarUrl}}" class="avatar actor">
    </div>

    {{#if flairPreviewImage}}
      <div class="avatar-flair demo {{flairPreviewClasses}}" style={{flairPreviewStyle}}></div>
    {{else}}
      <div class="avatar-flair demo {{flairPreviewClasses}}" style={{flairPreviewStyle}}>
        {{d-icon flairPreviewIconUrl}}
      </div>
    {{/if}}
  </div>
</div>
