Tree

<Kit.Phoenix.Roles.Tree.tree
  id="phoenix-tree-documents"
  label="Documents"
  expand_event="open_documents"
  failed="These documents couldn't load."
  items={[
    %Kit.Phoenix.Roles.Tree.Item{id: "handbook", name: "Handbook", href: "#role-tree", icon: "folder", expanded: true, children: [
      %Kit.Phoenix.Roles.Tree.Item{id: "policies", name: "Policies", href: "#role-tree", icon: "folder", expanded: true, children: [
        %Kit.Phoenix.Roles.Tree.Item{id: "leave", name: "Leave", href: "#role-tree", icon: "file-text", current: true, children: :leaf},
        %Kit.Phoenix.Roles.Tree.Item{id: "expenses", name: "Expenses", href: "#role-tree", icon: "file-text", children: :leaf}
      ]},
      %Kit.Phoenix.Roles.Tree.Item{id: "onboarding", name: "Onboarding", href: "#role-tree", icon: "file-text", children: :leaf}
    ]},
    %Kit.Phoenix.Roles.Tree.Item{id: "contracts", name: "Contracts", href: "#role-tree", icon: "folder", expanded: true, children: :loading},
    %Kit.Phoenix.Roles.Tree.Item{id: "archive", name: "Archive", href: "#role-tree", icon: "folder", expanded: true, children: :failed},
    %Kit.Phoenix.Roles.Tree.Item{id: "templates", name: "Templates", href: "#role-tree", icon: "folder", children: :unloaded},
    %Kit.Phoenix.Roles.Tree.Item{id: "read-me", name: "Read me", href: "#role-tree", icon: "file-text", children: :leaf}
  ]}
/>
<form id="phoenix-region-filters"></form>
<Kit.Phoenix.Roles.Tree.tree
  id="phoenix-tree-regions"
  label="Regions"
  expand_event="open_regions"
  selection_name="regions"
  form="phoenix-region-filters"
  items={[
    %Kit.Phoenix.Roles.Tree.Item{id: "europe", name: "Europe", href: "#role-tree", icon: "globe", expanded: true, chosen: :mixed, children: [
      %Kit.Phoenix.Roles.Tree.Item{id: "france", name: "France", href: "#role-tree", icon: "map-pin", chosen: true, children: :leaf},
      %Kit.Phoenix.Roles.Tree.Item{id: "germany", name: "Germany", href: "#role-tree", icon: "map-pin", chosen: false, children: :leaf},
      %Kit.Phoenix.Roles.Tree.Item{id: "spain", name: "Spain", href: "#role-tree", icon: "map-pin", chosen: true, children: :leaf}
    ]},
    %Kit.Phoenix.Roles.Tree.Item{id: "asia", name: "Asia", href: "#role-tree", icon: "globe", chosen: false, children: :unloaded}
  ]}
/>