<script type="module">import e from"./parts/views-list.ok.js";import t from"./parts/view-detail.ok.js";import o from"./parts/views-overview.ok.js";import l from"./modals/create-view-modal.ok.js";export default{tag:"views-index",unwrap:!0,dependencies:[e,t,o,l],context(e){const t={selectedView:null,listEl:null,selectView(e){this.selectedView=e??null;const t=this.listEl?.$scope?.$innerContext;t&&(t.selected=e??null)},onRemoved(){this.selectedView=null;const e=this.listEl?.$scope?.$innerContext;e&&(e.selected=null,e.load())},onStateChanged(){this.listEl?.$scope?.$innerContext?.load()},async openCreateModal(){await e.$ok.shared.modal.open({owner:e,title:"Create View",content:'<create-view-modal :modal="modal" :on-done="onDone" />',context:e=>({modal:e,onDone:e=>{const o=t.listEl?.$scope?.$innerContext;o&&o.load(),t.selectView(e)}})})}};return t},mount(e){e.$watch(()=>e.$ok.stores.okdb.selectedEnv,()=>{this.selectView(null)})}};</script><template><component import="../../layouts/_default.ok.html"><template name="sidebar"><views-list :ref="listEl = $el" :on-create="openCreateModal" @selected="selectView($event.detail)"></views-list></template><template name="default"><if :="!selectedView"><views-overview @select="selectView($event.detail)"></views-overview></if><if :="selectedView"><view-detail :name="selectedView" @removed="onRemoved()" @state-changed="onStateChanged()"></view-detail></if></template></component></template><style>views-index .views-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;background:var(--okdb-app-bg-deep)}</style>