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

        core.Sib.register({
            name: "customtzcld-display-user-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">${await region.name}</div>`;
                }
              }

              this.element.innerHTML = render;
            },
        });
        core.Sib.register({
            name: "customtzcld-display-user-profile-phones",
            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 = {
                phones: 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 = ``;
              for(let phone of tzcldprofile.phones) {
                let phoneType = '' ;
                if (await phone.phone_type != null) {
                  phoneType = await phone.phone_type;
                }
                if (await phone.phone != null) {
                  render +=  `<div class="phone margin-bottom-xxsmall">${await phone.phone} ${await phoneType}</div>`;
                }
              }
             
              this.element.innerHTML = render;
            },
        });
        core.Sib.register({
            name: "customtzcld-display-user-profile-emails",
            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 = {
                emails: 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 = ``;
              for(let email of tzcldprofile.emails) {
                let emailType = '' ;
                if (await email.email_type != null) {
                  emailType = await email.email_type;
                }
                if (await email.email != null) {
                  render +=  `<div class="email margin-bottom-xxsmall"><a class="link" href="mailto:${await email.email}">${await email.email}</a> ${emailType}</div>`;
                }
                
              }
             
              this.element.innerHTML = render;
            },
        });

        core.Sib.register({
          name: "customtzcld-display-user-profile-jobs",
          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 = {
              jobs: 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 = `<div class="segment full margin-top-small margin-bottom-small">`;
          for(let job of tzcldprofile.jobs) {
            if( await job.position !== null ) {
              render +=  `<div class="full padding-top-large padding-bottom-medium">`;
              if(await job.organisation !="") {
                  if(await job.link !="") {

                    render +=  `<div class="segment icontz-mdi_account-outline icon-third text-xxlarge text-top padding-right-xsmall"></div>
                    <div class="segment width-90">`;
                      render +=  `<h3 class="position text-medium padding-bottom-large whitespace-normal margin-none">${await job.position} à <a class="link text-top" target="_blank" href="${await job.link}">${await job.organisation}</a></h3>`;
                  } else {
                      render +=  `<h3 class="position text-medium padding-bottom-large whitespace-normal margin-none">${await job.position} à ${await job.organisation}</h3>`;
                  }
              } else {
                  render +=  `<h3 class="position text-medium padding-bottom-large whitespace-normal margin-none">${await job.position}</h3>`;
              }
              render +=  `</div>`;

              render +=  `<div class="full address padding-bottom-small whitespace-normal">
                    <div class="segment icontz-mdi_map-marker icon-third text-xxlarge text-top padding-right-xsmall"></div>
                    <div class="segment width-90">${await job.address} <br/> ${await job.postal_code} ${await job.city}</div>
                  </div>`;
              if ((await job.mobile_phone != '' && await job.mobile_phone_public == true ) || (await job.phone != '' && await job.phone_public == true)) {
                  render +=  `<div class="full phone padding-bottom-small ">
                    <div class="segment icontz-ic_call icon-third text-xxlarge text-top padding-right-xsmall"></div>
                    <div class="segment width-90">`;
              }
              
              if (await job.mobile_phone != '' && await job.mobile_phone_public == true) {
                  render +=  `${await job.mobile_phone}`;
              }
              if ((await job.mobile_phone != '') && (await job.phone != '') && await job.mobile_phone_public == true && await job.phone_public == true) {
                  render +=  ` - `;
              }
              if (await job.phone != '' && await job.phone_public == true) {
                  render +=  `${await job.phone}`;
              }
              if ((await job.mobile_phone != '' && await job.mobile_phone_public == true ) || (await job.phone != '' && await job.phone_public == true)) {
                  render +=  `</div>
                    </div>`;
              }
              
              if (await job.email != '' && await job.email_public == true) {
                  render +=  `<div class="full email padding-bottom-small">
                    <div class="segment icontz-mdi_email-outline icon-third text-xxlarge text-top padding-right-xsmall"></div>
                    <div class="segment width-90">
                      <a class="link text-top" href="mailto:${await job.email}">${await job.email}</a></div>
                    </div>`;
              }
              render +=  `</div>`;
            }
          }
          
          render +=  `</div>`;
          
          this.element.innerHTML = render;
          },
      });
      core.Sib.register({
          name: "customtzcld-display-user-profile-first-jobs",
          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 = {
              jobs: 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 = `<div class="segment full margin-top-small margin-bottom-small user-first-job whitespace-normal">`;
          for(let job of tzcldprofile.jobs) {
              if(await job.organisation !="") {
                  if(await job.link !="") {
                      render +=  `<h4 class="position text-medium padding-bottom-large">${await job.position} à <a class="link text-top" target="_blank" href="${await job.link}">${await job.organisation}</a></h4>`;
                  } else {
                      render +=  `<h4 class="position text-medium padding-bottom-large">${await job.position} à ${await job.organisation}</h4>`;
                  }
              } else {
                  render +=  `<h4 class="position text-medium padding-bottom-large">${await job.position}</h4>`;
              }
              
              if(await job.city !="") {
                render +=  `<div class="address padding-bottom-small"> à ${await job.city} (${await job.postal_code})</div>`;
              }

              
              break ;
          }
          
          render +=  `</div>`;
          
          this.element.innerHTML = render;
          },
      });
      core.Sib.register({
          name: "customtzcld-display-user-profile-first-job-short",
          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 = {
              jobs: 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 = `<div class="segment full margin-top-xxsmall margin-bottom-xxsmall user-first-job whitespace-normal">`;
          for(let job of tzcldprofile.jobs) {
              if(await job.organisation !="") {
                  if(await job.link !="") {
                      render +=  `<h4 class="position text-medium padding-bottom-large">${await job.position} - <a class="link text-top" target="_blank" href="${await job.link}">${await job.organisation}</a></h4>`;
                  } else {
                      render +=  `<h4 class="position text-medium padding-bottom-large">${await job.position} - ${await job.organisation}</h4>`;
                  }
              } else {
                  render +=  `<h4 class="position text-medium padding-bottom-large">${await job.position}</h4>`;
              }
              
              break ;
          }
          
          render +=  `</div>`;
          
          this.element.innerHTML = render;
          },
      });
      core.Sib.register({
          name: "customtzcld-display-user-profile-first-job-referent-short",
          use: [core.StoreMixin],
  
          empty() {
          //console.debug();
          this.element.innerHTML = "ggggg";
          },
  
          async populate() {
          this.element.innerHTML = `
          <div class="loader">
              <div></div>
              <div></div>
              <div></div>
              <div></div>
          </div>`;
          let tzcldprofile = {
              jobs: 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 = `<div class="segment full margin-top-xxsmall margin-bottom-xxsmall user-first-job whitespace-normal">`;
          for(let job of tzcldprofile.jobs) {
            if ((await job.mobile_phone != '' && await job.mobile_phone_public == true ) || (await job.phone != '' && await job.phone_public == true)) {
              render +=  `<div class="full phone padding-bottom-small ">
                <div class="segment icontz-ic_call icon-third text-xxlarge text-top padding-right-xsmall"></div>
                <div class="segment width-90">`;
            }
            
            if (await job.mobile_phone != '' && await job.mobile_phone_public == true) {
                render +=  `${await job.mobile_phone}`;
            }
            if ((await job.mobile_phone != '') && (await job.phone != '') && await job.mobile_phone_public == true && await job.phone_public == true) {
                render +=  ` - `;
            }
            if (await job.phone != '' && await job.phone_public == true) {
                render +=  `${await job.phone}`;
            }
            if ((await job.mobile_phone != '' && await job.mobile_phone_public == true ) || (await job.phone != '' && await job.phone_public == true)) {
                render +=  `</div>
                  </div>`;
            }
            
            if (await job.email != '' && await job.email_public == true) {
                render +=  `<div class="full email padding-bottom-small">
                  <div class="segment icontz-mdi_email-outline icon-third text-xxlarge text-top padding-right-xsmall"></div>
                  <div class="segment width-90">
                    <a class="link text-top" href="mailto:${await job.email}">${await job.email}</a></div>
                  </div>`;
            }
              
            break ;
          }
          
          render +=  `</div>`;
          
          this.element.innerHTML = render;
          },
      });

      
      core.Sib.register({
        name: "customtzcld-display-user-profile-first-job-circle",
        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 userEntity = {
            user: await this.resource.tzcld_profile
        }
        let tzcldUserProfile = {
            profile: await userEntity.user.jobs,
            regions: await userEntity.user.regions,
        };

        if("label" in this.element.attributes) {
            for(let ignore of this.element.attributes['label'].value.split(',')) {
            tzcldprofile[ignore.trim()] = null;
            }
        }
        let render = `<div class="segment full margin-bottom-xxsmall user-first-job-circle whitespace-normal">`;
        for(let job of tzcldUserProfile.profile["ldp:contains"]) {
            if(await job.organisation !="") {
                if(await job.link !="") {
                    render +=  `<h4 class="position text-small text-normal padding-bottom-xxsmall">${await job.position} - <a class="link" target="_blank" href="${await job.link}">${await job.organisation}</a></h4>`;
                } else {
                    render +=  `<h4 class="position text-small text-normal padding-bottom-xxsmall">${await job.position} - ${await job.organisation}</h4>`;
                }
            } else {
                render +=  `<h4 class="position text-small text-normal padding-bottom-xxsmall">${await job.position}</h4>`;
            }
            
            break ;
        }

        for(let region of await tzcldUserProfile.regions["ldp:contains"]) {
          render +=  `<div class="region segment tag color-fourth">${await region.name}</div>`;
        }
        
        render +=  `</div>`;
        
        this.element.innerHTML = render;
        },
      });

    });
});