<script>
(function(){

const PAGE_SIZE = 10;
const DEFAULT_VEGA_BASE_URL = "https://col-vlc.na5.iiivega.com";

const SEARCH_TYPES = [
{value:"everything",label:"Everything"},
{value:"agent",label:"Author"},
{value:"concept",label:"Concept"},
{value:"series",label:"Series"},
{value:"title",label:"Title"}
];

/* ---------- CSS ---------- */

function injectStyles(){

if(document.getElementById("catalog-search-style")) return;

const style=document.createElement("style");
style.id="catalog-search-style";

style.textContent=`

.search-toggle-wrapper{
display:flex;
align-items:center;
gap:8px;
}

.search-toggle{
display:flex;
gap:10px;
font-size:14px;
margin-right:6px;
}

#vega-search-form{
display:none;
align-items:center;
gap:0;
max-width:360px;
}

#vega-search-input{
flex:1;
height:40px;
padding:0.6rem 1rem;
border:1px solid #ccc;
border-right:0;
border-radius:7px 0 0 7px;
font-size:0.95rem;
min-width:0;
}

#vega-search-type{
height:40px;
border:1px solid #ccc;
border-left:0;
border-right:0;
padding:0 0.6rem;
background:#fff;
}

#vega-search-submit{
height:40px;
padding:0.6rem 1rem;
border:1px solid #ccc;
border-left:0;
border-radius:0 7px 7px 0;
background:#2f6f2a;
color:#fff;
cursor:pointer;
}

`;

document.head.appendChild(style);

}

/* ---------- build catalog search ---------- */

function buildCatalogForm(){

const endpoint=DEFAULT_VEGA_BASE_URL+"/search";

const form=document.createElement("form");
form.id="vega-search-form";
form.setAttribute("role","search");
form.action=endpoint;
form.method="get";

const input=document.createElement("input");
input.id="vega-search-input";
input.type="search";
input.name="query";
input.placeholder="Search catalog";

const select=document.createElement("select");
select.id="vega-search-type";
select.name="searchType";

SEARCH_TYPES.forEach(({value,label})=>{
const o=document.createElement("option");
o.value=value;
o.textContent=label;
select.appendChild(o);
});

const pageSize=document.createElement("input");
pageSize.type="hidden";
pageSize.name="pageSize";
pageSize.value=PAGE_SIZE;

const submit=document.createElement("button");
submit.id="vega-search-submit";
submit.type="submit";
submit.textContent="Search";

form.appendChild(input);
form.appendChild(select);
form.appendChild(pageSize);
form.appendChild(submit);

return form;

}

/* ---------- main ---------- */

function init(){

/* prevent duplicates */

if(document.querySelector("#vega-search-form")) return true;

const websiteForm=document.querySelector("form.search-box");

if(!websiteForm) return false;

injectStyles();

/* wrapper */

const wrapper=document.createElement("div");
wrapper.className="search-toggle-wrapper";

/* toggle */

const toggle=document.createElement("div");
toggle.className="search-toggle";

toggle.innerHTML=`
<label>
<input type="radio" name="search-toggle" value="website" checked>
Website
</label>

<label>
<input type="radio" name="search-toggle" value="catalog">
Catalog
</label>
`;

/* catalog search */

const catalogForm=buildCatalogForm();

/* insert */

websiteForm.parentNode.insertBefore(wrapper,websiteForm);

wrapper.appendChild(toggle);
wrapper.appendChild(websiteForm);
wrapper.appendChild(catalogForm);

/* toggle behavior */

toggle.addEventListener("change",function(e){

if(e.target.value==="catalog"){
websiteForm.style.display="none";
catalogForm.style.display="flex";
}

if(e.target.value==="website"){
catalogForm.style.display="none";
websiteForm.style.display="flex";
}

});

return true;

}

/* ---------- robust loader (fix for Amplify) ---------- */

function waitForSearch(){

if(init()) return;

/* retry a few times */

let tries=0;

const interval=setInterval(function(){

tries++;

if(init() || tries>40){
clearInterval(interval);
}

},250);

}

/* run */

if(document.readyState==="loading"){
document.addEventListener("DOMContentLoaded",waitForSearch);
}else{
waitForSearch();
}

})();
</script>

<style>
header-search #site-search {
  width: 180px !important;
  max-width: 180px !important;
  height: 32px !important;

  background-color: #1F5F61 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;

  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;

  border: none !important;
  border-radius: 4px 0 0 4px !important;
  box-shadow: none !important;
  outline: none !important;

  padding: 0 10px !important;
  line-height: 32px !important;
  box-sizing: border-box !important;

  margin-right: 0 !important;
}

/* Placeholder styling (WCAG-conscious) */
.header-search #site-search::placeholder {
  color: #d0e6e7;
  opacity: 1; /* ensures consistent rendering across browsers */
}
.amplify-header .container nav .primary-container input {
    background-color: #963030;
    color: #fff !important;
    height: 20px;
    width: 180px;
    border: 1px solid var(--fg-color);
    padding: 3px 5px;
    font-size: 13px;
}
</style>