<h2 class="mt-30">
  {{t "loggingPage.kafka.header"}}
</h2>
<hr/>

<div class="box mb-10">
  <div>
    <span class="pr-10">
      {{t "loggingPage.kafka.endpointType"}}:
    </span>
    {{#unless isWindows}}
      <label class="mr-10">
        {{radio-button
          selection=brokerType
          value="zookeeper"
        }}
        {{t "loggingPage.kafka.zookeeper"}}
      </label>
    {{/unless}}
    <label class="mr-10">
      {{radio-button
        selection=brokerType
        value="broker"
      }}
      {{t "loggingPage.kafka.broker"}}
    </label>
    <p class="text-info text-small">
      {{#if isWindows}}
        {{t "windowsCluster.logging.kafka.brokerTypeHelpText"}}
      {{else}}
        {{t "loggingPage.kafka.brokerTypeHelpText"}}
      {{/if}}
    </p>
  </div>
  <hr/>
  <section class="mb-30">
  {{#if (eq brokerType "zookeeper")}}
    <div>
      <label class="acc-label" for="">
        {{t "loggingPage.endpoint"}}
        {{field-required}}
      </label>
      {{input
        type="text"
        value=config.zookeeperEndpoint
        classNames="form-control"
        placeholder=(t "loggingPage.kafka.endpoint.zookeeper.placeholder")
        id="kafka-endpoint"
      }}
    </div>
    <p class="text-info text-small mb-0">
      {{t "loggingPage.kafka.zookeeperHelpText"}}
    </p>
  {{else}}
    {{#each brokerEndpoints as |item idx|}}
      <div class="row">
        <div class="col span-11">
          <label class="acc-label" for="">
            {{t "loggingPage.endpoint"}}
            {{#if (eq idx 0)}}
              {{field-required}}
            {{/if}}
          </label>
          {{input
            type="text"
            value=item.endpoint
            classNames="form-control"
            placeholder=(t "loggingPage.kafka.endpoint.broker.placeholder")
          }}
        </div>
        <div class="col span-1" style="padding-top: 29px">
          <button class="btn bg-primary icon-btn {{if canRemove "" "disabled"}}" {{action "remove" item}}>
            <span class="darken">
              <i class="icon icon-minus"></i>
            </span>
          </button>
        </div>
      </div>
    {{/each}}
    <p class="text-info text-small mb-0">
      {{t "loggingPage.kafka.brokerHelpText"}}
    </p>
    <div class="mt-20">
      <button class="btn bg-link icon-btn p-0" {{action "add"}}>
        <span class="darken">
          <i class="icon icon-plus text-small"/>
        </span>
        <span>
          {{t "loggingPage.kafka.addEndpoint"}}
        </span>
      </button>
    </div>
  {{/if}}
  </section>
  <hr/>
  <div class="row">
    <div class="col span-6 mt-0 pt-0">
      <label class="acc-label" for="">
        {{t "loggingPage.kafka.topic.label"}}
        {{field-required}}
      </label>
      {{input
        type="text"
        value=config.topic
        classNames="form-control"
        placeholder=(t "loggingPage.kafka.topicPlaceholder")
      }}
      <p class="text-info text-small">
        {{t "loggingPage.kafka.topicHelpText"}}
      </p>
    </div>
  </div>
</div>

{{#if (eq brokerType "broker")}}
  {{logging/form-log-ssl
    config=config
    targetType=targetType
  }}

  {{logging/form-log-sasl
    config=config
  }}
{{/if}}

{{logging/form-log-format
  logPreview=logPreview
  model=model
}}
{{!--
  {{#advanced-section advanced=showAdvanced}}
  {{logging/form-log-docker model=model parentModel=parentModel}}
  {{/advanced-section}} --}}
