{{define "admin/r2_config.html"}}
{{template "admin_shell_open" .}}
<div class="cs-admin-page cs-admin-page--narrow">
{{template "admin_flash" .}}

<header class="cs-admin-pagehead">
  <div class="d-flex align-items-start gap-3 flex-grow-1 min-w-0">
    <div class="cs-admin-pagehead__icon" aria-hidden="true"><i class="bx bx-cloud-upload"></i></div>
    <div class="cs-admin-pagehead__body">
      <h1 class="cs-admin-pagehead__title">{{T "admin.r2.title"}}</h1>
      <p class="cs-admin-pagehead__desc">{{T "admin.r2.desc"}}</p>
    </div>
  </div>
  <div class="cs-admin-pagehead__links">
    <a href="/admin/config" class="btn btn-sm btn-outline-primary"><i class="bx bx-cog me-1" aria-hidden="true"></i>{{T "admin.r2.link_config"}}</a>
  </div>
</header>

<div class="cs-admin-infobox">
  <div class="cs-admin-infobox__head"><i class="bx bx-info-circle" aria-hidden="true"></i>{{T "admin.r2.cors_head"}}</div>
  <div class="cs-admin-infobox__body">
    <p class="mb-2">{{.Data.CorsTip}}</p>
    <details>
      <summary>{{T "admin.r2.cors_summary"}}</summary>
      <pre>[
  {
    "AllowedOrigins": [
      "https://code.phpdisk.com",
      "http://127.0.0.1:8002"
    ],
    "AllowedMethods": ["GET", "PUT", "HEAD"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3600
  }
]</pre>
      <p class="small text-muted mb-0 mt-2">{{T "admin.r2.cors_note"}}</p>
    </details>
  </div>
</div>

<form method="post" action="/admin/r2" class="cs-admin-ajax-form admin-config-save-form" data-cs-reload="1">

  <div class="card cs-admin-section">
    <div class="cs-admin-section__head">
      <div class="cs-admin-section__head-icon"><i class="bx bx-cloud" aria-hidden="true"></i></div>
      <div class="cs-admin-section__head-text">
        <h2 class="cs-admin-section__head-title">{{T "admin.r2.r2_title"}}</h2>
        <p class="cs-admin-section__head-sub">{{T "admin.r2.r2_sub"}}</p>
      </div>
    </div>
    <div class="cs-admin-section__body">
      <div class="row g-3">
      {{range .Data.Meta}}
        {{$k := .Key}}
        <div class="col-md-6 cs-admin-field">
          <label class="form-label" for="cfg_{{.Key}}">{{.Label}}</label>
          <div class="cs-admin-field__key">{{.Key}}</div>
          {{if eq .Kind "boolean"}}
          <select class="form-select form-select-sm" id="cfg_{{.Key}}" name="cfg_{{.Key}}">
            <option value="1" {{if eq (index $.Data.Cfgs $k) "1"}}selected{{end}}>{{T "admin.r2.on"}}</option>
            <option value="0" {{if eq (index $.Data.Cfgs $k) "0"}}selected{{end}}>{{T "admin.r2.off"}}</option>
          </select>
          {{else if eq .Kind "number"}}
          <input class="form-control form-control-sm" id="cfg_{{.Key}}" name="cfg_{{.Key}}" value="{{index $.Data.Cfgs $k}}">
          {{else}}
          <input class="form-control form-control-sm" id="cfg_{{.Key}}" name="cfg_{{.Key}}" value="{{index $.Data.Cfgs $k}}" autocomplete="off" placeholder="{{if eq .Kind "masked"}}{{T "admin.r2.ph_masked"}}{{end}}">
          {{if eq .Kind "masked"}}<div class="form-text">{{T "admin.r2.masked_hint"}}</div>{{end}}
          {{end}}
          {{if ne .Hint ""}}<div class="form-text">{{.Hint}}</div>{{end}}
        </div>
      {{end}}
      </div>
    </div>
  </div>

  {{if .Data.ImgToCMeta}}
  <div class="card cs-admin-section">
    <div class="cs-admin-section__head">
      <div class="cs-admin-section__head-icon cs-admin-section__head-icon--indigo"><i class="bx bx-image-add" aria-hidden="true"></i></div>
      <div class="cs-admin-section__head-text">
        <h2 class="cs-admin-section__head-title">{{T "admin.r2.imgtoc_title"}}</h2>
        <p class="cs-admin-section__head-sub">{{T "admin.r2.imgtoc_sub"}}</p>
      </div>
    </div>
    <div class="cs-admin-section__body">
      <p class="small text-muted mb-3">{{.Data.ImgToCDocHint}}</p>
      <div class="row g-3">
      {{range .Data.ImgToCMeta}}
        {{$k := .Key}}
        <div class="col-md-6 cs-admin-field">
          <label class="form-label" for="cfg_{{.Key}}">{{.Label}}</label>
          <div class="cs-admin-field__key">{{.Key}}</div>
          {{if eq .Kind "number"}}
          <input class="form-control form-control-sm" id="cfg_{{.Key}}" name="cfg_{{.Key}}" value="{{index $.Data.ImgToCCfgs $k}}">
          {{else}}
          <input class="form-control form-control-sm" id="cfg_{{.Key}}" name="cfg_{{.Key}}" value="{{index $.Data.ImgToCCfgs $k}}" autocomplete="off" placeholder="{{if eq .Kind "masked"}}{{T "admin.r2.ph_masked"}}{{end}}">
          {{if eq .Kind "masked"}}<div class="form-text">{{T "admin.r2.imgtoc_key_hint"}}</div>{{end}}
          {{end}}
          {{if ne .Hint ""}}<div class="form-text">{{.Hint}}</div>{{end}}
        </div>
      {{end}}
      </div>
    </div>
  </div>
  {{end}}

  <div class="cs-admin-savebar">
    <p class="cs-admin-savebar__hint mb-0"><i class="bx bx-shield-quarter" aria-hidden="true"></i> {{T "admin.r2.save_hint"}}</p>
    <button class="btn btn-primary" type="submit"><i class="bx bx-save me-1" aria-hidden="true"></i>{{T "admin.r2.save_btn"}}</button>
  </div>
</form>
</div>
{{template "admin_shell_close" .}}
{{end}}