{{define "configure-keystore.html"}}
{{template "base" .}}
{{end}}

{{define "content"}}
<div class="configure-page">
{{if .Loading}}
<div class="alert alert-info"
     hx-get="/configure/keystore"
     hx-trigger="every 3s"
     hx-target="#content"
     hx-swap="innerHTML">
  Downloading YANG schema from device&hellip; this takes a moment on first login.
</div>
{{template "configure-toolbar" .}}
</div>
{{else}}
{{if .Error}}
<div class="alert alert-error">{{.Error}}</div>
{{end}}

<section class="info-grid">

  {{/* ── Symmetric Keys ─────────────────────────────────────────────── */}}
  <section class="info-card info-grid-span-2">
    <div class="card-header">Symmetric Keys</div>
    <div class="data-table-wrap">
      <table class="data-table cfg-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Format</th>
            <th>Value</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {{range $i, $k := .SymmetricKeys}}
          <tr>
            <td>
              <button class="key-row-toggle" type="button"
                      aria-expanded="false" data-target="sym-{{$i}}">
                <span class="key-row-arrow" aria-hidden="true">▶</span>{{.Name}}
              </button>
            </td>
            <td>{{.Format}}</td>
            <td>
              {{if .Value}}
                <span class="cfg-input-mask" id="sym-val-{{$i}}">{{.Value}}</span>
              {{else}}<span class="text-muted">—</span>{{end}}
            </td>
            <td style="text-align:right; white-space:nowrap">
              {{if .Value}}
              <button type="button" class="btn-icon cfg-secret-toggle"
                      data-toggle-mask="sym-val-{{$i}}"
                      title="Show / hide value"
                      aria-label="Show / hide value">👁</button>
              {{end}}
              <button type="button" class="btn-icon btn-icon-danger"
                      hx-delete="/configure/keystore/symmetric/{{.Name}}"
                      hx-confirm="Delete symmetric key {{.Name}}?"
                      hx-swap="none"
                      title="Delete key">
                {{template "icon-trash"}}
              </button>
            </td>
          </tr>
          <tr class="key-detail-row" id="key-detail-sym-{{$i}}">
            <td colspan="4" class="key-detail-cell">
              <div class="key-detail-body">
                <form hx-post="/configure/keystore/symmetric/{{.Name}}" hx-swap="none">
                  <table class="info-table">
                    <tr>
                      <th>Format</th>
                      <td>
                        <select class="cfg-input" name="format">
                          {{$fmt := .FormatID}}
                          {{range $.SymKeyFormats}}
                          <option value="{{.Value}}"
                            {{if eq $fmt .Value}}selected{{end}}>{{.Label}}</option>
                          {{end}}
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <th>Value</th>
                      <td>
                        <div class="cfg-secret-wrap">
                          <input class="cfg-input cfg-input-mask" type="text"
                                 name="value" value="{{.Value}}"
                                 id="sym-edit-{{$i}}"
                                 autocomplete="off" spellcheck="false"
                                 data-1p-ignore="true" data-lpignore="true"
                                 data-bwignore="true" data-form-type="other">
                          <button type="button" class="btn-icon cfg-secret-toggle"
                                  data-toggle-mask="sym-edit-{{$i}}"
                                  aria-label="Show / hide value">👁</button>
                        </div>
                      </td>
                    </tr>
                  </table>
                  <div class="cfg-card-footer" style="padding-left:0">
                    <button class="btn btn-primary btn-sm" type="submit">Save</button>
                    <span class="cfg-save-status"></span>
                  </div>
                </form>
              </div>
            </td>
          </tr>
          {{end}}

          {{/* Hidden add-sym-key row */}}
          <tr id="add-sym-row" hidden>
            <td colspan="4" class="key-detail-cell">
              <form hx-post="/configure/keystore/symmetric" hx-swap="none"
                    class="user-add-inline">
                <input class="cfg-input" type="text" name="name" required
                       placeholder="Name">
                <select class="cfg-input" name="format">
                  {{range .SymKeyFormats}}
                  <option value="{{.Value}}">{{.Label}}</option>
                  {{end}}
                </select>
                <span class="cfg-secret-wrap">
                  <input class="cfg-input cfg-input-mask" type="text" name="value"
                         id="add-sym-value" placeholder="Value"
                         autocomplete="off" spellcheck="false"
                         data-1p-ignore="true" data-lpignore="true"
                         data-bwignore="true" data-form-type="other">
                  <button type="button" class="btn-icon cfg-secret-toggle"
                          data-toggle-mask="add-sym-value"
                          aria-label="Show / hide value">👁</button>
                </span>
                <button class="btn btn-primary btn-sm" type="submit">Add</button>
                <button type="button" class="btn btn-sm" data-hide="add-sym-row">Cancel</button>
                <span class="cfg-save-status"></span>
              </form>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="cfg-card-footer">
      <button type="button" class="btn-add-row" data-show="add-sym-row">+ Add symmetric key</button>
    </div>
  </section>

  {{/* ── Asymmetric Keys ─────────────────────────────────────────────── */}}
  <section class="info-card info-grid-span-2">
    <div class="card-header">Asymmetric Keys</div>
    <div class="data-table-wrap">
      <table class="data-table cfg-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Algorithm</th>
            <th style="text-align:center">Certificates</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {{range $i, $k := .AsymmetricKeys}}
          <tr>
            <td>
              <button class="key-row-toggle" type="button"
                      aria-expanded="false" data-target="asym-{{$i}}">
                <span class="key-row-arrow" aria-hidden="true">▶</span>{{.Name}}
              </button>
            </td>
            <td>{{.Algorithm}}</td>
            <td style="text-align:center">{{len .Certificates}}</td>
            <td style="text-align:right">
              <button type="button" class="btn-icon btn-icon-danger"
                      hx-delete="/configure/keystore/asymmetric/{{.Name}}"
                      hx-confirm="Delete asymmetric key {{.Name}} and all its certificates?"
                      hx-swap="none"
                      title="Delete key">
                {{template "icon-trash"}}
              </button>
            </td>
          </tr>
          <tr class="key-detail-row" id="key-detail-asym-{{$i}}">
            <td colspan="4" class="key-detail-cell">
              <div class="key-detail-body">

                {{/* Editable key material */}}
                <form hx-post="/configure/keystore/asymmetric/{{.Name}}" hx-swap="none">
                  <table class="info-table">
                    <tr>
                      <th>Private Key</th>
                      <td><textarea class="cfg-input cfg-input-mono" name="private_key" rows="6">{{.PrivateKeyPEM}}</textarea></td>
                    </tr>
                    {{if .PublicKeyPEM}}
                    <tr>
                      <th>Public Key</th>
                      <td><textarea class="cfg-input cfg-input-mono" name="public_key" rows="4">{{.PublicKeyPEM}}</textarea></td>
                    </tr>
                    {{end}}
                  </table>
                  <div class="cfg-card-footer" style="padding-left:0">
                    <button class="btn btn-primary btn-sm" type="submit">Save</button>
                    <span class="cfg-save-status"></span>
                  </div>
                </form>

                {{/* Certificate list */}}
                <div>
                  <div class="section-subtitle">Certificates ({{len .Certificates}})</div>
                  {{if .Certificates}}
                  <div class="data-table-wrap">
                    <table class="data-table cfg-table">
                      <thead>
                        <tr><th>Name</th><th></th></tr>
                      </thead>
                      <tbody>
                        {{range .Certificates}}
                        <tr class="key-summary-row">
                          <td>
                            {{if .PEM}}
                            <button class="key-row-toggle" type="button"
                                    aria-expanded="false" data-target="cert-{{$i}}-{{.Name}}">
                              <span class="key-row-arrow" aria-hidden="true">▶</span>{{.Name}}
                            </button>
                            {{else}}{{.Name}}{{end}}
                          </td>
                          <td style="text-align:right">
                            <button type="button" class="btn-icon btn-icon-danger"
                                    hx-delete="/configure/keystore/asymmetric/{{$k.Name}}/certs/{{.Name}}"
                                    hx-confirm="Remove certificate {{.Name}}?"
                                    hx-swap="none"
                                    title="Remove certificate">
                              {{template "icon-trash"}}
                            </button>
                          </td>
                        </tr>
                        {{if .PEM}}
                        <tr class="key-detail-row" id="key-detail-cert-{{$i}}-{{.Name}}">
                          <td colspan="2" class="key-detail-cell">
                            <div class="key-detail-body">
                              <form hx-post="/configure/keystore/asymmetric/{{$k.Name}}/certs/{{.Name}}"
                                    hx-swap="none">
                                <table class="info-table">
                                  <tr>
                                    <th>PEM</th>
                                    <td><textarea class="cfg-input cfg-input-mono" name="cert_data"
                                                  rows="6">{{.PEM}}</textarea></td>
                                  </tr>
                                </table>
                                <div class="cfg-card-footer" style="padding-left:0">
                                  <button class="btn btn-primary btn-sm" type="submit">Save</button>
                                  <span class="cfg-save-status"></span>
                                </div>
                              </form>
                            </div>
                          </td>
                        </tr>
                        {{end}}
                        {{end}}
                      </tbody>
                    </table>
                  </div>
                  {{end}}

                  {{/* Add certificate */}}
                  <form hx-post="/configure/keystore/asymmetric/{{$k.Name}}/certs"
                        hx-swap="none" style="margin-top:0.5rem">
                    <table class="info-table">
                      <tr>
                        <th>Cert name</th>
                        <td><input class="cfg-input" type="text" name="cert_name"
                                   placeholder="e.g. tls-cert"></td>
                      </tr>
                      <tr>
                        <th>PEM data</th>
                        <td><textarea class="cfg-input cfg-input-mono" name="cert_data" rows="4"
                                      placeholder="-----BEGIN CERTIFICATE-----&#10;...&#10;-----END CERTIFICATE-----"></textarea></td>
                      </tr>
                    </table>
                    <div class="cfg-card-footer" style="padding-left:0">
                      <button class="btn btn-primary btn-sm" type="submit">Add Certificate</button>
                      <span class="cfg-save-status"></span>
                    </div>
                  </form>
                </div>

              </div>
            </td>
          </tr>
          {{end}}

          {{/* Hidden add-asym-key row */}}
          <tr id="add-asym-row" hidden>
            <td colspan="4" class="key-detail-cell">
              <form hx-post="/configure/keystore/asymmetric" hx-swap="none">
                <table class="info-table">
                  <tr>
                    <th>Name</th>
                    <td><input class="cfg-input" type="text" name="name" required
                               placeholder="e.g. tls-server-key"></td>
                  </tr>
                  <tr>
                    <th>Private Key (PEM)</th>
                    <td><textarea class="cfg-input cfg-input-mono" name="private_key"
                                  rows="6" required
                                  placeholder="-----BEGIN PRIVATE KEY-----&#10;...&#10;-----END PRIVATE KEY-----"></textarea></td>
                  </tr>
                  <tr>
                    <th>Public Key (PEM)</th>
                    <td><textarea class="cfg-input cfg-input-mono" name="public_key"
                                  rows="4"
                                  placeholder="Optional — derived automatically from RSA/EC private keys"></textarea></td>
                  </tr>
                </table>
                <div class="cfg-card-footer" style="padding-left:0">
                  <button class="btn btn-primary btn-sm" type="submit">Add</button>
                  <button type="button" class="btn btn-sm" data-hide="add-asym-row">Cancel</button>
                  <span class="cfg-save-status"></span>
                </div>
              </form>
            </td>
          </tr>

        </tbody>
      </table>
    </div>
    <div class="cfg-card-footer">
      <button type="button" class="btn-add-row" data-show="add-asym-row">+ Add asymmetric key</button>
    </div>
  </section>

</section>

{{template "configure-toolbar" .}}
</div>
{{end}}{{/* end {{else}} — schema ready */}}

{{end}}