<LinkTo @route="adminWebHooks" class="go-back">
  {{d-icon "arrow-left"}}
  {{i18n "admin.web_hooks.go_back"}}
</LinkTo>

<div class="web-hook-container">
  <p>{{i18n "admin.web_hooks.detailed_instruction"}}</p>

  <form class="web-hook form-horizontal">
    <div class="control-group">
      <label for="payload-url">{{i18n "admin.web_hooks.payload_url"}}</label>
      <TextField
        @name="payload-url"
        @value={{this.model.payload_url}}
        @placeholderKey="admin.web_hooks.payload_url_placeholder"
      />
      <InputTip @validation={{this.urlValidation}} />
    </div>

    <div class="control-group">
      <label for="content-type">{{i18n "admin.web_hooks.content_type"}}</label>
      <ComboBox
        @content={{this.contentTypes}}
        @name="content-type"
        @value={{this.model.content_type}}
        @onChange={{fn (mut this.model.content_type)}}
      />
    </div>

    <div class="control-group">
      <label for="secret">{{i18n "admin.web_hooks.secret"}}</label>
      <TextField
        @name="secret"
        @value={{this.model.secret}}
        @placeholderKey="admin.web_hooks.secret_placeholder"
      />
      <InputTip @validation={{this.secretValidation}} />
    </div>

    <div class="control-group">
      <label>{{i18n "admin.web_hooks.event_chooser"}}</label>

      <label class="subscription-choice">
        <RadioButton
          @name="subscription-choice"
          @onChange={{fn (mut this.model.wildcard_web_hook) false}}
          @value={{false}}
          @selection={{this.model.wildcard_web_hook}}
        />
        {{i18n "admin.web_hooks.individual_event"}}
        <InputTip @validation={{this.eventTypeValidation}} />
      </label>

      {{#unless this.model.wildcard_web_hook}}
        <div class="event-selector">
          {{#each-in this.groupedEventTypes as |group eventTypes|}}
            <div class="event-group">
              {{i18n (concat "admin.web_hooks." group "_event.group_name")}}
              {{#each eventTypes as |type|}}
                <WebhookEventChooser
                  @type={{type}}
                  @group={{group}}
                  @eventTypes={{this.model.web_hook_event_types}}
                />
              {{/each}}
            </div>
          {{/each-in}}
        </div>
      {{/unless}}

      <label class="subscription-choice">
        <RadioButton
          @name="subscription-choice"
          @onChange={{fn (mut this.model.wildcard_web_hook) true}}
          @value={{true}}
          @selection={{this.model.wildcard_web_hook}}
        />
        {{i18n "admin.web_hooks.wildcard_event"}}
      </label>
    </div>

    <div class="filters control-group">
      <div class="filter">
        <label>{{d-icon "circle" class="tracking"}}{{i18n
            "admin.web_hooks.categories_filter"
          }}</label>
        <CategorySelector
          @categories={{this.model.categories}}
          @onChange={{fn (mut this.model.categories)}}
        />
        <div class="instructions">{{i18n
            "admin.web_hooks.categories_filter_instructions"
          }}</div>
      </div>

      {{#if this.showTagsFilter}}
        <div class="filter">
          <label>{{d-icon "circle" class="tracking"}}{{i18n
              "admin.web_hooks.tags_filter"
            }}</label>
          <TagChooser
            @tags={{this.model.tag_names}}
            @everyTag={{true}}
            @excludeSynonyms={{true}}
          />
          <div class="instructions">{{i18n
              "admin.web_hooks.tags_filter_instructions"
            }}</div>
        </div>
      {{/if}}

      <div class="filter">
        <label>{{d-icon "circle" class="tracking"}}{{i18n
            "admin.web_hooks.groups_filter"
          }}</label>
        <GroupSelector
          @groupNames={{this.model.groupsFilterInName}}
          @groupFinder={{this.model.groupFinder}}
        />
        <div class="instructions">{{i18n
            "admin.web_hooks.groups_filter_instructions"
          }}</div>
      </div>
    </div>

    <span>
      <PluginOutlet
        @name="web-hook-fields"
        @connectorTagName="div"
        @outletArgs={{hash model=this.model}}
      />
    </span>

    <label>
      <Input
        @type="checkbox"
        name="verify_certificate"
        @checked={{this.model.verify_certificate}}
      />
      {{i18n "admin.web_hooks.verify_certificate"}}
    </label>

    <div>
      <label class="checkbox-label">
        <Input @type="checkbox" name="active" @checked={{this.model.active}} />
        {{i18n "admin.web_hooks.active"}}
      </label>

      {{#if this.model.active}}
        <div class="instructions">{{i18n "admin.web_hooks.active_notice"}}</div>
      {{/if}}
    </div>
  </form>

  <div class="controls">
    <DButton
      @translatedLabel={{this.saveButtonText}}
      @action={{this.save}}
      @disabled={{this.saveButtonDisabled}}
      class="btn-primary admin-webhooks__save-button"
    />

    {{#if this.model.isNew}}
      <LinkTo @route="adminWebHooks" class="btn btn-default">
        {{i18n "cancel"}}
      </LinkTo>
    {{else}}
      <LinkTo
        @route="adminWebHooks.show"
        @model={{this.model}}
        class="btn btn-default"
      >
        {{i18n "cancel"}}
      </LinkTo>
    {{/if}}

    <span class="saving">{{this.savingStatus}}</span>
  </div>
</div>