import("./utils.js").then((utils) => {
    import(/* @vite-ignore */utils.coreVersion()).then((core) => {

        core.Sib.register({
            name: "customtzcld-list-territory-regions",
            use: [core.StoreMixin],
      
            empty() {
              //console.debug();
              this.element.innerHTML = "";
            },
      
            async populate() {
              this.element.innerHTML = `
              <div class="loader">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
              </div>`;
              let tzcldprofile = {
                regions: await this.resource["ldp:contains"]
              };
              if("label" in this.element.attributes) {
                for(let ignore of this.element.attributes['label'].value.split(',')) {
                  tzcldprofile[ignore.trim()] = null;
                }
              }
              let render = ``;
              if (tzcldprofile.regions && tzcldprofile.regions.length > 0) {
                for(let region of tzcldprofile.regions) {
                  render +=  `<div class="region segment tag color-fourth margin-top-xxxsmall margin-bottom-xxxsmall">${await region.name}</div>`;
                }
              }

              this.element.innerHTML = render;
            },
        });

        core.Sib.register({
            name: "customtzcld-list-territory-step-state",
            use: [core.StoreMixin],
      
            empty() {
              //console.debug();
              this.element.innerHTML = "";
            },
      
            async populate() {
              this.element.innerHTML = ``;
              let tzcldprofile = {
                step_state: await this.resource
              };
              if("label" in this.element.attributes) {
                for(let ignore of this.element.attributes['label'].value.split(',')) {
                  tzcldprofile[ignore.trim()] = null;
                }
              }
              let render = ``;
              if (tzcldprofile.step_state) {
                  render +=  `<div class="region segment tag color-fourth margin-top-xxxsmall margin-bottom-xxxsmall">
                    ${await tzcldprofile.step_state.name}
                  </div>`;
              }
             
              this.element.innerHTML = render;
            },
        });

        core.Sib.register({
            name: "customtzcld-list-territory-kind",
            use: [core.StoreMixin],
      
            empty() {
              //console.debug();
              this.element.innerHTML = "";
            },
      
            async populate() {
              this.element.innerHTML = ``;
              let tzcldprofile = {
                kind: await this.resource
              };
              if("label" in this.element.attributes) {
                for(let ignore of this.element.attributes['label'].value.split(',')) {
                  tzcldprofile[ignore.trim()] = null;
                }
              }
              let render = ``;
                render +=  `<div class="region segment tag color-fourth margin-top-xxxsmall margin-bottom-xxxsmall">${await tzcldprofile.kind.name}</div>`;
              
             
              this.element.innerHTML = render;
            },
        });

    });
});