<div {{bindAttr class="loading:invisible"}}>
  <ul class="nav nav-pills">
    <li {{bindAttr class="generalSelected:active"}}>
      <a href="#" {{action selectGeneral}}>{{i18n category.general}}</a>
    </li>
    {{#unless isUncategorized}}
      <li {{bindAttr class="securitySelected:active"}}>
        <a href="#" {{action selectSecurity}}>{{i18n category.security}}</a>
      </li>
      <li {{bindAttr class="settingsSelected:active"}}>
        <a href="#" {{action selectSettings}}>{{i18n category.settings}}</a>
      </li>
    {{/unless}}
  </ul>

  <div class="modal-body">
    <div {{bindAttr class=":modal-tab :general-tab generalSelected::invisible"}}>
      <form>
        <section class='field'>
          <label>{{i18n category.name}}</label>
          {{textField value=name placeholderKey="category.name_placeholder" maxlength="50"}}
        </section>

        {{#unless isUncategorized}}
          <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}}>{{i18n category.change_in_category_topic}}</button>
            {{/if}}
          </section>
        {{/unless}}

        <section class='field'>
          <label>{{i18n category.badge_colors}}</label>
          <div class="category-color-editor">
            <span class='badge-category' {{bindAttr style="colorStyle"}}>{{categoryName}}</span>

            <div class='input-prepend input-append' style="margin-top: 10px;">
              <span class='color-title'>{{i18n category.background_color}}:</span>
              <span class='add-on'>#</span>{{textField value=color placeholderKey="category.color_placeholder" maxlength="6"}}
              {{colorPicker 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>{{textField value=text_color placeholderKey="category.color_placeholder" maxlength="6"}}
              {{colorPicker colors=foregroundColors value=text_color}}
            </div>
          </div>
        </section>
      </form>
    </div>
    {{#unless isUncategorized}}
      <div {{bindAttr class=":modal-tab :options-tab securitySelected::invisible"}}>
        <section class='field'>
          <ul class='permission-list'>
            {{#each permissions}}
              <li>
                <span class="name"><span class="badge-group">{{group_name}}</span></span>
                {{{i18n "category.can"}}}
                <span class="permission">{{permission.description}}</span>
                {{#if controller.editingPermissions}}
                  <a {{action removePermission this}}><i class="icon icon-remove-sign"></i></a>
                {{/if}}
              </li>
            {{/each}}
          </ul>
          {{#if controller.editingPermissions}}
            {{view Ember.Select contentBinding="availableGroups" valueBinding="selectedGroup"}}
            {{view Ember.Select class="permission-selector" optionValuePath="content.id" optionLabelPath="content.description" contentBinding="availablePermissions" valueBinding="selectedPermission"}}
            <button {{action addPermission selectedGroup selectedPermission}} class="btn btn-small">{{i18n category.add_permission}}</button>
          {{else}}
            <button {{action editPermissions}} class="btn btn-small">{{i18n category.edit_permissions}}</button>
          {{/if}}
        </section>
      </div>
      <div {{bindAttr class=":modal-tab :options-tab settingsSelected::invisible"}}>
        <section class='field'>
          {{autoCloseForm autoCloseDays=auto_close_days labelKey="category.auto_close_label"}}
        </section>

        <section class='field'>
          <label>{{i18n category.hotness}}</label>
          {{view Discourse.HotnessView hotnessBinding="hotness"}}
        </section>
      </div>
    {{/unless}}
  </div>
  <div class="modal-footer">
    <button class='btn btn-primary' {{bindAttr disabled="disabled"}} {{action saveCategory}}>{{buttonTitle}}</button>
    {{#if deleteVisible}}
      <button class='btn btn-danger pull-right' {{bindAttr disabled="deleteDisabled"}} {{action deleteCategory}}><i class="icon icon-trash"></i>{{deleteButtonTitle}}</button>
    {{/if}}
  </div>
</div>
