function TemplatesScreen({go}){
  const [sel,setSel]=React.useState("Football");
  const [q,setQ]=React.useState("");
  const sports=window.DATA.sports.filter(s=>s.name.toLowerCase().includes(q.toLowerCase()));
  return <div style={{display:"flex",flexDirection:"column",gap:20}}>
    <div style={{display:"flex",alignItems:"center",gap:12,flexWrap:"wrap"}}>
      <SearchInput placeholder="Search a sport" value={q} onChange={e=>setQ(e.target.value)} width={280}/>
      <Select options={["All categories",...window.DATA.sports.map(s=>s.name)]} wrapperStyle={{width:190}}/>
      <div style={{flex:1}}></div>
    </div>
    <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(200px,1fr))",gap:16}}>
      {sports.map(s=><TemplateCard key={s.name} name={s.name} category={s.count+" templates"}
        preview={{Football:"../../assets/templates/football-champions-helmet.png",Baseball:"../../assets/templates/baseball-champions-banner.png",
          Volleyball:"../../assets/templates/volleyball-badge.png","Track & field":"../../assets/templates/track-winged-shoe.png"}[s.name]}
        badge={s.badge} selected={sel===s.name} onClick={()=>setSel(s.name)}/>)}
    </div>
  </div>;
}
window.TemplatesScreen=TemplatesScreen;