<script language="JavaScript">
<!--
function _AN_global_var_init(){
	_AN_this_url = "/prx/000/";
	_AN_base_scheme = "https";
	_AN_base_host = "https://raw.githubusercontent.com";
	_AN_base_path = "https://raw.githubusercontent.com/devagrawal09/solid-socket/refs/heads/next/src/components/";
	_AN_encode_urls = 0;
	_AN_mpo = 1;
	_AN_md = 0;
	_AN_rel_urls = 1;
	_AN_nav_switch = 0;
	_AN_nav_allowurl = 1;
	_AN_nav_override = 0;
	_AN_has_iframe = 0;
	_AN_dbg_flags = null;
	_AN_nav_use_aaa = 1;
	_AN_expires_pass = 0;
	_AN_wrap_evthandlers = 0;
	_AN_rewrite_param_exact = 0;
	_AN_obj_params = {};
} 
_AN_global_var_init();
//-->
</script>
<script language="JavaScript" src="/prx/001/http/localh/an_util.js"></script>
<script language="JavaScript" src="/prx/001/http/localh/NSLib.js"></script>

import { A } from "@solidjs/router";
import { For, Show } from "solid-js";
import { useInvites } from "~/lib/todos";

export function Invites() {
  const serverInvites = useInvites();

  return (
    <div style="{{" text-align : center , margin-top : 100px , font-size : 20px , }>
      <p>Invite someone to your list!</p>
      <form onSubmit="{(e)"> {
          e.preventDefault();
          serverInvites.addInvite(
            new FormData(e.currentTarget).get("invite") as string
          );
          e.currentTarget.reset();
        }}
      >
        <input placeholder="Username" name="invite" style="{{" background-color : #f2f2f2 , border 1px solid grey , border-radius : 5px , color black , padding 15px 32px , text-align : center , text-decoration : none , display inline-block , font-size : 16px , margin 4px 2px , } />
      </form>
      <Show when="{serverInvites.inviteds()?.length}">
        <h4>Invited</h4>
        <For each="{serverInvites.inviteds()" | [>
          {(invite) => (
            <div>
              {invite}
              <button onClick="{()"> serverInvites.removeInvite(invite)}
                style={{
                  "background-color": "red",
                  border: "none",
                  "border-radius": "50%",
                  color: "white",
                  padding: "12px 15px",
                  "text-align": "center",
                  "text-decoration": "none",
                  display: "inline-block",
                  "font-size": "16px",
                  margin: "4px",
                  cursor: "pointer",
                }}
              >
                X
              </button>
            </div>
          )}
        </For>
      </Show>
      <Show when="{serverInvites.invites()?.length}">
        <h4>Invites</h4>
        <For each="{serverInvites.invites()" | [>
          {(invite) => (
            <div>
              <A href="/prx/000/https/raw.githubusercontent.com/devagrawal09/solid-socket/refs/heads/next/src/components/{`/${invite}`}">{invite}</A>
            </div>
          )}
        </For>
      </Show>
    </div>
  );
}
