{{template "header" .}}
<div class="storage-page">
  <div class="storage-hero">
    <div>
      <p class="kicker">Cloud library</p>
      <h1>Where the videos live</h1>
      <p class="lead">{{if .PersonalStore}}Your files never land on this Deimos server. Paste <em>your</em> Storj or S3 keys. Local disk is for the super user only.{{else}}Deimos never hosts media. Files stay on this machine, or in the S3 / Storj bucket whose keys you paste.{{end}}</p>
    </div>
    <div class="status-pill">
      <span class="dot"></span>
      {{.StoreLabel}}
    </div>
  </div>

  <div class="ok" style="background:#142018">
    <strong>Storj in 3 steps:</strong> create a bucket on storj.io → Access Keys → paste Access Key, Secret, and bucket name below → pick Storj → Test &amp; save.
    Same idea for Wasabi, B2, AWS, Filebase: their keys, not ours.
  </div>
  {{if .Error}}<div class="alert">{{.Error}}</div>{{end}}
  {{if .OK}}<div class="ok">{{.OK}}</div>{{end}}

  {{if and (not .License.Pro) (not .PersonalStore)}}
  <div class="lock-card">
    <div>
      <h2>Pro unlocks your own bucket</h2>
      <p>Free plan stores a handful of files on this server. A paid license lets you point Deimos at Filebase (IPFS), Storj, or any S3 API you already pay for.</p>
      <a class="btn btn-green" href="/license">Activate a license key</a>
    </div>
  </div>
  {{end}}

  <form method="post" class="storage-form" {{if and (not .License.Pro) (not .PersonalStore)}}onsubmit="return false"{{end}}>
    {{range .Groups}}
    <div class="kind-block kind-{{.Kind}}">
      <h2>{{.Title}}</h2>
      <p class="kind-blurb">{{.Blurb}}</p>
      <div class="prov-grid">
        {{range .Presets}}
        <label class="prov {{if eq $.S3.Provider .ID}}on{{end}}">
          <input type="radio" name="provider" value="{{.ID}}"
            data-endpoint="{{.Endpoint}}" data-region="{{.Region}}"
            {{if eq $.S3.Provider .ID}}checked{{end}} {{if and (not $.License.Pro) (not $.PersonalStore)}}disabled{{end}}>
          <strong>{{.Name}}</strong>
          <span>{{.Blurb}}</span>
        </label>
        {{end}}
      </div>
    </div>
    {{end}}

    <div class="fields">
      <div class="field">
        <label>Endpoint</label>
        <input type="text" name="endpoint" value="{{.S3.Endpoint}}" placeholder="s3.filebase.io" {{if and (not .License.Pro) (not .PersonalStore)}}disabled{{end}}>
        <p class="hint">Wasabi: <code>s3.wasabisys.com</code> or <code>s3.eu-central-1.wasabisys.com</code> · B2: <code>s3.us-west-004.backblazeb2.com</code></p>
      </div>
      <div class="field-row">
        <div class="field">
          <label>Region</label>
          <input type="text" name="region" value="{{if .S3.Region}}{{.S3.Region}}{{else}}us-east-1{{end}}" {{if and (not .License.Pro) (not .PersonalStore)}}disabled{{end}}>
        </div>
        <div class="field">
          <label>Bucket name</label>
          <input type="text" name="bucket" value="{{.S3.Bucket}}" placeholder="deimos-library" autocomplete="off" {{if and (not .License.Pro) (not .PersonalStore)}}disabled{{end}}>
        </div>
      </div>
      <div class="field-row">
        <div class="field">
          <label>Access key</label>
          <input type="text" name="access_key" value="{{.S3.AccessKey}}" autocomplete="off" {{if and (not .License.Pro) (not .PersonalStore)}}disabled{{end}}>
        </div>
        <div class="field">
          <label>Secret key</label>
          <input type="password" name="secret_key" placeholder="{{if .MaskedKey}}leave blank to keep {{.MaskedKey}}{{else}}••••••••••••{{end}}" autocomplete="new-password" {{if and (not .License.Pro) (not .PersonalStore)}}disabled{{end}}>
        </div>
      </div>
      <div class="field">
        <label>Public URL <span class="opt">(optional)</span></label>
        <input type="text" name="public_base" value="{{.S3.PublicBase}}" placeholder="https://your-bucket.s3.filebase.io" {{if and (not .License.Pro) (not .PersonalStore)}}disabled{{end}}>
        <p class="hint">If the bucket is public, paste the base URL. Otherwise we create 6-hour playback links automatically.</p>
      </div>
    </div>

    {{if or .License.Pro .PersonalStore}}
    <div class="actions">
      <button class="btn btn-green" type="submit" name="action" value="save">Test &amp; save</button>
      <button class="btn btn-outline" type="submit" name="action" value="disconnect">{{if .PersonalStore}}Remove my keys{{else}}Use this server instead{{end}}</button>
    </div>
    {{end}}
  </form>
</div>
<script>
(function () {
  const presets = {
    filebase: { endpoint: "s3.filebase.io", region: "us-east-1" },
    storj: { endpoint: "gateway.storjshare.io", region: "us-east-1" },
    wasabi: { endpoint: "s3.wasabisys.com", region: "us-east-1" },
    backblaze: { endpoint: "s3.us-west-004.backblazeb2.com", region: "us-west-004" },
    aws: { endpoint: "s3.us-east-1.amazonaws.com", region: "us-east-1" },
    r2: { endpoint: "", region: "auto" },
    minio: { endpoint: "", region: "us-east-1" },
    local: { endpoint: "", region: "" }
  };
  document.querySelectorAll('input[name=provider]').forEach(function (el) {
    el.addEventListener('change', function () {
      const p = presets[el.value];
      if (!p) return;
      const ep = document.querySelector('input[name=endpoint]');
      const rg = document.querySelector('input[name=region]');
      if (p.endpoint) ep.value = p.endpoint;
      if (p.region) rg.value = p.region;
      document.querySelectorAll('.prov').forEach(function (c) { c.classList.remove('on'); });
      el.closest('.prov').classList.add('on');
    });
  });
})();
</script>
{{template "footer" .}}