import { c as create_ssr_component, g as getContext, b as subscribe, h as each, e as escape, d as add_attribute } from "../../chunks/index-0e008fb3.js";
const Config = create_ssr_component(($$result, $$props, $$bindings, slots) => {
  let $configs, $$unsubscribe_configs;
  let $activeConfigIndex, $$unsubscribe_activeConfigIndex;
  const configs = getContext("stores").configs;
  $$unsubscribe_configs = subscribe(configs, (value) => $configs = value);
  const activeConfigIndex = getContext("stores").activeConfigIndex;
  $$unsubscribe_activeConfigIndex = subscribe(activeConfigIndex, (value) => $activeConfigIndex = value);
  $$unsubscribe_configs();
  $$unsubscribe_activeConfigIndex();
  return `<div class="${"max-w-6xl mx-auto"}"><div class="${"hidden sm:block"}" aria-hidden="${"true"}"><div class="${"py-5"}"></div></div>

	<h2 class="${"text-lg leading-6 text-3xl text-gray-900"}">Configuration</h2>
	<p class="${"mt-1 max-w-2xl text-sm text-gray-500"}">Datastore configurations</p>

	

	<div class="${"hidden sm:block"}" aria-hidden="${"true"}"><div class="${"py-5"}"></div></div>

	${Array.isArray($configs) ? `${each($configs, (config, i) => {
    return `<div><div class="${"md:grid md:grid-cols-3 md:gap-6"}"><div class="${"md:col-span-1"}"><div class="${"px-4 sm:px-0"}"><h3 class="${"text-lg font-medium leading-6 text-gray-900"}">Configuration${escape(config.name ? " for: " : "")}<code>${escape(config.name || "")}</code></h3>
							<p class="${"mt-1 text-sm text-gray-600"}">This configuration will be used to communicate with a unique instance of the
								Datastore. The <code>Access token</code> must be valid and available in the deployment
								configuration. Rights and permissions are attached to it.
							</p>
						</div></div>
					<div class="${"mt-5 md:mt-0 md:col-span-2"}"><div class="${"shadow sm:rounded-md sm:overflow-hidden"}"><div class="${"px-4 py-5 bg-white space-y-6 sm:p-6"}"><div class="${"flex items-center justify-between"}"><span class="${"flex-grow flex flex-col"}"><span class="${"text-sm font-medium text-gray-900"}" id="${"availability-label"}">Activate this configuration</span>
										</span>
									
									<button type="${"button"}" class="${[
      "bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500",
      i === $activeConfigIndex ? "bg-blue-200" : ""
    ].join(" ").trim()}" role="${"switch"}"${add_attribute("aria-checked", i === $activeConfigIndex ? "true" : "false", 0)} aria-labelledby="${"availability-label"}" aria-describedby="${"availability-description"}">
										<span aria-hidden="${"true"}" class="${[
      "translate-x-0 pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200",
      i === $activeConfigIndex ? "translate-x-full" : ""
    ].join(" ").trim()}"></span>
										
									</button></div>

								<div class="${"grid grid-cols-3 gap-6"}"><div class="${"col-span-3"}"><label for="${"name-" + escape(i)}" class="${"block text-sm font-medium text-gray-700"}">Name</label>
										<div class="${"mt-1"}"><input type="${"text"}" name="${"name-" + escape(i)}" id="${"name-" + escape(i)}" class="${"shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"}" placeholder="${"you@example.com"}"${add_attribute("value", config.name, 0)}></div>
										<p class="${"mt-2 text-sm text-gray-500"}">Name of this configuration</p>
									</div></div>

								<div class="${"grid grid-cols-3 gap-6"}"><div class="${"col-span-3"}"><label for="${"base-url-" + escape(i)}" class="${"block text-sm font-medium text-gray-700"}">Base URL</label>
										<div class="${"mt-1"}"><input type="${"text"}" name="${"base-url-" + escape(i)}" id="${"base-url-" + escape(i)}" class="${"shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"}" placeholder="${"you@example.com"}"${add_attribute("value", config.base_url, 0)}></div>
										<p class="${"mt-2 text-sm text-gray-500"}">Base URL such as <code>http://localhost:3001</code></p>
									</div></div>

								<div><div class="${"col-span-3"}"><label for="${"access-token-" + escape(i)}" class="${"block text-sm font-medium text-gray-700"}">Access token</label>
										<div class="${"mt-1"}"><input type="${"password"}" name="${"access-token-" + escape(i)}" id="${"access-token-" + escape(i)}" class="${"shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md"}" placeholder="${"you@example.com"}"${add_attribute("value", config.access_token, 0)}></div>
										<p class="${"mt-2 text-sm text-gray-500"}">Access token to use to communication with the Datastore.
										</p>
									</div></div>

								<button type="${"button"}" class="${"relative inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-400 hover:bg-green-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-300"}">Copy
								</button>

								${i > 0 ? `<button type="${"button"}" class="${"inline-flex items-center px-4 py-2 border border-transparent shadow-sm font-medium rounded-md text-white bg-red-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm"}">DELETE
									</button>` : ``}</div>
						</div></div>
				</div></div>

			${i < $configs.length ? `<div class="${"hidden sm:block"}" aria-hidden="${"true"}"><div class="${"py-5"}"><div class="${"border-t border-gray-200"}"></div></div>
				</div>` : ``}`;
  })}` : ``}

	<div><div class="${"md:grid md:grid-cols-3 md:gap-6"}"><div class="${"md:col-span-1"}"></div>
			<div class="${"mt-5 md:mt-0 md:col-span-2"}"><button type="${"button"}" class="${"relative block w-full border-2 border-gray-300 border-dashed rounded-lg p-12 text-center hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"}"><svg class="${"mx-auto h-12 w-12 text-gray-400"}" xmlns="${"http://www.w3.org/2000/svg"}" fill="${"none"}" viewBox="${"0 0 24 24"}" stroke="${"currentColor"}"><path stroke-linecap="${"round"}" stroke-linejoin="${"round"}" stroke-width="${"2"}" d="${"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"}"></path><path stroke-linecap="${"round"}" stroke-linejoin="${"round"}" stroke-width="${"2"}" d="${"M15 12a3 3 0 11-6 0 3 3 0 016 0z"}"></path></svg>
					<span class="${"mt-2 block text-sm font-medium text-gray-900"}">Add a configuration</span></button></div></div></div></div>`;
});
export { Config as default };
