package main

templ clientsTemplate(clients []ClientReference) {
	<aside class="fixed flex-1 bottom-0 left-0 top-auto mt-4 w-full self-start transition-all duration-500 print:hidden sm:sticky sm:bottom-auto sm:left-auto sm:top-8 sm:w-auto">
		<div class="absolute right-0 top-0 z-10 mb-4 h-10 w-10 text-center text-sm sm:relative sm:h-auto sm:w-auto">
			<span class="hidden sm:block">Open in</span>
			<div
				_="on click
				   toggle .hidden on #open
				   toggle .hidden on #close
				   toggle .hidden on #gradient
				   toggle .overflow-hidden on <body />
				   toggle .hidden on <.client:not(:first-child) />
				   toggle .top_client_sticky on <.clients_wrapper > :first-child />
				"
			>
				<div id="open" class="inline sm:hidden">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="20"
						height="20"
						fill="currentColor"
						viewBox="0 0 20 20"
						class="m-auto mt-[28%] block h-1/2 w-1/2"
					>
						<path
							fill="#fafafa"
							fill-rule="evenodd"
							d="M3.808.355h2.85a2.85 2.85 0 0 1 2.85 2.85v2.85a2.85 2.85 0 0 1-2.85 2.85h-2.85a2.85 2.85 0 0 1-2.85-2.85v-2.85a2.85 2.85 0 0 1 2.85-2.85Zm2.85 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0 3.8h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm10.45-6.65h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Zm0-17.1h-2.85a2.85 2.85 0 0 0-2.85 2.85v2.85a2.85 2.85 0 0 0 2.85 2.85h2.85a2.85 2.85 0 0 0 2.85-2.85v-2.85a2.85 2.85 0 0 0-2.85-2.85Zm0 6.65a.95.95 0 0 0 .95-.95v-2.85a.95.95 0 0 0-.95-.95h-2.85a.95.95 0 0 0-.95.95v2.85c0 .525.425.95.95.95h2.85Z"
							clip-rule="evenodd"
						></path>
					</svg>
				</div>
				<div id="close" class="mt-4 hidden sm:hidden">
					<svg
						xmlns="http://www.w3.org/2000/svg"
						width="31"
						height="16"
						fill="currentColor"
						viewBox="0 0 31 16"
						class="m-auto mt-[28%] block h-1/2 w-1/2"
					>
						<path
							fill="#fafafa"
							d="M30.207 3.016 16.744 14.983a1.496 1.496 0 0 1-1.974 0L1.307 3.016A1.496 1.496 0 0 1 3.28.772l12.476 11.085L28.233.772a1.496 1.496 0 1 1 1.974 2.244Z"
						></path>
					</svg>
				</div>
			</div>
		</div>
		<div
			class="clients_wrapper | overflow-y-auto rounded-t-lg max-h-[55vh] sm:max-h-max"
			_="on load
			wait 50ms
			get my children
			  get filterAndSort(it) then repeat for c in it call me.appendChild(c) end
			get first in me
			  then tell it
			    remove .hidden
			    add .top_client
			"
		>
			for _, client := range clients {
				<div
					data-platform={ client.Platform }
					class="client | hidden w-full items-center border-b border-zinc-800 bg-zinc-700 first-of-type:rounded-t-lg first-of-type:border-0 first-of-type:bg-strongpink hover:bg-zinc-800 sm:mb-3 sm:flex sm:rounded-lg sm:border-0 sm:first-of-type:rounded-lg"
					data-id={ client.ID }
					_="on load get my @data-id then get localStorage[`nj:${it}`] or 0 then set @count to it then set @title to `used ${it} times`
					   on click get my @data-id then increment localStorage[`nj:${it}`]"
				>
					<a
						class="client block basis-full px-3 py-3 text-left text-[17px] font-normal leading-4 text-white no-underline sm:inline sm:py-1.5 sm:text-center sm:font-light"
						href={ client.URL }
					>
						<span class="ml-1.5 pr-2 inline basis-1/5 text-neutral-400 sm:hidden">Open in</span>
						{ client.Name }
						<span
							class="type | float-right mr-4 text-xs uppercase text-neutral-400 sm:hidden"
						>{ client.Platform }</span>
					</a>
				</div>
			}
			<div data-platform="dummy" class="client | hidden h-8 bg-zinc-700"></div>
		</div>
		<div
			id="gradient"
			class="fixed bottom-0 hidden h-10 w-full bg-gradient-to-t from-zinc-800 to-transparent pointer-events-auto"
		></div>
	</aside>
	<style>
  .top_client_sticky {
    position: absolute;
  }
  .top_client span {
    color: #FFFFFF;
  }
  .top_client a span.type {
      display: none;
  }
  .clients_wrapper div {
    &:nth-child(2) {
      margin-top: 2.5rem;
    }
  }
</style>
	<script>
function getPlatform() {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;

  if (/android/i.test(userAgent)) {
    return 'android';
  } else if (/iPad|iPhone|iPod/i.test(userAgent) && !window.MSStream) {
    return 'ios';
  } else {
    return 'web';
  }
}

function filterAndSort(children) {
  const platform = getPlatform();

  const parent = children[0].parentNode;
  const elements = []
  for (let i = 0; i < children.length; i++) {
    let element = children[i]
    switch (element.getAttribute('data-platform')) {
      case platform:
      case 'web':
      case 'native':
      case 'dummy':
        elements.push(element)
    }
  }

  elements.sort(
    (a, b) =>
      parseInt(b.getAttribute('count')) - parseInt(a.getAttribute('count'))
  );

  parent.innerHTML = ''
  for (let i = 0; i < elements.length; i++) {
    parent.appendChild(elements[i]);
  };

  return elements;
}
</script>
}
