<script src="https://cdn.jsdelivr.net/gh/dfralan/goloom@main/src/js/loom.js"></script>

<!-- Language Selector -->
<!-- You can add the flag by adding the attribute 'flag', and modify the shape by setting its value to circular ('circular'), rounded ('rounded'), or squared by leaving the attribute blank -->
<loom flag>
  <a loom-indicator></a>
  <ul loom-list>
    <li loom-language="us"></li>
    <li loom-language="ar"></li>
    <li loom-language="br"></li>
    <li loom-language="fr"></li>
    <li loom-language="it"></li>
  </ul>
</loom>

<!-- Plain Label Application -->
<h1 loom="Hello ?? Hola ?? Ola ?? Bonjour ? Ciao"></h1>
   
<!-- Attribute Content Applications -->
<!-- Add 'loom-' as prefix to any attribute you want to set, it will react on changes or even on its creation. (Always add the 'loom' attribute first so 'loom' can observe it.) -->
<input loom-placeholder="Enter email ?? Ingrese su correo ?? Digite seu e-mail" loom>
<input loom-value="[email protected] ?? [email protected] ?? [email protected] [email protected] ?? [email protected] ??" loom>
   
<!-- Advance Applications -->
<!-- In case you deal with a large amount of code, or even are working with a team of translators, you can always fall back on loom matching, just set the default or global phrase, and loom will match the translated phrase based on the browser language, or the selected one by the user, if it doesn't find a match, it will keep the default phrase. -->
<h1 loom="Hello Dora"></h1>
    
<script>
  const loomTranslations = {
    "Hello Dora": {
      "us": "Hello Dora",
      "ar": "Hola Dora",
      "br": "Alô Dora",
      "fr": "Bonjour Dora",
      "it": "Ciao Dora"
    },
  }
</script>

<loom class="nav-link dropdown align-items-center d-flex" flag="circular">
  <a class="nav-link dropdown-toggle btn btn-secondary p-1 align-items-center" role="button"
    data-bs-toggle="dropdown" aria-expanded="false" loom-indicator>
  </a>
  <ul class="dropdown-menu" loom-list>
    <li role="button" class="dropdown-item" loom-language="us"></li>
    <li role="button" class="dropdown-item" loom-language="ar"></li>
    <li role="button" class="dropdown-item" loom-language="br"></li>
    <li role="button" class="dropdown-item" loom-language="fr"></li>
    <li role="button" class="dropdown-item" loom-language="it"></li>
  </ul>
</loom>