</div>

<div class="control-group">
      <label class="control-label">
        {{i18n "chat.incoming_webhooks.username"}}
      </label>
      <Input
        @type="text"
        @value={{this.selectedWebhook.username}}
        placeholder={{i18n "chat.incoming_webhooks.system"}}
      />
      <div class="control-instructions">
        {{i18n "chat.incoming_webhooks.username_instructions"}}
      </div>
    </div>

<div class="control-group">
      <label class="control-label">
        {{i18n "chat.incoming_webhooks.post_to"}}
      </label>
      <ChatChannelChooser
        @content={{this.model.chat_channels}}
        @value={{this.selectedWebhook.chat_channel.id}}
        @onChange={{action "changeChatChannel"}}
      />
    </div>

<div class="control-group">
      <label class="control-label">
        {{#if this.selectedWebhook.emoji}}
          {{i18n "chat.incoming_webhooks.current_emoji"}}

<span class="incoming-chat-webhooks-current-emoji">
            {{replace-emoji this.selectedWebhook.emoji}}
          </span>
        {{else}}
          {{i18n "chat.incoming_webhooks.no_emoji"}}
        {{/if}}
      </label>

{{#unless this.emojiPickerIsActive}}
        <DButton
          @label="chat.incoming_webhooks.select_emoji"
          @action={{fn (mut this.emojiPickerIsActive) true}}
          class="btn-primary"
        />
        <DButton
          @label="chat.incoming_webhooks.reset_emoji"
          @action={{fn (mut this.selectedWebhook.emoji) null}}
          @disabled={{not this.selectedWebhook.emoji}}
        />
      {{/unless}}

<div class="control-instructions">
        {{i18n "chat.incoming_webhooks.emoji_instructions"}}
      </div>
    </div>

<div class="control-group">
      <label class="control-label">{{i18n "chat.incoming_webhooks.url"}}</label>
      <label>{{this.selectedWebhook.url}}</label>
      <div class="control-instructions">
        {{i18n "chat.incoming_webhooks.url_instructions"}}
      </div>
    </div>

<DButton
      @label="chat.incoming_webhooks.save"
      @title="chat.incoming_webhooks.save"
      @action={{this.saveEdit}}
      @disabled={{this.saveEditDisabled}}
      class="btn-primary"
    />
  </form>
{{else}}
  {{!  Index view   }}
  <h3>{{i18n "chat.incoming_webhooks.title"}}</h3>

{{#if this.creatingNew}}
    <div class="new-incoming-webhook-container">
      <Input
        @type="text"
        @value={{this.newWebhookName}}
        placeholder={{i18n "chat.incoming_webhooks.name_placeholder"}}
      />
      <ChatChannelChooser
        @content={{this.model.chat_channels}}
        @value={{this.newWebhookChannelId}}
        @onChange={{fn (mut this.newWebhookChannelId)}}
      />
      <DButton
        @label="chat.create"
        @title="chat.create"
        @disabled={{not this.nameAndChannelValid}}
        @action={{this.createNewWebhook}}
        class="btn-primary create-new-incoming-webhook-btn"
      />
      <DButton
        @label="chat.cancel"
        @title="chat.cancel"
        @action={{this.resetNewWebhook}}
      />
    </div>
  {{else}}
    <DButton
      @label="chat.incoming_webhooks.new"
      @title="chat.incoming_webhooks.new"
      @action={{fn (mut this.creatingNew) true}}
      class="btn-primary"
    />
  {{/if}}

<p>{{html-safe (i18n "chat.incoming_webhooks.instructions")}}</p>

<div class="incoming-chat-webhooks">
    {{#if this.model.incoming_chat_webhooks}}
      {{#each this.sortedWebhooks as |webhook|}}
        <div class="incoming-chat-webhooks--row">
          <div class="incoming-chat-webhooks--row--details">
            <div class="incoming-chat-webhooks--row--details--name">
              {{webhook.name}}
            </div>

<div>
              {{#if webhook.emoji}}
                {{replace-emoji webhook.emoji}}
              {{/if}}

{{#if webhook.username}}
                {{webhook.username}}
              {{else}}
                {{i18n "chat.incoming_webhooks.system"}}
              {{/if}}
            </div>

<div><ChannelTitle @channel={{webhook.chat_channel}} /></div>
            <div>{{webhook.description}}</div>
          </div>

<div class="incoming-chat-webhooks--row--controls">
            <div>
              <DButton
                @icon="pencil-alt"
                @label="chat.incoming_webhooks.edit"
                @action={{fn (mut this.selectedWebhookId) webhook.id}}
              />
              <DButton
                @icon="trash-alt"
                @title="chat.incoming_webhooks.delete"
                @action={{fn this.destroyWebhook webhook}}
                class="btn-danger"
              />
            </div>
          </div>
        </div>
      {{/each}}
    {{else}}
      {{i18n "chat.incoming_webhooks.none"}}
    {{/if}}
  </div>
{{/if}}