<div class="gf-form-group">
  <div class="gf-form">
    <h6>TLS/SSL Auth Details</h6>
    <info-popover mode="header">TLS/SSL certificates are encrypted and stored in the Grafana database.</info-popover>
  </div>
  <div ng-if="current.jsonData.tlsAuthWithCACert">
    <div class="gf-form-inline">
      <div class="gf-form gf-form--v-stretch"><label class="gf-form-label width-7">CA Cert</label></div>
      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsCACert">
        <textarea
          rows="7"
          class="gf-form-input gf-form-textarea"
          ng-model="current.secureJsonData.tlsCACert"
          placeholder="Begins with -----BEGIN CERTIFICATE-----"
        ></textarea>
      </div>

      <div class="gf-form" ng-if="current.secureJsonFields.tlsCACert">
        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" />
        <button
          type="reset"
          aria-label="Reset CA Cert"
          class="btn btn-secondary gf-form-btn"
          ng-click="current.secureJsonFields.tlsCACert = false"
        >
          reset
        </button>
      </div>
    </div>
  </div>

  <div ng-if="current.jsonData.tlsAuth">
    <div class="gf-form-inline">
      <div class="gf-form gf-form--v-stretch"><label class="gf-form-label width-7">Client Cert</label></div>
      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientCert">
        <textarea
          rows="7"
          class="gf-form-input gf-form-textarea"
          ng-model="current.secureJsonData.tlsClientCert"
          placeholder="Begins with -----BEGIN CERTIFICATE-----"
          required
        ></textarea>
      </div>
      <div class="gf-form" ng-if="current.secureJsonFields.tlsClientCert">
        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" />
        <button
          class="btn btn-secondary gf-form-btn"
          aria-label="Reset Client Cert"
          type="reset"
          ng-click="current.secureJsonFields.tlsClientCert = false"
        >
          reset
        </button>
      </div>
    </div>

    <div class="gf-form-inline">
      <div class="gf-form gf-form--v-stretch"><label class="gf-form-label width-7">Client Key</label></div>
      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientKey">
        <textarea
          rows="7"
          class="gf-form-input gf-form-textarea"
          ng-model="current.secureJsonData.tlsClientKey"
          placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
          required
        ></textarea>
      </div>
      <div class="gf-form" ng-if="current.secureJsonFields.tlsClientKey">
        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" />
        <button
          class="btn btn-secondary gf-form-btn"
          type="reset"
          aria-label="Reset Client Key"
          ng-click="current.secureJsonFields.tlsClientKey = false"
        >
          reset
        </button>
      </div>
    </div>
  </div>
</div>
