export default{tag:"create-env-modal",attr:{modal:{},onDone:{}},context:e=>({busy:!1,name:"",sync:!0,compression:!0,error:null,get canSave(){return this.name.trim().length>0&&!this.busy},async save(){const n=this.name.trim();if(n){this.error=null,this.busy=!0;try{const t=await fetch(`${__ENV__.API}/envs`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({name:n,sync:this.sync,compression:this.compression})});if(!t.ok){const e=await t.json().catch(()=>({}));throw new Error(e?.error?.message||t.statusText)}await e.$attr.modal.close(),await(e.$attr.onDone?.(n))}catch(e){this.error=e?.message||"Failed to create environment"}finally{this.busy=!1}}},cancel(){e.$attr.modal.close()}}),template:'\n<div style="min-width:340px; display:flex; flex-direction:column; gap:14px;">\n\n  <div style="display:flex; flex-direction:column; gap:4px;">\n    <label style="font-size:12px; opacity:.6;">Environment name</label>\n    <input\n      type="text"\n      placeholder="e.g. staging, analytics, archive"\n      :value="name"\n      @input="name = $el.value"\n      @keydown.enter="save()"\n      autofocus\n      style="font-family:monospace;"\n    />\n    <div style="font-size:11px; opacity:.45; margin-top:2px;">\n      Use letters, numbers, hyphens. Prefix with <code>~</code> for system envs.\n    </div>\n  </div>\n\n  <div style="display:flex; flex-direction:column; gap:8px;">\n    <label style="display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; user-select:none;">\n      <input type="checkbox" :checked="sync" @change="sync = $event.target.checked" />\n      <span>Sync-enabled <span style="opacity:.5; font-size:11px;">(HLC clock + changelog)</span></span>\n    </label>\n    <label style="display:flex; align-items:center; gap:8px; cursor:pointer; font-size:13px; user-select:none;">\n      <input type="checkbox" :checked="compression" @change="compression = $event.target.checked" />\n      <span>Compression <span style="opacity:.5; font-size:11px;">(smaller on disk, slight CPU overhead)</span></span>\n    </label>\n  </div>\n\n  <if :="error">\n    <div style="color:var(--okdb-danger); font-size:13px; padding:6px 10px; background:var(--okdb-danger-deep-bg); border-radius:4px; border:1px solid color-mix(in srgb, var(--okdb-danger) 20%, transparent);">\n      {{ error }}\n    </div>\n  </if>\n\n  <div style="display:flex; gap:8px; justify-content:flex-end; padding-top:4px; border-top:1px solid var(--okdb-app-border);">\n    <button @click="cancel()">Cancel</button>\n    <button class="btn-primary" @click="save()" :disabled="!canSave">\n      {{ busy ? \'Creating…\' : \'Create\' }}\n    </button>\n  </div>\n\n</div>'};