<section class="header clearfix">
  <h1 class="pull-left">
    {{t "clusterIstioPage.header"}}
  </h1>
</section>

{{#if canEnable}}
  {{#if (and enabled ready)}}
    {{banner-message
      color="bg-info"
      message=(t "clusterIstioPage.enabled")
    }}
  {{else if enabled}}
    {{banner-message
      color="bg-warning"
      message=(t "clusterIstioPage.notReady")
    }}
  {{else}}
    {{banner-message
      color="bg-warning"
      message=(t "clusterIstioPage.disabled")
    }}
  {{/if}}

  {{#if (and enabled ready)}}
    <div class="row">
      {{istio-component-status
        label="clusterIstioPage.links.kiali.label"
        url=kialiUrl
        logo="kiali"
      }}
      {{istio-component-status
        label="clusterIstioPage.links.jaeger.label"
        url=jaegerUrl
        logo="jaeger"
      }}
      {{istio-component-status
        label="clusterIstioPage.links.grafana.label"
        url=grafana.istioUrl
        logo="grafana"
      }}
      {{istio-component-status
        label="clusterIstioPage.links.prometheus.label"
        url=prometheusUrl
        logo="prometheus-icon"
      }}
    </div>
  {{/if}}

  <div class="row mt-10 mb-10 center">
    <div class="col span-6">
      <label class="acc-label">
        {{t "clusterIstioPage.version"}}
        {{#if (and enabled latestVersion templateVersion (not-eq latestVersion templateVersion))}}
          <span class="bg-warning pt-0 pb-0 pl-5 pr-5">
            {{t "monitoringPage.upgradeAvailable" version=latestVersion}}
          </span>
        {{/if}}
      </label>
      <div>
        {{new-select
          classNames="form-control"
          content=istioVersions
          value=templateVersion
        }}
      </div>
    </div>
    <div class="col span-7">
      <label class="acc-label">
        &nbsp;
      </label>
      {{#unless enableClusterMonitoring}}
        <div>
          {{input
            type="checkbox"
            checked=enableMonitoring
            id="input-enable-monitoring"
            disabled=true
          }}
          {{t "clusterIstioPage.enableMonitoring.label"}}
          {{#tooltip-element
            type="tooltip-basic"
            model=(t "clusterIstioPage.goToMonitoring" clusterId=cluster.id htmlSafe=true)
            tooltipTemplate="tooltip-static"
            aria-describedby="tooltip-base"
            baseClass="text-left"
          }}
          <span>
            <i class="icon icon-help icon-blue"/>
          </span>
          {{/tooltip-element}}
        </div>
      {{/unless}}
    </div>
  </div>

{{#accordion-list as | al expandFn |}}
  {{#accordion-list-item
     title=(t "clusterIstioPage.members.title")
     detail=(t "clusterIstioPage.members.detail")
     expandAll=al.expandAll
     expand=(action expandFn)
     expandOnInit=true
  }}
    <div class="radio">
      <label>
        {{radio-button
          selection=allowSystemGroup
          value=true
        }}
        {{t "clusterIstioPage.allowSystemGroup.true" htmlSafe=true}}
      </label>
    </div>
    <div class="radio">
      <label>
        {{radio-button
          selection=allowSystemGroup
          value=false
        }}
        {{t "clusterIstioPage.allowSystemGroup.false" htmlSafe=true}}
      </label>
      {{#unless allowSystemGroup}}
        {{form-members-catalog-access
          readOnly=false
          members=members
          addAuthorizedPrincipal=(action "addAuthorizedPrincipal")
          removeMember=(action "removeMember")
        }}
      {{/unless}}
    </div>
  {{/accordion-list-item}}
  {{#accordion-list-item
    title="Pilot"
    detail=(t "clusterIstioPage.workload.detail" workload="Pilot")
    expandAll=al.expandAll
    expand=(action expandFn)
    expandOnInit=false
  }}
    {{form-reservation
      component="Pilot"
      requestCpu=config.pilotRequestCpu
      requestMemory=config.pilotRequestMemory
      limitCpu=config.pilotLimitCpu
      limitMemory=config.pilotLimitMemory
    }}

    <div class="row">
      <div class="col span-6">
        <label class="acc-label" for="input-trace-sampling">
          {{t "clusterIstioPage.config.traceSampling.label"}}
          {{field-required}}
        </label>
        <div class="input-group">
          {{input-float
            min="0"
            max="100"
            id="input-trace-sampling"
            value=config.traceSampling
            classNames="form-control"
            placeholder=(t "clusterIstioPage.config.traceSampling.placeholder")
            precision=2
          }}
          <div class="input-group-addon bg-default">
            {{t "units.percent"}}
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col span-12">
        <label class="acc-label">
          {{t "clusterIstioPage.nodeSelector.helpText" component="Pilot"}}
        </label>
        {{form-key-value
          changedArray=(action (mut pilotNodeSelectors))
          initialMap=pilotNodeSelector
          allowEmptyValue=true
          addActionLabel="clusterIstioPage.nodeSelector.addSelectorLabel"
        }}
      </div>
    </div>
    <div class="row">
      <div class="col span-12">
        {{scheduling-toleration
          editing=true
          tolerate=pilotTolerations
          title=(t "formScheduling.toleration.workloadTitle" workload="Pilot")
        }}
      </div>
    </div>
  {{/accordion-list-item}}

  {{#accordion-list-item
    title="Mixer"
    detail=(t "clusterIstioPage.workload.detail" workload="Mixer")
    expandAll=al.expandAll
    expand=(action expandFn)
    expandOnInit=false
  }}
    {{form-reservation
      component="MixerTelemetry"
      requestCpu=config.mixerTelemetryRequestCpu
      requestMemory=config.mixerTelemetryRequestMemory
      limitCpu=config.mixerTelemetryLimitCpu
      limitMemory=config.mixerTelemetryLimitMemory
    }}

    <div class="row">
      <div class="col span-6">
        <label class="acc-label" for="input-mixer-policy-enabled">
          {{t "clusterIstioPage.config.mixerPolicyEnabled.label"}}
        </label>
        {{schema/input-boolean
          id="input-mixer-policy-enabled"
          value=config.mixerPolicyEnabled
          classNames="form-control"
        }}
      </div>
    </div>

    {{#if config.mixerPolicyEnabled}}
      {{form-reservation
        component="MixerPolicy"
        requestCpu=config.mixerPolicyRequestCpu
        requestMemory=config.mixerPolicyRequestMemory
        limitCpu=config.mixerPolicyLimitCpu
        limitMemory=config.mixerPolicyLimitMemory
      }}
    {{/if}}

    <div class="row">
      <div class="col span-12">
        <label class="acc-label">
          {{t "clusterIstioPage.nodeSelector.helpText" component="Mixer"}}
        </label>
        {{form-key-value
          changedArray=(action (mut mixerNodeSelectors))
          initialMap=mixerNodeSelector
          allowEmptyValue=true
          addActionLabel="clusterIstioPage.nodeSelector.addSelectorLabel"
        }}
      </div>
    </div>
    <div class="row">
      <div class="col span-12">
        {{scheduling-toleration
          editing=true
          tolerate=mixerTolerations
          title=(t "formScheduling.toleration.workloadTitle" workload="Mixer")
        }}
      </div>
    </div>
  {{/accordion-list-item}}

  {{#accordion-list-item
    title="Tracing"
    detail=(t "clusterIstioPage.workload.detail" workload="Tracing")
    expandAll=al.expandAll
    expand=(action expandFn)
    expandOnInit=false
  }}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "clusterIstioPage.config.tracingEnabled.label"}}
        </label>
        {{schema/input-boolean
          value=config.tracingEnabled
          classNames="form-control"
        }}
      </div>
    </div>

    {{#if config.tracingEnabled}}
      {{form-reservation
        component="Tracing"
        requestCpu=config.tracingRequestCpu
        requestMemory=config.tracingRequestMemory
        limitCpu=config.tracingLimitCpu
        limitMemory=config.tracingLimitMemory
      }}
      <div class="row">
        <div class="col span-12">
          <label class="acc-label">
            {{t "clusterIstioPage.nodeSelector.helpText" component="Tracing"}}
          </label>
          {{form-key-value
            changedArray=(action (mut tracingNodeSelectors))
            initialMap=tracingNodeSelector
            allowEmptyValue=true
            addActionLabel="clusterIstioPage.nodeSelector.addSelectorLabel"
          }}
        </div>
      </div>
    {{/if}}
  {{/accordion-list-item}}

  {{#accordion-list-item
    title="Ingress Gateway"
    detail=(t "clusterIstioPage.workload.detail" workload="Ingress Gateway")
    expandAll=al.expandAll
    expand=(action expandFn)
    expandOnInit=false
  }}
    <div class="row">
      <div class="col span-6">
        <label class="acc-label">
          {{t "clusterIstioPage.config.gatewayEnabled.label"}}
        </label>
        {{schema/input-boolean
          value=config.gatewayEnabled
          classNames="form-control"
        }}
      </div>
      {{#if config.gatewayEnabled}}
        <div class="col span-6">
          <label class="acc-label" for="input-gateway-type-select">
            {{t "clusterIstioPage.config.gatewayType.label"}}
          </label>
          {{new-select
            id="input-gateway-type-select"
            class="form-control"
            content=gatewayTypeContent
            value=config.gatewayType
          }}
        </div>
      {{/if}}
    </div>

    {{#if config.gatewayEnabled}}
      {{#if (eq config.gatewayType "NodePort")}}
        <div class="row">
          <div class="col span-6">
            <label class="acc-label" for="input-http2-port">
              {{t "clusterIstioPage.config.http2Port.label"}}
              {{field-required}}
            </label>
            {{input-integer
              min="30000"
              max="32767"
              step="1"
              id="input-http2-port"
              value=config.http2Port
              classNames="form-control"
            }}
          </div>
          <div class="col span-6">
            <label class="acc-label" for="input-https-port">
              {{t "clusterIstioPage.config.httpsPort.label"}}
              {{field-required}}
            </label>
            {{input-integer
              min="30000"
              max="32767"
              step="1"
              id="input-https-port"
              value=config.httpsPort
              classNames="form-control"
            }}
          </div>
        </div>
      {{else if (eq config.gatewayType "LoadBalancer")}}
        <div class="row">
          <div class="col span-6">
            <label class="acc-label" for="input-load-balancer-ip">
              {{t "clusterIstioPage.config.loadBalancerIP.label"}}
            </label>
            {{schema/input-string
              value=config.loadBalancerIP
              id="input-load-balancer-ip"
              placeholder=(t "clusterIstioPage.config.loadBalancerIP.placeholder")
            }}
          </div>
          <div class="col span-6">
            {{form-value-array
              initialValues=loadBalancerSourceRanges
              addActionLabel="editDns.loadBalancerSourceRanges.addActionLabel"
              valueLabel="editDns.loadBalancerSourceRanges.value"
              valuePlaceholder="editDns.loadBalancerSourceRanges.placeholder"
              changed=(action (mut loadBalancerSourceRanges))
              addButtonClass="btn bg-link icon-btn"
            }}
          </div>
        </div>
      {{/if}}

      {{form-reservation
        component="IngressGateway"
        requestCpu=config.gatewayRequestCpu
        requestMemory=config.gatewayRequestMemory
        limitCpu=config.gatewayLimitCpu
        limitMemory=config.gatewayLimitMemory
      }}

      <div class="row">
        <div class="col span-12">
          <label class="acc-label">
            {{t "clusterIstioPage.nodeSelector.helpText" component="Gateway"}}
          </label>
          {{form-key-value
            changedArray=(action (mut gatewayNodeSelectors))
            initialMap=gatewayNodeSelector
            allowEmptyValue=true
            addActionLabel="clusterIstioPage.nodeSelector.addSelectorLabel"
          }}
        </div>
      </div>
      <div class="row">
        <div class="col span-12">
          {{scheduling-toleration
            editing=true
            tolerate=gatewayTolerations
            title=(t "formScheduling.toleration.workloadTitle" workload=(parse-camelcase "IngressGateway"))
          }}
        </div>
      </div>
    {{/if}}
    {{/accordion-list-item}}

    {{#accordion-list-item
      title=(t "clusterIstioPage.customAnswers.title")
      detail=(t "clusterIstioPage.customAnswers.detail")
      expandAll=al.expandAll
      expand=(action expandFn)
      expandOnInit=false
    }}
      {{form-key-value
        initialMap=customAnswers
        changed=(action (mut customAnswers))
        allowEmptyValue=true
        addInitialEmptyRow=true
        editing=true
        header=(t "newCatalog.answers.label")
        addActionLabel="newCatalog.answers.addAction"
        keyLabel="newContainer.environment.keyLabel"
        keyPlaceholder="newContainer.environment.keyPlaceholder"
        valueLabel="newContainer.environment.valueLabel"
        valuePlaceholder="newContainer.environment.valuePlaceholder"
      }}
    {{/accordion-list-item}}
  {{/accordion-list}}
{{#if (or pilotWarning mixerTelemetryWarning tracingWarning gatewayWarning (and mixerPolicyWarning config.mixerPolicyEnabled) mixerWarning istioWarning)}}
  {{#banner-message color="bg-warning"}}
    {{#if istioWarning}}
      <p>{{istioWarning}}</p>
    {{else}}
      <p>{{pilotWarning}}</p>
      <p>{{mixerWarning}}</p>
      <p>{{mixerTelemetryWarning}}</p>
      {{#if config.tracingEnabled}}
        <p>{{tracingWarning}}</p>
      {{/if}}
      {{#if config.gatewayEnabled}}
        <p>{{gatewayWarning}}</p>
      {{/if}}
      {{#if config.mixerPolicyEnabled}}
        <p>{{mixerPolicyWarning}}</p>
      {{/if}}
    {{/if}}
  {{/banner-message}}
{{/if}}

  {{top-errors errors=errors}}

  {{#save-cancel
    saveDisabled=saveDisabled
    editing=enabled
    createLabel="clusterIstioPage.enableActionLabel"
    save=(action "save")
    saved=saved
    cancelDisabled=true
  }}
    {{#if (and enabled canEnable)}}
      <button class="btn bg-error" {{action "disable"}}>
        {{t "clusterIstioPage.disable"}}
      </button>
    {{/if}}
  {{/save-cancel}}
{{else}}
  {{#if enableClusterMonitoring}}
    {{#unless canReuse}}
      {{banner-message
        color="bg-warning"
        message=(t "clusterIstioPage.upgradeMonitoring" clusterId=cluster.id htmlSafe=true)
      }}
    {{/unless}}
  {{/if}}
{{/if}}