<form>
  <section class='field'>
    <label>{{i18n category.name}}</label>
    {{text-field value=name placeholderKey="category.name_placeholder" maxlength="50"}}
  </section>

  {{#if canSelectParentCategory}}
    <section class='field'>
      {{#if subCategories}}
        <label>{{i18n categories.subcategories}}</label>
        {{#each subCategories}}
          {{category-badge this}}
        {{/each}}
      {{else}}
        <label>{{i18n category.parent}}</label>
        {{category-chooser valueAttribute="id" value=parent_category_id categories=parentCategories rootNone=true}}
      {{/if}}
    </section>
  {{/if}}

  {{#if showDescription}}
    <section class='field'>
      <label>{{i18n category.description}}</label>

      {{#if description}}
        {{description}}
      {{else}}
        {{i18n category.no_description}}
      {{/if}}
      {{#if topic_url}}
        <br/>
        <button class="btn btn-small" {{action "showCategoryTopic"}}><i class="fa fa-pencil"></i>{{i18n category.change_in_category_topic}}</button>
      {{/if}}
    </section>
  {{/if}}

  <section class='field'>
    <label>{{i18n category.badge_colors}}</label>
    <div class="category-color-editor">
      {{{categoryBadgePreview}}}

      <div class='input-prepend input-append' style="margin-top: 10px;">
        <span class='color-title'>{{i18n category.background_color}}:</span>
        <span class='add-on'>#</span>{{text-field value=color placeholderKey="category.color_placeholder" maxlength="6"}}
        {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=color}}
      </div>

      <div class='input-prepend input-append'>
        <span class='color-title'>{{i18n category.foreground_color}}:</span>
        <span class='add-on'>#</span>{{text-field value=text_color placeholderKey="category.color_placeholder" maxlength="6"}}
        {{color-picker colors=foregroundColors value=text_color}}
      </div>
    </div>
  </section>
</form>
