import{d as v,P as z,s as n,j as R,O as B,Q as j,B as C,p as D,l as S,C as O,a as i,o as r,q as T,f as N,Y as p,b as o,N as V,u as c,g as Z,h as l,c as F,am as M,t as P,a6 as q,ak as I,al as L}from"./index-IQ_epUwE.js";import{_ as W}from"./RowAutoGrid.vue_vue_type_script_setup_true_lang-DYE8NXEb.js";const $={key:0,class:"text-4xl font-normal text-gray-300 font-grifo-s text-center mt-14"},E=["onClick"],G=["stroke"],Q={class:"text-xl text-gray-200 text-center font-lato"},K=v({__name:"Zones",setup(U,{expose:x}){function d(){return[f.value]}x({getPageRows:d});const k=z(),a=n.transport.zones,y=n.transport.selected_zone,f=R(null),u=B(),{setRows:h}=j();function g(){h(d(),0)}const b=t=>{n.transport.select_zone(t.zone_id),I(k.currentRoute.value,{path:"/"},{navigation_method:"zone_selected"});const e=L(t.zone_id);n.analytics.report_tv_page_interaction({page_name:u.name,interaction_type:"button_click",interaction_target:"zone_button",interaction_value:e.success?e.value:void 0})};C(async()=>{const t=Date.now();g();const e=Date.now();n.analytics.report_tv_page_performance({page_name:u.name,load_time_ms:e-t,any_errors:!1})}),D(()=>{h([],0)}),S(a,(t,e)=>{Object.keys(e).length!==Object.keys(t).length&&O(()=>{g()})});function m(t){return"w-1/2 h-1/2"}function _(t){return y.value?.zone_id===t.zone_id}return(t,e)=>(r(),i("div",{class:l(["flex flex-col items-center justify-center p-6 pb-32 mx-auto max-w-screen-lg",c(q)])},[e[0]||(p(-1,!0),(e[0]=o("h1",{class:"text-8xl font-normal text-gray-100 font-grifo-l tracking-tight"},[e[1]||(e[1]=V("Which Zone?"))])).cacheIndex=0,p(1),e[0]),Object.keys(c(a)).length===0?(r(),i("h2",$," There are no zones available, please enable zones in the Roon desktop app. ")):T("",!0),N(W,{id:"zone-row",ref_key:"zoneRow",ref:f,"make-key":(s,w)=>s.zone_id,cols:4,"center-if-less-than-cols":!0,items:Object.values(c(a)),"container-class":["mt-14","px-16"],"inner-container-class":["relative"],gap:"gap-8","row-item-class":["transition-transform"],"focus-class":["cubic-bezier-transition-timing-in","[&>:first-child>:first-child]:shadow-lg","[&>:first-child>:first-child]:border-4","[&>:first-child>:first-child]:border-roon-primary","[&>:first-child>:first-child.selected-zone]:bg-roon-primary","[&>:first-child>:first-child.not-selected-zone]:bg-background-100","scale-[1.10]"],"unfocus-class":["cubic-bezier-transition-timing-out","[&>:first-child>:first-child]:border-4","[&>:first-child>:first-child.selected-zone]:border-roon-primary","[&>:first-child>:first-child.not-selected-zone]:border-gray-700","[&>:first-child>:first-child.selected-zone]:bg-roon-primary","[&>:first-child>:first-child.not-selected-zone]:bg-background-100","scale-[1.00]"],centerOnScreenWhenFocused:!0},{default:Z(({item:s,index:w,isFocused:Y})=>[o("button",{onClick:A=>b(s),class:"flex flex-col items-center w-full rounded-lg gap-2"},[o("div",{class:l(["w-full aspect-square rounded-full flex items-center justify-center",_(s)?"selected-zone":"not-selected-zone"])},[s.svg_icon?(r(),F(M,{key:0,"svg-content":s.svg_icon,"container-class":["[&>:first-child]:h-full","[&>:first-child]:w-full",m(s)]},null,8,["svg-content","container-class"])):(r(),i("svg",{key:1,xmlns:"http://www.w3.org/2000/svg",class:l(m(s)),viewBox:"0 0 48 48",fill:"none"},[o("path",{d:"M16 16L32 32M32 16L16 32",stroke:_(s)?"white":"#D1D5DB","stroke-width":"3","stroke-linecap":"round"},null,8,G)],2))],2),o("span",Q,P(s.display_name),1)],8,E)]),_:1},8,["make-key","items"])],2))}});export{K as default};
