@startinblox/components-ds4go 3.2.2 → 3.3.0

package/src/components/modal/ds4go-catalog-modal.ts

@@ -0,0 +1,2856 @@
+import { formatDate } from "@helpers";
+import { localized, msg } from "@lit/localize";
+import type { TemplateResultOrSymbol } from "@src/component";
+import {
+  DSPContractStorage,
+  offerKindActionHandler,
+  offerKindHandler,
+  rdf,
+  TemsObjectHandler,
+} from "@startinblox/solid-tems-shared";
+import ModalStyle from "@styles/modal/ds4go-catalog-modal.scss?inline";
+import { css, html, nothing, type TemplateResult, unsafeCSS } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+export type Ds4goCatalogModalProps = rdf.ValidM18Object;
+
+@customElement("ds4go-catalog-modal")
+@localized()
+export class Ds4goCatalogModal extends TemsObjectHandler {
+  static styles = css`
+    ${unsafeCSS(ModalStyle)}
+  `;
+
+  @property({ attribute: false, type: Object })
+  object: Ds4goCatalogModalProps["object"] = { "@id": "" };
+
+  @property({ attribute: false })
+  dspStore?: any;
+
+  @property({ attribute: false })
+  apiGatewayConfig?: any;
+
+  @property({ attribute: false })
+  participantId?: string;
+
+  @property({ attribute: false, type: Boolean })
+  displayServiceTest = true;
+
+  @state()
+  negotiationStatus:
+    | "idle"
+    | "negotiating"
+    | "pending"
+    | "granted"
+    | "failed"
+    | "transferring" = "idle";
+
+  @state()
+  negotiationError?: string;
+
+  @state()
+  contractId?: string;
+
+  @state()
+  negotiationId?: string;
+
+  @state()
+  currentState?: string;
+
+  @state()
+  attempt?: number;
+
+  @state()
+  maxAttempts?: number;
+
+  @state()
+  apiGatewayToken?: string;
+
+  @state()
+  apiGatewayError?: string;
+
+  @state()
+  gettingToken = false;
+
+  @state()
+  testingService = false;
+
+  @state()
+  testResult?: any;
+
+  @state()
+  existingAgreementChecked = false;
+
+  @state()
+  transferId?: string;
+
+  @state()
+  edrToken?: string;
+
+  @state()
+  edrEndpoint?: string;
+
+  @state()
+  showPolicySelection = false;
+
+  @state()
+  selectedPolicyIndex?: number;
+
+  @state()
+  availablePolicies?: any[];
+
+  @state()
+  transferError?: string;
+
+  @state()
+  gettingEDR = false;
+
+  @state()
+  accessingData = false;
+
+  @state()
+  dataAccessAttempt?: number;
+
+  @state()
+  dataAccessMaxAttempts?: number;
+
+  @state()
+  countdown?: number;
+
+  @state()
+  dataResult?: any;
+
+  @state()
+  dataAccessError?: string;
+
+  /**
+   * Check for existing agreement when component connects
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this._checkExistingAgreement();
+  }
+
+  /**
+   * Get localStorage key for this asset
+   * Uses combination of provider ID and dataset ID for uniqueness across providers
+   */
+  private _getStorageKey(): string {
+    const obj = this.object as any;
+    const datasetId = obj.datasetId || obj.assetId;
+    // Include provider ID to differentiate assets with same ID from different providers
+    const providerId =
+      obj.counterPartyId || obj._providerParticipantId || obj._provider || "";
+
+    // DEBUG: Log what provider info we're seeing
+    if (!datasetId) return "";
+    // Create composite key: provider-assetId
+    const key = providerId
+      ? `dsp-agreement-${providerId}-${datasetId}`
+      : `dsp-agreement-${datasetId}`;
+    return key;
+  }
+
+  /**
+   * Save agreement info to localStorage
+   */
+  private _saveAgreementInfo(
+    contractId: string,
+    negotiationId: string,
+    timestamp: number,
+  ) {
+    const key = this._getStorageKey();
+    if (key) {
+      const obj = this.object as any;
+      const agreementInfo = {
+        contractId,
+        negotiationId,
+        timestamp,
+        assetId: obj.datasetId || obj.assetId,
+        providerId:
+          obj.counterPartyId ||
+          obj._providerParticipantId ||
+          obj._provider ||
+          "",
+        providerAddress: obj.counterPartyAddress || obj._providerAddress || "",
+      };
+      localStorage.setItem(key, JSON.stringify(agreementInfo));
+    }
+  }
+
+  /**
+   * Load agreement info from localStorage
+   */
+  private _loadAgreementInfo(): {
+    contractId: string;
+    negotiationId: string;
+    timestamp: number;
+    assetId: string;
+  } | null {
+    const key = this._getStorageKey();
+    if (!key) return null;
+
+    try {
+      const stored = localStorage.getItem(key);
+      if (stored) {
+        const info = JSON.parse(stored);
+        return info;
+      }
+    } catch (error) {
+      console.error("Failed to load agreement info:", error);
+    }
+    return null;
+  }
+
+  /**
+   * Save initial contract state when negotiation starts
+   */
+  private _saveInitialContractState(negotiationId: string) {
+    try {
+      const obj = this.object as any;
+
+      // Check if contract already exists for this asset from this provider
+      const providerId = obj.counterPartyId || obj._providerParticipantId || "";
+      const existingContracts = DSPContractStorage.getByAssetAndProvider(
+        obj.assetId || obj.datasetId,
+        providerId,
+      );
+      const existingContract = existingContracts.find(
+        (c) => c.contractId === negotiationId,
+      );
+
+      if (!existingContract) {
+        // Debug: log asset object to see available properties
+
+        // Extract index endpoint URL from asset (dcat:endpointUrl)
+        const indexEndpointUrl =
+          obj["dcat:endpointUrl"] || obj.endpointUrl || obj["endpointUrl"];
+
+        const assetName = obj.name || obj.assetId || "Unknown Asset";
+
+        // Detect if this is an index asset
+        const isIndexAsset = assetName.toLowerCase().includes("index");
+
+        // Create new contract in REQUESTED state
+        DSPContractStorage.create({
+          assetId: obj.assetId || obj.datasetId,
+          datasetId: obj.datasetId || obj.assetId,
+          assetName,
+          assetDescription: obj.description,
+          providerName:
+            obj._provider || obj.provider?.name || "Unknown Provider",
+          providerAddress:
+            obj.counterPartyAddress || obj._providerAddress || "",
+          providerParticipantId:
+            obj.counterPartyId || obj._providerParticipantId || "",
+          providerColor: obj._providerColor,
+          policy: obj.policy,
+          state: "REQUESTED",
+          contractId: negotiationId,
+          // Index-specific fields
+          isIndexAsset,
+          indexEndpointUrl,
+        });
+      }
+    } catch (error) {
+      console.error(
+        "[DSP Contract Catalog] Failed to save initial contract state:",
+        error,
+      );
+    }
+  }
+
+  /**
+   * Save contract to DSP Contract Catalog for history tracking
+   */
+  private _saveToContractCatalog(contractId: string, negotiationId: string) {
+    try {
+      const obj = this.object as any;
+
+      // Debug: log asset object to see available properties for endpoint URL
+
+      // Check if contract already exists - search by contractId (negotiationId) first,
+      // then by agreementId as fallback. Filter by provider to avoid cross-provider confusion.
+      const providerId = obj.counterPartyId || obj._providerParticipantId || "";
+      const existingContracts = DSPContractStorage.getByAssetAndProvider(
+        obj.assetId || obj.datasetId,
+        providerId,
+      );
+      const existingContract = existingContracts.find(
+        (c) => c.contractId === negotiationId || c.agreementId === contractId,
+      );
+
+      // Extract index endpoint URL from asset (dcat:endpointUrl)
+      // Try multiple possible property names - the mapping config adds 'indexEndpointUrl'
+      const indexEndpointUrl =
+        obj.indexEndpointUrl ||
+        obj["dcat:endpointUrl"] ||
+        obj["dcat:endpointURL"] ||
+        obj.endpointUrl ||
+        obj["endpointUrl"] ||
+        obj.endpointURL;
+      const assetName = obj.name || obj.assetId || "Unknown Asset";
+
+      // Detect if this is an index asset
+      const isIndexAsset = assetName.toLowerCase().includes("index");
+
+      if (existingContract) {
+        // Update existing contract with index metadata
+        DSPContractStorage.updateState(existingContract.id, "FINALIZED", {
+          agreementId: contractId,
+          contractId: negotiationId,
+          isIndexAsset,
+          indexEndpointUrl,
+        });
+      } else {
+        // Create new contract entry
+        DSPContractStorage.create({
+          assetId: obj.assetId || obj.datasetId,
+          datasetId: obj.datasetId || obj.assetId,
+          assetName,
+          assetDescription: obj.description,
+          providerName:
+            obj._provider || obj.provider?.name || "Unknown Provider",
+          providerAddress:
+            obj.counterPartyAddress || obj._providerAddress || "",
+          providerParticipantId:
+            obj.counterPartyId || obj._providerParticipantId || "",
+          providerColor: obj._providerColor,
+          policy: obj.policy,
+          state: "FINALIZED",
+          contractId: negotiationId,
+          agreementId: contractId,
+          // Index-specific fields
+          isIndexAsset,
+          indexEndpointUrl,
+        });
+      }
+    } catch (error) {
+      console.error("[DSP Contract Catalog] Failed to save contract:", error);
+    }
+  }
+
+  /**
+   * Update contract state in catalog (for failures)
+   */
+  private _updateContractState(
+    negotiationId: string,
+    state: "FAILED" | "TERMINATED",
+    error?: string,
+  ) {
+    try {
+      const obj = this.object as any;
+      const providerId = obj.counterPartyId || obj._providerParticipantId || "";
+      const existingContracts = DSPContractStorage.getByAssetAndProvider(
+        obj.assetId || obj.datasetId,
+        providerId,
+      );
+      const existingContract = existingContracts.find(
+        (c) => c.contractId === negotiationId,
+      );
+
+      if (existingContract) {
+        DSPContractStorage.updateState(existingContract.id, state, { error });
+      }
+    } catch (error) {
+      console.error(
+        "[DSP Contract Catalog] Failed to update contract state:",
+        error,
+      );
+    }
+  }
+
+  /**
+   * Check if there's an existing agreement for this asset
+   */
+  private async _checkExistingAgreement() {
+    if (this.existingAgreementChecked) return;
+    this.existingAgreementChecked = true;
+
+    // Try to load from localStorage
+    const storedInfo = this._loadAgreementInfo();
+    if (storedInfo) {
+      this.contractId = storedInfo.contractId;
+      this.negotiationId = storedInfo.negotiationId;
+      this.negotiationStatus = "granted";
+      this.requestUpdate();
+    }
+
+    // Also check if DSP store has the agreement
+    try {
+      if (this.dspStore && storedInfo?.negotiationId) {
+        // Verify the agreement still exists in the store
+        try {
+          const obj = this.object as any;
+          const providerId =
+            obj.counterPartyId ||
+            obj._providerParticipantId ||
+            obj._provider ||
+            "";
+          await this.dspStore.getContractAgreement(
+            storedInfo.negotiationId,
+            providerId,
+          );
+        } catch (error) {
+          console.warn("Could not verify agreement in store:", error);
+        }
+      }
+    } catch (error) {
+      console.warn("Error checking DSP store for existing agreement:", error);
+    }
+  }
+
+  /**
+   * Clear existing agreement and allow renegotiation
+   */
+  private _renewContract() {
+    if (
+      !confirm(
+        msg(
+          "This will delete the current contract and start a fresh negotiation. Continue?",
+        ),
+      )
+    ) {
+      return;
+    }
+
+    const key = this._getStorageKey();
+    if (key) {
+      localStorage.removeItem(key);
+    }
+
+    // Also delete from DSPContractStorage - only for this provider's contract
+    const obj = this.object as any;
+    const assetId = obj?.assetId || obj?.datasetId;
+    const providerId = obj?.counterPartyId || obj?._providerParticipantId || "";
+    if (assetId) {
+      const existingContracts = DSPContractStorage.getByAssetAndProvider(
+        assetId,
+        providerId,
+      );
+      for (const contract of existingContracts) {
+        DSPContractStorage.delete(contract.id);
+      }
+    }
+
+    // Reset state to idle
+    this.negotiationStatus = "idle";
+    this.contractId = undefined;
+    this.negotiationId = undefined;
+    this.negotiationError = undefined;
+    this.apiGatewayToken = undefined;
+    this.apiGatewayError = undefined;
+    this.gettingToken = false;
+    this.testingService = false;
+    this.testResult = undefined;
+    this.existingAgreementChecked = false;
+    this.requestUpdate();
+  }
+
+  _selectPolicy(index: number) {
+    this.selectedPolicyIndex = index;
+    this.showPolicySelection = false;
+    this.requestUpdate();
+    // Automatically proceed with negotiation after selection
+    this._negotiateAccess();
+  }
+
+  _cancelPolicySelection() {
+    this.showPolicySelection = false;
+    this.selectedPolicyIndex = undefined;
+    this.availablePolicies = undefined;
+    this.requestUpdate();
+  }
+
+  _formatPolicyDetails(policy: any): string {
+    if (!policy) return "No policy details available";
+
+    const parts: string[] = [];
+
+    // Policy ID
+    if (policy["@id"]) {
+      parts.push(
+        `<div class="policy-detail"><strong>Policy ID:</strong> ${policy["@id"]}</div>`,
+      );
+    }
+
+    // Policy Type
+    if (policy["@type"]) {
+      parts.push(
+        `<div class="policy-detail"><strong>Type:</strong> ${policy["@type"]}</div>`,
+      );
+    }
+
+    // Permissions
+    const permissions = policy["odrl:permission"];
+    if (permissions) {
+      const permArray = Array.isArray(permissions)
+        ? permissions
+        : [permissions];
+      if (permArray.length > 0) {
+        parts.push(
+          '<div class="policy-detail"><strong>Permissions:</strong><ul>',
+        );
+        permArray.forEach((perm: any) => {
+          const action = perm["odrl:action"];
+          const actionStr = action?.["@id"] || action || "use";
+          parts.push(`<li>Action: ${actionStr}</li>`);
+
+          // Constraints
+          if (perm["odrl:constraint"]) {
+            const constraints = Array.isArray(perm["odrl:constraint"])
+              ? perm["odrl:constraint"]
+              : [perm["odrl:constraint"]];
+            constraints.forEach((c: any) => {
+              parts.push(
+                `<li style="margin-left: 20px;">Constraint: ${c["odrl:leftOperand"]} ${c["odrl:operator"]} ${c["odrl:rightOperand"]}</li>`,
+              );
+            });
+          }
+        });
+        parts.push("</ul></div>");
+      }
+    }
+
+    // Prohibitions
+    const prohibitions = policy["odrl:prohibition"];
+    if (prohibitions) {
+      const prohibArray = Array.isArray(prohibitions)
+        ? prohibitions
+        : [prohibitions];
+      if (prohibArray.length > 0) {
+        parts.push(
+          '<div class="policy-detail"><strong>Prohibitions:</strong><ul>',
+        );
+        prohibArray.forEach((prohib: any) => {
+          const action = prohib["odrl:action"];
+          const actionStr = action?.["@id"] || action || "unknown";
+          parts.push(`<li>Action: ${actionStr}</li>`);
+        });
+        parts.push("</ul></div>");
+      }
+    }
+
+    // Obligations
+    const obligations = policy["odrl:obligation"];
+    if (obligations) {
+      const obligArray = Array.isArray(obligations)
+        ? obligations
+        : [obligations];
+      if (obligArray.length > 0) {
+        parts.push(
+          '<div class="policy-detail"><strong>Obligations:</strong><ul>',
+        );
+        obligArray.forEach((oblig: any) => {
+          const action = oblig["odrl:action"];
+          const actionStr = action?.["@id"] || action || "unknown";
+          parts.push(`<li>Action: ${actionStr}</li>`);
+        });
+        parts.push("</ul></div>");
+      }
+    }
+
+    // Target
+    if (policy.target) {
+      parts.push(
+        `<div class="policy-detail"><strong>Target Asset:</strong> ${policy.target}</div>`,
+      );
+    }
+
+    // Assigner
+    if (policy.assigner) {
+      parts.push(
+        `<div class="policy-detail"><strong>Assigner:</strong> ${policy.assigner}</div>`,
+      );
+    }
+
+    return parts.length > 0 ? parts.join("") : "No policy details available";
+  }
+
+  async _negotiateAccess() {
+    try {
+      // Use the DSP store passed as property
+      if (!this.dspStore) {
+        throw new Error(
+          "DSP connector not configured. Please provide participant-connector-uri and participant-api-key attributes.",
+        );
+      }
+
+      const dspStore = this.dspStore;
+
+      // DEBUG: Log store configuration to verify correct store is being used
+      // Use pre-processed contract negotiation fields from the mapped Destination object
+      // These fields are extracted and processed by FederatedCatalogueStore.mapSourceToDestination()
+      const obj = this.object as any;
+      const counterPartyAddress = obj.counterPartyAddress;
+      const counterPartyId = obj.counterPartyId || this.participantId;
+      const datasetId = obj.datasetId;
+
+      // DEFENSIVE: Handle case where obj.policy might be an array or have numeric keys
+      let policies = obj.policies;
+      let rawPolicy = obj.policy;
+
+      // If obj.policy is an array, convert it to policies array
+      if (Array.isArray(rawPolicy)) {
+        console.warn(
+          "[tems-modal] obj.policy is an array! Converting to policies array.",
+        );
+
+        // Check if array object has a "target" property
+        const target = (rawPolicy as any).target;
+
+        // Filter out non-policy properties (like "target")
+        policies = rawPolicy.filter(
+          (item: any) => item && typeof item === "object" && item["@id"],
+        );
+
+        // Add target to each policy if it exists and policy doesn't have one
+        if (target) {
+          policies = policies.map((p: any) => {
+            if (!p.target && !p["odrl:target"]) {
+              return { ...p, target, "odrl:target": target };
+            }
+            return p;
+          });
+        }
+
+        rawPolicy = policies.length > 0 ? policies[0] : rawPolicy[0]; // Use first valid policy as default
+      }
+      // If obj.policy is an object with numeric keys (array-like object)
+      else if (rawPolicy && typeof rawPolicy === "object") {
+        const keys = Object.keys(rawPolicy);
+        const hasNumericKeys = keys.some((k) => /^\d+$/.test(k));
+        if (hasNumericKeys) {
+          console.warn(
+            "[tems-modal] obj.policy has numeric keys! Extracting policies array.",
+          );
+
+          // Check if object has a "target" property
+          const target = rawPolicy.target;
+
+          // Extract policies from numeric keys
+          const extractedPolicies = [];
+          for (const key in rawPolicy) {
+            if (/^\d+$/.test(key)) {
+              let policy = rawPolicy[key];
+              // Add target if it exists and policy doesn't have one
+              if (target && !policy.target && !policy["odrl:target"]) {
+                policy = { ...policy, target, "odrl:target": target };
+              }
+              extractedPolicies.push(policy);
+            }
+          }
+          if (extractedPolicies.length > 0) {
+            policies = extractedPolicies;
+            rawPolicy = extractedPolicies[0]; // Use first as default
+          }
+        }
+      }
+
+      // Check if there are multiple policies available
+
+      if (
+        policies &&
+        policies.length > 1 &&
+        this.selectedPolicyIndex === undefined
+      ) {
+        // Store policies in state for the modal to access
+        this.availablePolicies = policies;
+        // Show policy selection UI
+        this.showPolicySelection = true;
+        this.requestUpdate();
+        return;
+      }
+
+      // Use selected policy or the single policy
+      const policy =
+        this.selectedPolicyIndex !== undefined && this.availablePolicies
+          ? this.availablePolicies[this.selectedPolicyIndex]
+          : this.selectedPolicyIndex !== undefined && policies
+            ? policies[this.selectedPolicyIndex]
+            : rawPolicy;
+
+      this.selectedPolicyIndex !== undefined && this.availablePolicies
+        ? "availablePolicies[index]"
+        : this.selectedPolicyIndex !== undefined && policies
+          ? "policies[index]"
+          : "rawPolicy (fallback)";
+
+      // Validate required fields
+      if (!counterPartyAddress) {
+        throw new Error(
+          "No provider endpoint URL (counterPartyAddress) found in service object",
+        );
+      }
+
+      if (!datasetId) {
+        throw new Error("No dataset ID found in service object");
+      }
+
+      if (!policy) {
+        throw new Error("No policy found for dataset");
+      }
+
+      // FINAL SAFEGUARD: Ensure policy doesn't have numeric keys
+      if (policy && typeof policy === "object") {
+        const policyKeys = Object.keys(policy);
+        const hasNumericKeys = policyKeys.some((k) => /^\d+$/.test(k));
+        if (hasNumericKeys) {
+          console.error(
+            "[tems-modal] ERROR: Policy still has numeric keys after processing!",
+            policy,
+          );
+          throw new Error(
+            "Invalid policy structure detected. Policy must be a single object, not an array.",
+          );
+        }
+      }
+
+      if (!counterPartyId) {
+        throw new Error(
+          "No participant ID configured. Please provide participant-id attribute or ensure dspace:participantId is in the service data.",
+        );
+      }
+
+      // Start negotiation
+      this.negotiationStatus = "negotiating";
+      this.negotiationError = undefined;
+      this.requestUpdate();
+
+      // The policy already has the target field set by FederatedCatalogueStore
+      // and all urn:tems: prefixes have been stripped
+      const processedPolicy = policy;
+
+      // Initiate contract negotiation
+      const negotiationId = await dspStore.negotiateContract(
+        counterPartyAddress,
+        datasetId,
+        processedPolicy,
+        counterPartyId,
+      );
+
+      this.negotiationId = negotiationId;
+      this.negotiationStatus = "pending";
+      this.requestUpdate();
+
+      // Save initial contract state to catalog
+      this._saveInitialContractState(negotiationId);
+
+      // Poll for negotiation status
+      await this._pollNegotiationStatus(dspStore, negotiationId);
+    } catch (error) {
+      console.error("Contract negotiation failed:", error);
+      this.negotiationStatus = "failed";
+      this.negotiationError = (error as Error).message;
+
+      // Update contract state if negotiation was initiated
+      if (this.negotiationId) {
+        this._updateContractState(
+          this.negotiationId,
+          "FAILED",
+          this.negotiationError,
+        );
+      }
+
+      this.requestUpdate();
+    }
+  }
+
+  async _pollNegotiationStatus(dspStore: any, negotiationId: string) {
+    const maxAttempts = 8;
+    const pollInterval = 5000;
+
+    for (let attempt = 0; attempt < maxAttempts; attempt++) {
+      try {
+        const status = await dspStore.getNegotiationStatus(negotiationId);
+
+        this.currentState = status.state;
+        this.attempt = attempt + 1;
+        this.maxAttempts = maxAttempts;
+        this.requestUpdate();
+
+        if (status.state === "FINALIZED" || status.state === "AGREED") {
+          // Retrieve contract agreement (pass providerId to properly key the agreement)
+          const obj = this.object as any;
+          const providerId =
+            obj.counterPartyId ||
+            obj._providerParticipantId ||
+            obj._provider ||
+            "";
+          try {
+            const agreement = await dspStore.getContractAgreement(
+              negotiationId,
+              providerId,
+            );
+            this.contractId = agreement
+              ? agreement["@id"]
+              : status.contractAgreementId || negotiationId;
+          } catch (error) {
+            console.error("Failed to retrieve contract agreement:", error);
+            this.contractId = status.contractAgreementId || negotiationId;
+          }
+
+          // Save agreement info to localStorage for persistence
+          if (this.contractId && negotiationId) {
+            this._saveAgreementInfo(this.contractId, negotiationId, Date.now());
+          }
+
+          // Save contract to DSP Contract Storage for catalog display
+          if (this.contractId) {
+            this._saveToContractCatalog(this.contractId, negotiationId);
+          }
+
+          this.negotiationStatus = "granted";
+          this.requestUpdate();
+          return;
+        }
+
+        if (status.state === "TERMINATED") {
+          this.negotiationStatus = "failed";
+          this.negotiationError =
+            status.errorDetail || "Negotiation terminated";
+          this._updateContractState(
+            negotiationId,
+            "TERMINATED",
+            this.negotiationError,
+          );
+          this.requestUpdate();
+          return;
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, pollInterval));
+      } catch (error) {
+        console.error(
+          `Error polling negotiation status (attempt ${attempt + 1}):`,
+          error,
+        );
+        await new Promise((resolve) => setTimeout(resolve, pollInterval));
+      }
+    }
+
+    // Timeout
+    this.negotiationStatus = "failed";
+    this.negotiationError =
+      "Negotiation timeout after 40 seconds - may still be processing on provider side";
+    this._updateContractState(negotiationId, "FAILED", this.negotiationError);
+    this.requestUpdate();
+  }
+
+  /**
+   * Get the current OIDC access token from the session.
+   * This retrieves the token from localStorage where oidc-client stores it.
+   */
+  _getOidcAccessToken(apiGatewayConfig: any): string {
+    const { oidcAuthority, oidcClientId } = apiGatewayConfig;
+
+    if (!oidcAuthority || !oidcClientId) {
+      throw new Error(
+        "OIDC configuration (oidcAuthority, oidcClientId) required for API Gateway",
+      );
+    }
+
+    // The OIDC library stores the user session in localStorage
+    const storageKey = `oidc.user:${oidcAuthority}:${oidcClientId}`;
+    const stored = localStorage.getItem(storageKey);
+
+    if (!stored) {
+      throw new Error("No OIDC session found. Please log in first.");
+    }
+
+    try {
+      const oidcUser = JSON.parse(stored);
+
+      // Check if token is expired
+      if (oidcUser.expires_at && oidcUser.expires_at * 1000 < Date.now()) {
+        throw new Error("OIDC token has expired. Please log in again.");
+      }
+
+      if (!oidcUser.access_token) {
+        throw new Error("No access token in OIDC session");
+      }
+
+      return oidcUser.access_token;
+    } catch (e) {
+      if (e instanceof SyntaxError) {
+        throw new Error("Failed to parse OIDC session data");
+      }
+      throw e;
+    }
+  }
+
+  async _getApiGatewayToken(
+    apiGatewayConfig: any,
+    accessToken: string,
+    contractAgreementId: string,
+  ): Promise<string> {
+    const { apiGatewayBaseUrl } = apiGatewayConfig;
+
+    if (!apiGatewayBaseUrl) {
+      throw new Error("API Gateway base URL not configured");
+    }
+
+    // Use the TEMS API Gateway token endpoint
+    const tokenUrl = `${apiGatewayBaseUrl}/temsapigateway/token`;
+
+    const response = await fetch(tokenUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify({
+        agreementId: contractAgreementId,
+      }),
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error("❌ Failed to get API Gateway token:", {
+        status: response.status,
+        statusText: response.statusText,
+        errorText,
+      });
+      throw new Error(
+        `Failed to get API Gateway token: ${response.status} - ${errorText}`,
+      );
+    }
+
+    const data = await response.json();
+    // Support multiple possible field names for the token
+    const token = data.apiGatewayToken || data.token || data.access_token;
+
+    if (!token) {
+      console.error("❌ No token found in response:", data);
+      throw new Error(
+        "API Gateway response did not contain a token. Response keys: " +
+          Object.keys(data).join(", "),
+      );
+    }
+
+    return token;
+  }
+
+  async _getGatewayToken() {
+    try {
+      this.gettingToken = true;
+      this.apiGatewayError = undefined;
+      this.requestUpdate();
+
+      // Use API Gateway configuration passed as property
+      if (!this.apiGatewayConfig) {
+        throw new Error(
+          "API Gateway not configured. Please provide api-gateway-config attribute.",
+        );
+      }
+
+      const apiGatewayConfig = this.apiGatewayConfig;
+
+      if (!this.contractId) {
+        throw new Error(
+          "No contract ID available. Please complete contract negotiation first.",
+        );
+      }
+
+      // Step 1: Get access token from current OIDC session
+      const oidcAccessToken = this._getOidcAccessToken(apiGatewayConfig);
+
+      // Step 2: Get API Gateway token using the contract agreement ID
+      const apiGatewayToken = await this._getApiGatewayToken(
+        apiGatewayConfig,
+        oidcAccessToken,
+        this.contractId,
+      );
+
+      this.apiGatewayToken = apiGatewayToken;
+      this.requestUpdate();
+    } catch (error) {
+      console.error("Failed to get API Gateway token:", error);
+      this.apiGatewayError = (error as Error).message;
+    } finally {
+      this.gettingToken = false;
+      this.requestUpdate();
+    }
+  }
+
+  async _testService() {
+    try {
+      this.testingService = true;
+      this.apiGatewayError = undefined;
+      this.testResult = undefined;
+      this.requestUpdate();
+
+      // Check if we have the API Gateway token
+      if (!this.apiGatewayToken) {
+        throw new Error(
+          'No API Gateway token available. Please click "Get gateway token" first.',
+        );
+      }
+
+      const apiGatewayToken = this.apiGatewayToken;
+
+      // Step 3: Access the service via API Gateway
+      // The service endpoint URL from dcat:endpointURL already includes the full API Gateway path
+      const serviceEndpointUrl = (this.object as any).url;
+
+      if (!serviceEndpointUrl) {
+        throw new Error(
+          "No service endpoint URL found in service object. " +
+            "The dcat:service in the self-description must include a dcat:endpointURL field. " +
+            'Example: "dcat:endpointURL": "https://participant-a.tems-dataspace.eu/apigateway/v2/store/inventory"',
+        );
+      }
+
+      // The dcat:endpointURL already points to the correct URL with API Gateway included
+      // No need to reconstruct - use it directly
+
+      const response = await fetch(serviceEndpointUrl, {
+        method: "GET",
+        headers: {
+          "X-API-Gateway-Token": apiGatewayToken,
+        },
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(
+          `Failed to fetch data via API Gateway: ${response.status} - ${errorText}`,
+        );
+      }
+
+      const data = await response.json();
+      this.testResult = data;
+    } catch (error) {
+      console.error("❌ Service test failed:", error);
+      this.apiGatewayError = (error as Error).message;
+    } finally {
+      this.testingService = false;
+      this.requestUpdate();
+    }
+  }
+
+  // ============================================================================
+  // EDR (Endpoint Data Reference) Data Access Methods
+  // ============================================================================
+  // These methods provide UI coordination for EDR-based data access when no
+  // API Gateway is configured. They delegate business logic to the
+  // DataspaceConnectorStore (sib-core) and focus on UI state management.
+  //
+  // Architecture:
+  // - tems-modal: UI layer (state, progress, errors, user interaction)
+  // - dspStore (DataspaceConnectorStore): Business logic (HTTP calls, polling, auth)
+  //
+  // Flow:
+  // 1. _initiateEDRTransfer() → dspStore.initiateEDRTransfer() + getEDRToken()
+  // 2. _accessData() → _fetchDataWithLongPolling() → dspStore.fetchWithEDRToken()
+  // ============================================================================
+
+  /**
+   * Initiate EDR transfer for HTTP Pull data access
+   * Delegates to the DataspaceConnectorStore
+   */
+  async _initiateEDRTransfer() {
+    try {
+      this.gettingEDR = true;
+      this.transferError = undefined;
+      this.requestUpdate();
+
+      // Use the DSP store passed as property
+      if (!this.dspStore) {
+        throw new Error("DSP connector not configured.");
+      }
+
+      const obj = this.object as any;
+      const assetId = obj.datasetId || obj.assetId;
+      const counterPartyAddress = obj.counterPartyAddress;
+
+      if (!assetId) {
+        throw new Error("No asset ID found in service object");
+      }
+
+      if (!counterPartyAddress) {
+        throw new Error("No provider endpoint address found");
+      }
+
+      if (!this.contractId) {
+        throw new Error(
+          "No contract agreement available. Please complete contract negotiation first.",
+        );
+      }
+
+      // Get providerParticipantId to properly key the agreement mapping
+      const providerId =
+        obj.counterPartyId || obj._providerParticipantId || obj._provider || "";
+
+      // Store delegates to DataspaceConnectorStore.initiateEDRTransfer()
+      // which handles the transfer process creation
+      const transferId = await this.dspStore.initiateEDRTransfer(
+        assetId,
+        counterPartyAddress,
+        this.contractId,
+        providerId,
+      );
+
+      // Store delegates to DataspaceConnectorStore.getEDRToken()
+      // which handles polling (10 attempts × 2s) and returns EDR data address
+      const edrDataAddress = await this.dspStore.getEDRToken(transferId);
+
+      if (!edrDataAddress) {
+        throw new Error("Failed to retrieve EDR token");
+      }
+
+      // Transform localhost endpoint to public provider address if needed
+      let transformedEndpoint = edrDataAddress.endpoint;
+      if (
+        transformedEndpoint.includes("localhost") ||
+        transformedEndpoint.includes("127.0.0.1")
+      ) {
+        const providerBase = counterPartyAddress.replace("/protocol", "");
+        const localUrl = new URL(transformedEndpoint);
+        transformedEndpoint = `${providerBase}${localUrl.pathname}${localUrl.search}`;
+      }
+
+      // Store the EDR information for data access
+      this.transferId = transferId;
+      this.edrToken = edrDataAddress.authorization;
+      this.edrEndpoint = transformedEndpoint;
+    } catch (error) {
+      console.error("❌ EDR transfer failed:", error);
+      this.transferError = (error as Error).message;
+    } finally {
+      this.gettingEDR = false;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Access data using EDR token with long-polling strategy
+   * Delegates to the DataspaceConnectorStore for actual data fetching
+   */
+  async _accessData() {
+    try {
+      this.accessingData = true;
+      this.dataAccessError = undefined;
+      this.dataResult = undefined;
+      this.requestUpdate();
+
+      if (!this.dspStore) {
+        throw new Error("DSP connector not configured.");
+      }
+
+      if (!this.edrToken || !this.edrEndpoint) {
+        throw new Error(
+          'No EDR token available. Please click "Get EDR Token" first.',
+        );
+      }
+
+      const obj = this.object as any;
+      const counterPartyAddress = obj.counterPartyAddress;
+
+      // Transform localhost endpoint to public provider address if needed
+      let transformedEndpoint = this.edrEndpoint;
+      if (
+        transformedEndpoint.includes("localhost") ||
+        transformedEndpoint.includes("127.0.0.1")
+      ) {
+        const providerBase = counterPartyAddress.replace("/protocol", "");
+        const localUrl = new URL(transformedEndpoint);
+        transformedEndpoint = `${providerBase}${localUrl.pathname}${localUrl.search}`;
+      }
+
+      // Build EDR data address object for the store
+      const edrDataAddress = {
+        endpoint: transformedEndpoint,
+        authorization: this.edrToken,
+        authType: "bearer",
+        type: "https://w3id.org/idsa/v4.1/HTTP",
+        endpointType: "https://w3id.org/idsa/v4.1/HTTP",
+      };
+
+      // Implement UI-level long-polling with progress feedback
+      // The store's fetchWithEDRToken handles the actual HTTP request
+      const data = await this._fetchDataWithLongPolling(edrDataAddress);
+
+      this.dataResult = data;
+    } catch (error) {
+      console.error("❌ Data access failed:", error);
+      this.dataAccessError = (error as Error).message;
+    } finally {
+      this.accessingData = false;
+      this.dataAccessAttempt = undefined;
+      this.dataAccessMaxAttempts = undefined;
+      this.countdown = undefined;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * Fetch data with long-polling retry logic and UI progress updates
+   * Delegates actual fetching to DataspaceConnectorStore.fetchWithEDRToken()
+   */
+  async _fetchDataWithLongPolling(
+    edrDataAddress: any,
+    maxAttempts = 12, // 12 attempts over 1 minute
+    pollInterval = 5000, // 5 seconds between attempts
+  ): Promise<any> {
+    this.dataAccessMaxAttempts = maxAttempts;
+
+    for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+      this.dataAccessAttempt = attempt;
+      this.requestUpdate();
+
+      try {
+        // Delegate to store's fetchWithEDRToken method
+        // Store handles the actual HTTP request with proper headers
+        const data = await this.dspStore.fetchWithEDRToken(edrDataAddress);
+
+        if (data) {
+          return data;
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        console.warn(
+          `⚠️ Data access attempt ${attempt}/${maxAttempts} failed:`,
+          errorMessage,
+        );
+
+        // Check for specific error types that might resolve with waiting
+        const isRetryableError =
+          errorMessage.includes("404") ||
+          errorMessage.includes("503") ||
+          errorMessage.includes("502") ||
+          errorMessage.includes("timeout") ||
+          errorMessage.includes("not ready") ||
+          errorMessage.includes("processing");
+
+        // If this is the last attempt or not a retryable error, throw
+        if (attempt === maxAttempts || !isRetryableError) {
+          console.error(`❌ Final data access attempt failed: ${errorMessage}`);
+          throw error;
+        }
+      }
+
+      // Wait before next attempt (except on the last iteration)
+      if (attempt < maxAttempts) {
+        // Show countdown in UI during wait
+        for (let countdown = pollInterval / 1000; countdown > 0; countdown--) {
+          this.countdown = countdown;
+          this.requestUpdate();
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }
+        this.countdown = undefined;
+      }
+    }
+
+    throw new Error(
+      `Data access failed after ${maxAttempts} attempts over ${(maxAttempts * pollInterval) / 1000} seconds`,
+    );
+  }
+
+  _renderBoolean(field: boolean): TemplateResultOrSymbol {
+    if (field) {
+      return html`<tems-badge class="badges" type="success" size="sm"
+        ><icon-ci-check></icon-ci-check
+      ></tems-badge>`;
+    }
+    return html`<tems-badge class="badges" type="error" size="sm"
+      ><icon-material-symbols-close-rounded></icon-material-symbols-close-rounded
+    ></tems-badge>`;
+  }
+
+  _renderDivision(type: string, label: string): TemplateResult {
+    return html`<tems-division type="${type}"
+      ><div>${unsafeHTML(String(label))}</div></tems-division
+    >`;
+  }
+
+  _renderBadge(type?: string, label?: string): TemplateResultOrSymbol {
+    if (!label) return nothing;
+    return html`<tems-badge
+      type=${type}
+      label=${label}
+      size="sm"
+    ></tems-badge>`;
+  }
+
+  _renderButton(
+    iconLeft?: TemplateResult,
+    size?: string,
+    label?: string,
+    type?: string,
+    url?: string,
+    iconRight?: TemplateResult,
+    disabled?: boolean,
+  ): TemplateResultOrSymbol {
+    if (!label) return nothing;
+    return html`<tems-button
+      .iconLeft=${ifDefined(iconLeft)}
+      .iconRight=${ifDefined(iconRight)}
+      size=${ifDefined(size)}
+      label=${ifDefined(label)}
+      type=${ifDefined(type)}
+      url=${ifDefined(url)}
+      disabled=${disabled || nothing}
+    ></tems-button>`;
+  }
+
+  _renderIframe(url: string): TemplateResult {
+    return html`<iframe src="${url}"></iframe>`;
+  }
+
+  _renderKindBadgeComponent(
+    object: rdf.DataOffer | undefined = undefined,
+  ): TemplateResultOrSymbol {
+    const data_offer = object || this.object;
+    if (!data_offer.offers || data_offer.offers.length === 0) return nothing;
+
+    return html`<div class="badges">
+      ${data_offer.offers.map((offer: rdf.Offer) =>
+        this._renderBadge("information", offerKindHandler(offer.kind)),
+      )}
+    </div> `;
+  }
+
+  _renderCategoryBadgeComponent(): TemplateResultOrSymbol {
+    const badgeType: string = this.isType(rdf.RDFTYPE_DATAOFFER)
+      ? "default"
+      : "information";
+    if (!this.object.categories || this.object.categories.length === 0)
+      return nothing;
+
+    return html`<div class="badges">
+      ${this.object.categories.length === 0
+        ? this._renderBadge(badgeType, msg("No category"))
+        : this.object.categories.map((category: rdf.NamedResource) =>
+            this._renderBadge(badgeType, category.name || ""),
+          )}
+    </div>`;
+  }
+
+  _renderDescription(): TemplateResult {
+    return this._renderDivision("body-m", this.object.description);
+  }
+
+  _renderTitleValueDivision(
+    title: string,
+    value: string | undefined,
+  ): TemplateResultOrSymbol {
+    if (!value) return nothing;
+    return html`${this._renderDivision("h4", title)}
+    ${this._renderDivision("body-m", value)}`;
+  }
+
+  _renderLicences(): TemplateResult {
+    return html`<div>
+      ${this.object.licences.length !== 0
+        ? html`${this._renderDivision("h4", msg("Licences"))}
+          ${this.object.licences.map((licence: rdf.Licence) => {
+            if (!licence.name) return nothing;
+            return html`<tems-division type="body-m">
+              ${licence.url
+                ? html`<a href=${licence.url} target="_blank"
+                    >${licence.name || msg("See more")}
+                    <icon-mingcute-arrow-right-up-line></icon-mingcute-arrow-right-up-line
+                  ></a>`
+                : html`${licence.name}`}</tems-division
+            > `;
+          })}`
+        : html`${this._renderDivision("h4", msg("Licences"))}
+            <tems-division type="body-m">-</tems-division>`}
+    </div>`;
+  }
+
+  _renderBgImg(imgSrc: string, className: string) {
+    if (!imgSrc) {
+      return nothing;
+    }
+    return html`<div
+      class="${className}"
+      style="background-image: url('${imgSrc}')"
+    ></div>`;
+  }
+
+  _renderImageSingle(): TemplateResultOrSymbol {
+    if (!this.object.image && !this.object.images) {
+      return nothing;
+    }
+
+    const images = [];
+
+    if (this.object.image) {
+      images.push(this.object.image);
+    }
+
+    if (this.object.images) {
+      images.push(...this.object.images);
+    }
+
+    return html`<div class="default-image-grid">
+      ${images.map((image: rdf.Image) => {
+        if (image.iframe && image.url) {
+          return html`${this._renderIframe(image.url)}`;
+        }
+
+        return html`<img
+        class="default-img"
+        src=${image.url}
+        alt=${ifDefined(image.name)}
+      ></div>`;
+      })}
+    </div>`;
+  }
+
+  _renderImageArray(): TemplateResultOrSymbol {
+    const iframe = this.object.images.filter(
+      (image: rdf.Image) => image.iframe && image.url,
+    );
+    if (iframe.length > 0) {
+      return html`${this._renderIframe(iframe[0].url)}`;
+    }
+
+    const filteredImages = this.object.images.filter(
+      (image: rdf.Image) => !image.iframe && image.url,
+    );
+
+    const imgCount = filteredImages.length;
+
+    switch (imgCount) {
+      case 0:
+        return nothing;
+      case 1:
+        return html`<div
+          class="main-img"
+          style="background-image: url(${filteredImages[0].url})"
+        ></div>`;
+      case 2:
+        return html`<div class="main-img case-2">
+          ${this._renderBgImg(filteredImages[0].url, "full-width")}
+          ${this._renderBgImg(filteredImages[1].url, "full-width")}
+        </div>`;
+      case 3:
+        return html`<div class="main-img case-3">
+          ${this._renderBgImg(filteredImages[0].url, "full-width")}
+          <div class="img-inner-row">
+            <div class="double-image">
+              ${this._renderBgImg(filteredImages[1].url, "")}
+              ${this._renderBgImg(filteredImages[2].url, "")}
+            </div>
+          </div>
+        </div>`;
+      default:
+        return html`<div class="main-img case-4">
+          ${this._renderBgImg(filteredImages[0].url, "full-width")}
+          <div class="img-inner-row">
+            <div class="double-image">
+              ${this._renderBgImg(filteredImages[1].url, "")}
+              ${this._renderBgImg(filteredImages[2].url, "")}
+            </div>
+            ${this._renderBgImg(filteredImages[3].url, "last-img")}
+          </div>
+        </div>`;
+    }
+  }
+
+  _renderAboutProvider(): TemplateResultOrSymbol {
+    if (this.object.providers.length === 0) return nothing;
+
+    return html`${this._renderDivision("h4", msg("Providers"))}
+    ${this.object.providers.map(
+      (provider: rdf.Provider) =>
+        html`<div>
+            <img
+              src="${provider.image?.url}"
+              alt=${provider.name}
+              class="default-img"
+            />
+          </div>
+          ${this._renderTitleValueDivision(
+            msg("About the providers"),
+            provider.description || msg("No description provided"),
+          )}`,
+    )}`;
+  }
+
+  _renderCompatibleServices(): TemplateResultOrSymbol {
+    if (this.object.services.length === 0) return nothing;
+
+    return html`${this._renderDivision(
+      "h4",
+      this.isType(rdf.RDFTYPE_PROVIDER)
+        ? msg("Available Services")
+        : msg("Compatible Services"),
+    )}
+    ${this.object.services.map(
+      (service: rdf.Service) =>
+        html`<ds4go-card-dataspace-catalog
+          type="vertical"
+          header=${ifDefined(service.name)}
+          background-img=${ifDefined(service.images?.[0]?.url)}
+          full-size=""
+          content=${ifDefined(service.description)}
+        ></ds4go-card-dataspace-catalog>`,
+    )}`;
+  }
+
+  _renderCompatibleDataOffers(): TemplateResultOrSymbol {
+    if (this.object.data_offers.length === 0) return nothing;
+
+    return html`${this._renderDivision("h4", msg("Available Data Offers"))}
+    ${this.object.data_offers.map(
+      (data_offer: rdf.DataOffer) =>
+        html`<ds4go-card-dataspace-catalog
+          type="vertical"
+          header=${ifDefined(data_offer.name)}
+          background-img=${ifDefined(data_offer.image?.url)}
+          full-size=""
+          content=${ifDefined(data_offer.description)}
+          .tags=${[{ name: data_offer.name, type: "information" }]}
+        ></ds4go-card-dataspace-catalog>`,
+    )}`;
+  }
+  // tags=${this._renderKindBadgeComponent(data_offer)}
+
+  _renderOffers(): TemplateResult {
+    return html`${this._renderDivision("h4", msg("Offers"))}
+    ${this.object.offers.map((offer: rdf.Offer) => {
+      const msgSubscribe: string = offerKindActionHandler(offer.kind);
+
+      if (!msgSubscribe) return nothing;
+      return html`<ds4go-card-dataspace-catalog
+        type="vertical"
+        header=${ifDefined(offer.name)}
+        content=${ifDefined(offer.description)}
+        ><div>
+          ${this._renderButton(
+            undefined,
+            "sm",
+            msgSubscribe,
+            "primary",
+            undefined,
+            undefined,
+            true,
+          )}
+        </div></ds4go-card-dataspace-catalog
+      >`;
+    })}`;
+  }
+
+  _renderDataOfferBadgeRow(): TemplateResult {
+    return html`<div class="badge-row flex flex-row">
+      ${this.renderTemplateWhenWith(["offers"], this._renderKindBadgeComponent)}
+      ${this.renderTemplateWhenWith(
+        ["categories"],
+        this._renderCategoryBadgeComponent,
+      )}
+    </div>`;
+  }
+
+  _renderColumns(...columns: TemplateResultOrSymbol[]): TemplateResultOrSymbol {
+    const filteredColumns = columns.filter((col) => col !== nothing);
+
+    if (filteredColumns.length === 1) {
+      return columns[0];
+    }
+
+    return html`<div class="multiple-columns flex flex-row flex-1">
+      ${filteredColumns.map(
+        (col) => html`<div class="half flex flex-column wrap">${col}</div>`,
+      )}
+    </div>`;
+  }
+
+  _renderApiAccessGuide(): TemplateResultOrSymbol {
+    // Only show for services with API Gateway configuration
+    if (!this.apiGatewayConfig) {
+      return nothing;
+    }
+
+    const obj = this.object as any;
+    const serviceUrl = obj.url;
+    const agreementId = this.contractId || "<your-agreement-id>";
+
+    const { keycloakUrl, realm, clientId, apiGatewayBaseUrl } =
+      this.apiGatewayConfig;
+
+    return html`
+      <div style="margin-top: 16px; padding: 16px; background: #f5f5f5; border-radius: 8px; font-family: monospace; font-size: 0.9em;">
+        ${this._renderDivision("h4", msg("API Access Guide"))}
+
+        <div style="margin-bottom: 16px;">
+          <strong>Step 1: Get Keycloak Access Token</strong>
+          <pre style="background: #fff; padding: 12px; border-radius: 4px; overflow-x: auto; margin-top: 8px;"><code>curl -X POST '${keycloakUrl}/realms/${realm}/protocol/openid-connect/token' \\
+  -H 'Content-Type: application/x-www-form-urlencoded' \\
+  -d 'grant_type=password' \\
+  -d 'client_id=${clientId}' \\
+  -d 'client_secret=<your-client-secret>' \\
+  -d 'username=<your-username>' \\
+  -d 'password=<your-password>' \\
+  -d 'scope=openid'</code></pre>
+          <div style="margin-top: 8px; color: #666; font-size: 0.9em;">
+            Response: <code>{ "access_token": "eyJhbGc...", ... }</code>
+          </div>
+        </div>
+
+        <div style="margin-bottom: 16px;">
+          <strong>Step 2: Get API Gateway Token</strong>
+          <pre style="background: #fff; padding: 12px; border-radius: 4px; overflow-x: auto; margin-top: 8px;"><code>curl -X POST '${apiGatewayBaseUrl}/token' \\
+  -H 'Content-Type: application/json' \\
+  -H 'Authorization: Bearer <access_token_from_step_1>' \\
+  -d '{
+    "agreementId": "${agreementId}"
+  }'</code></pre>
+          <div style="margin-top: 8px; color: #666; font-size: 0.9em;">
+            Response: <code>{ "apiGatewayToken": "xxx...", ... }</code>
+          </div>
+        </div>
+
+        <div style="margin-bottom: 16px;">
+          <strong>Step 3: Call the Service</strong>
+          <pre style="background: #fff; padding: 12px; border-radius: 4px; overflow-x: auto; margin-top: 8px;"><code>curl -X GET '${serviceUrl || "<service-endpoint>"}' \\
+  -H 'X-API-Gateway-Token: <apiGatewayToken_from_step_2>'</code></pre>
+          <div style="margin-top: 8px; color: #666; font-size: 0.9em;">
+            ${
+              this.negotiationStatus === "granted" && this.contractId
+                ? html`✅ <strong>Agreement ID:</strong>
+                    <code>${this.contractId}</code>`
+                : html`⚠️ You need to complete contract negotiation first to get
+                  an agreement ID.`
+            }
+          </div>
+        </div>
+
+        ${
+          this.apiGatewayToken
+            ? html`
+                <div
+                  style="margin-top: 16px; padding: 12px; background: #e8f5e9; border-radius: 4px;"
+                >
+                  <strong>🎉 Your Current Session:</strong>
+                  <div style="margin-top: 8px;">
+                    <code
+                      style="word-break: break-all; display: block; background: #fff; padding: 8px; border-radius: 4px;"
+                    >
+                      X-API-Gateway-Token:
+                      ${this.apiGatewayToken.substring(0, 40)}...
+                    </code>
+                  </div>
+                </div>
+              `
+            : nothing
+        }
+      </div>
+    `;
+  }
+
+  _renderServiceSpecificModal(): TemplateResultOrSymbol {
+    return html` ${this._renderColumns(
+      html`${this.renderTemplateWhenWith(["long_description"], () =>
+        this._renderTitleValueDivision(
+          msg("Features & Functionalities"),
+          this.object.long_description,
+        ),
+      )}${this.renderTemplateWhenWith(
+        [["is_in_app", "is_external", "is_api"]],
+        () =>
+          html`${this._renderDivision("h4", msg("Installation Possible"))}
+            <div class="badges">
+              ${this.renderTemplateWhenWith(
+                ["is_in_app"],
+                () =>
+                  html`${this._renderBadge("success", msg("In-App"))}</div>`,
+              )}
+              ${this.renderTemplateWhenWith(
+                ["is_external"],
+                () =>
+                  html`${this._renderBadge("success", msg("External"))}</div>`,
+              )}
+              ${this.renderTemplateWhenWith(
+                ["is_api"],
+                () => html`${this._renderBadge("success", msg("API"))}</div>`,
+              )}
+            </div>`,
+      )}${this.renderTemplateWhenWith(
+        ["developper", "developper.url"],
+        () =>
+          html`${this._renderDivision("h4", msg("Developper"))}
+            <img
+              src="${this.object.developper.url}"
+              alt=${this.object.developper.name}
+              class="default-img"
+            />`,
+      )}${this.renderTemplateWhenWith(["release_date"], () =>
+        this._renderTitleValueDivision(
+          msg("Release Date"),
+          formatDate(this.object.release_date),
+        ),
+      )}${this.renderTemplateWhenWith(["last_update"], () =>
+        this._renderTitleValueDivision(
+          msg("Last Update"),
+          formatDate(this.object.last_update),
+        ),
+      )}${this.renderTemplateWhenWith(["url"], () =>
+        this._renderButton(
+          undefined,
+          "sm",
+          "Access the service",
+          "outline-gray",
+          this.object.url,
+        ),
+      )}${this.renderTemplateWhenWith(["documentation_url"], () =>
+        this._renderButton(
+          undefined,
+          "sm",
+          "Read the full documentation",
+          "outline-gray",
+          this.object.documentation_url,
+        ),
+      )}
+      ${this._renderPolicyDescription()} ${this._renderAgreementInfo()}
+      ${this._renderApiAccessGuide()} ${this._renderApiTestingSection()}
+      ${this._renderEDRDataAccessSection()}`,
+    )}`;
+  }
+
+  _renderPolicyDescription(): TemplateResultOrSymbol {
+    const obj = this.object as any;
+    let policy = obj.policy;
+    let policies = obj.policies;
+
+    // DEFENSIVE: Handle case where obj.policy might be an array
+    if (Array.isArray(policy)) {
+      // Extract valid policies from array
+      const extractedPolicies = policy.filter(
+        (item: any) => item && typeof item === "object" && item["@id"],
+      );
+      if (extractedPolicies.length > 0) {
+        policies = extractedPolicies;
+        policy = extractedPolicies[0];
+      }
+    }
+    // DEFENSIVE: Handle case where obj.policy has numeric keys
+    else if (policy && typeof policy === "object") {
+      const keys = Object.keys(policy);
+      const hasNumericKeys = keys.some((k) => /^\d+$/.test(k));
+      if (hasNumericKeys) {
+        const extractedPolicies = [];
+        for (const key in policy) {
+          if (/^\d+$/.test(key)) {
+            extractedPolicies.push(policy[key]);
+          }
+        }
+        if (extractedPolicies.length > 0) {
+          policies = extractedPolicies;
+          policy = extractedPolicies[0];
+        }
+      }
+    }
+
+    // Check if we have multiple policies
+    const hasMultiplePolicies =
+      policies && Array.isArray(policies) && policies.length > 1;
+
+    // Only show if there's a policy
+    if (!policy && (!policies || policies.length === 0)) {
+      return nothing;
+    }
+
+    return html`
+      <div
+        style="margin-top: 24px; padding: 16px; background: #f0f7ff; border-radius: 8px; border: 1px solid #d0e7ff;"
+      >
+        ${hasMultiplePolicies
+          ? html`
+              ${this._renderDivision("h4", msg("Access Policies"))}
+              <div
+                style="margin-bottom: 12px; color: #0066cc; font-size: 0.9em;"
+              >
+                ${msg("Multiple contract policies available for this asset")}
+                (${policies.length})
+              </div>
+              ${policies.map(
+                (p: any, index: number) => html`
+                  <div
+                    style="margin-bottom: 16px; padding: 12px; background: white; border-radius: 6px; border-left: 4px solid #0066cc;"
+                  >
+                    <div
+                      style="font-weight: 600; margin-bottom: 8px; color: #333;"
+                    >
+                      ${msg("Policy")} ${index + 1}
+                      ${p["@id"]
+                        ? html`
+                            <span
+                              style="font-weight: normal; font-size: 0.85em; color: #666; display: block; margin-top: 4px; word-break: break-all; font-family: monospace;"
+                            >
+                              ${p["@id"]}
+                            </span>
+                          `
+                        : nothing}
+                    </div>
+                    <odrl-policy-viewer .policy=${p}></odrl-policy-viewer>
+                  </div>
+                `,
+              )}
+            `
+          : html`
+              ${this._renderDivision("h4", msg("Access Policy"))}
+              <odrl-policy-viewer .policy=${policy}></odrl-policy-viewer>
+            `}
+      </div>
+    `;
+  }
+
+  _renderAgreementInfo(): TemplateResultOrSymbol {
+    // Show agreement info after successful negotiation, regardless of API Gateway config
+    if (this.negotiationStatus !== "granted" || !this.contractId) {
+      return nothing;
+    }
+
+    const storedInfo = this._loadAgreementInfo();
+    const agreementDate = storedInfo?.timestamp
+      ? new Date(storedInfo.timestamp).toLocaleString()
+      : null;
+
+    // Get endpoint URL from asset
+    const obj = this.object as any;
+    const endpointUrl =
+      obj?.endpointUrl ||
+      obj?.["dcat:endpointURL"] ||
+      obj?.distribution?.endpointUrl;
+
+    return html`
+      <div
+        style="margin-top: 24px; padding: 16px; background: #e8f5e9; border-radius: 8px;"
+      >
+        ${this._renderDivision("h4", msg("Contract Agreement"))}
+
+        <div style="font-size: 0.9em; margin-top: 12px;">
+          <div style="margin-bottom: 8px;">
+            <strong>✅ ${msg("Agreement ID:")}</strong>
+            <div
+              style="font-family: monospace; background: white; padding: 8px; border-radius: 4px; margin-top: 4px; word-break: break-all;"
+            >
+              ${this.contractId}
+            </div>
+          </div>
+
+          ${endpointUrl
+            ? html`
+                <div style="margin-bottom: 8px;">
+                  <strong>🔗 ${msg("Endpoint URL:")}</strong>
+                  <div
+                    style="font-family: monospace; background: white; padding: 8px; border-radius: 4px; margin-top: 4px; word-break: break-all;"
+                  >
+                    ${endpointUrl}
+                  </div>
+                </div>
+              `
+            : nothing}
+          ${agreementDate
+            ? html`
+                <div style="opacity: 0.8; font-size: 0.85em;">
+                  <strong>${msg("Agreed on:")}</strong> ${agreementDate}
+                </div>
+              `
+            : nothing}
+        </div>
+
+        <div
+          style="margin-top: 12px; padding: 12px; background: rgba(0,0,0,0.05); border-radius: 4px; font-size: 0.85em;"
+        >
+          <div style="margin-bottom: 4px;">
+            <strong>ℹ️ ${msg("Note:")}</strong>
+          </div>
+          <div>
+            ${msg(
+              "You can now use this agreement ID to access the service through the provider's API or data gateway.",
+            )}
+          </div>
+        </div>
+
+        ${storedInfo
+          ? html`
+              <div
+                style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1);"
+              >
+                <button
+                  @click=${this._renewContract}
+                  style="font-size: 0.85em; color: #666; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
+                >
+                  🔄 ${msg("Renegotiate contract")}
+                </button>
+              </div>
+            `
+          : nothing}
+      </div>
+    `;
+  }
+
+  _renderEDRDataAccessSection(): TemplateResultOrSymbol {
+    // Only show for services with negotiated access and NO API Gateway config
+    if (this.negotiationStatus !== "granted" || this.apiGatewayConfig) {
+      return nothing;
+    }
+
+    const storedInfo = this._loadAgreementInfo();
+    const agreementDate = storedInfo?.timestamp
+      ? new Date(storedInfo.timestamp).toLocaleString()
+      : null;
+
+    return html`
+      <div
+        style="margin-top: 24px; padding: 16px; background: #f5f5f5; border-radius: 8px;"
+      >
+        ${this._renderDivision("h4", msg("EDR Data Access (HTTP Pull)"))}
+        ${this.contractId
+          ? html`
+              <div
+                style="font-size: 0.85em; opacity: 0.8; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px; margin-bottom: 12px;"
+              >
+                <div><strong>Agreement ID:</strong> ${this.contractId}</div>
+                ${agreementDate
+                  ? html`<div style="margin-top: 4px;">
+                      <strong>Agreed on:</strong> ${agreementDate}
+                    </div>`
+                  : nothing}
+                ${this.transferId
+                  ? html`<div style="margin-top: 4px;">
+                      <strong>Transfer ID:</strong> ${this.transferId}
+                    </div>`
+                  : nothing}
+              </div>
+            `
+          : nothing}
+
+        <div style="display: flex; flex-direction: column; gap: 8px;">
+          <!-- Step 1: Get EDR Token -->
+          ${this.gettingEDR
+            ? html`<tems-button disabled="">
+                <span
+                  style="display: inline-block; animation: spin 1s linear infinite;"
+                  >⏳</span
+                >
+                ${msg("Getting EDR token...")}
+              </tems-button>`
+            : !this.edrToken
+              ? html`<tems-button
+                  @click=${this._initiateEDRTransfer}
+                  type="outline-gray"
+                >
+                  🚀 ${msg("Get EDR Token")}
+                </tems-button>`
+              : html`
+                  <div
+                    style="color: green; font-size: 0.85em; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px;"
+                  >
+                    <strong>✅ ${msg("EDR Token Ready")}</strong>
+                    ${this.edrEndpoint
+                      ? html`<div
+                          style="margin-top: 4px; font-family: monospace; font-size: 0.8em; word-break: break-all;"
+                        >
+                          <strong>Endpoint:</strong> ${this.edrEndpoint}
+                        </div>`
+                      : nothing}
+                  </div>
+                `}
+          ${this.transferError
+            ? html`
+                <div
+                  style="color: red; font-size: 0.85em; padding: 8px; background: rgba(255,0,0,0.05); border-radius: 4px;"
+                >
+                  ⚠️ ${this.transferError}
+                  <tems-button
+                    @click=${this._initiateEDRTransfer}
+                    type="outline-gray"
+                    style="margin-top: 8px;"
+                  >
+                    🔄 ${msg("Retry")}
+                  </tems-button>
+                </div>
+              `
+            : nothing}
+
+          <!-- Step 2: Access Data -->
+          ${this.edrToken
+            ? this.accessingData
+              ? html`<tems-button disabled="">
+                  <span
+                    style="display: inline-block; animation: spin 1s linear infinite;"
+                    >📡</span
+                  >
+                  ${msg("Accessing data")}
+                  ${this.dataAccessAttempt
+                    ? ` (${this.dataAccessAttempt}/${this.dataAccessMaxAttempts})`
+                    : "..."}
+                  ${this.countdown
+                    ? html`<br /><span style="font-size: 0.8em;"
+                          >⏳ Next retry in ${this.countdown}s</span
+                        >`
+                    : nothing}
+                </tems-button>`
+              : html`<tems-button @click=${this._accessData} type="primary">
+                  📁 ${msg("Access Data")}
+                </tems-button>`
+            : nothing}
+          ${this.dataAccessError
+            ? html`
+                <div
+                  style="color: red; font-size: 0.85em; padding: 8px; background: rgba(255,0,0,0.05); border-radius: 4px;"
+                >
+                  ⚠️ ${this.dataAccessError}
+                </div>
+              `
+            : nothing}
+          ${this.dataResult
+            ? html`
+                <div
+                  style="color: green; font-size: 0.85em; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px; max-height: 300px; overflow-y: auto;"
+                >
+                  <strong>✅ ${msg("Data retrieved successfully:")}</strong>
+                  <pre
+                    style="margin-top: 8px; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word; background: white; padding: 8px; border-radius: 4px;"
+                  >
+${JSON.stringify(this.dataResult, null, 2)}</pre
+                  >
+                </div>
+              `
+            : nothing}
+        </div>
+
+        <div
+          style="margin-top: 16px; padding: 12px; background: rgba(0,0,0,0.05); border-radius: 4px; font-size: 0.85em;"
+        >
+          <div style="margin-bottom: 4px;">
+            <strong>ℹ️ ${msg("About EDR (Endpoint Data Reference)")}</strong>
+          </div>
+          <div>
+            ${msg(
+              "EDR is the Eclipse Dataspace Protocol's HTTP Pull mechanism for accessing data. The EDR token provides temporary, authorized access to the provider's data endpoint.",
+            )}
+          </div>
+        </div>
+
+        ${storedInfo
+          ? html`
+              <div
+                style="margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,0.1);"
+              >
+                <button
+                  @click=${this._renewContract}
+                  style="font-size: 0.85em; color: #666; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
+                >
+                  🔄 ${msg("Renegotiate contract")}
+                </button>
+              </div>
+            `
+          : nothing}
+      </div>
+
+      <style>
+        @keyframes spin {
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      </style>
+    `;
+  }
+
+  _renderApiTestingSection(): TemplateResultOrSymbol {
+    // Only show for services with negotiated access AND API Gateway config
+    if (this.negotiationStatus !== "granted" || !this.apiGatewayConfig) {
+      return nothing;
+    }
+
+    const storedInfo = this._loadAgreementInfo();
+    const agreementDate = storedInfo?.timestamp
+      ? new Date(storedInfo.timestamp).toLocaleString()
+      : null;
+
+    return html`
+      <div
+        style="margin-top: 24px; padding: 16px; background: #f5f5f5; border-radius: 8px;"
+      >
+        ${this._renderDivision("h4", msg("API Testing"))}
+        ${this.contractId
+          ? html`
+              <div
+                style="font-size: 0.85em; opacity: 0.8; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px; margin-bottom: 12px;"
+              >
+                <div><strong>Agreement ID:</strong> ${this.contractId}</div>
+                ${agreementDate
+                  ? html`<div style="margin-top: 4px;">
+                      <strong>Agreed on:</strong> ${agreementDate}
+                    </div>`
+                  : nothing}
+              </div>
+            `
+          : nothing}
+
+        <div style="display: flex; flex-direction: column; gap: 8px;">
+          <!-- Button 1: Get Gateway Token -->
+          ${this.gettingToken
+            ? html`<tems-button disabled="">
+                ${msg("Getting token...")}
+              </tems-button>`
+            : html`<tems-button
+                @click=${this._getGatewayToken}
+                type="outline-gray"
+                ?disabled=${!!this.apiGatewayToken}
+              >
+                🔑 ${msg("Get gateway token")}
+              </tems-button>`}
+
+          <!-- Button 2: Test Service (only if displayServiceTest is enabled) -->
+          ${this.displayServiceTest
+            ? this.testingService
+              ? html`<tems-button disabled="">
+                  ${msg("Testing service...")}
+                </tems-button>`
+              : html`<tems-button
+                  @click=${this._testService}
+                  type="primary"
+                  ?disabled=${!this.apiGatewayToken}
+                >
+                  🧪 ${msg("Test service")}
+                </tems-button>`
+            : nothing}
+          ${this.apiGatewayError
+            ? html`
+                <div style="color: red; font-size: 0.85em;">
+                  ⚠️ ${this.apiGatewayError}
+                </div>
+              `
+            : nothing}
+          ${this.apiGatewayToken
+            ? html`
+                <div
+                  style="color: green; font-size: 0.85em; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px;"
+                >
+                  <div style="margin-bottom: 4px;">
+                    <strong>✅ ${msg("API Gateway token obtained")}</strong>
+                  </div>
+                  <div
+                    style="word-break: break-all; font-family: monospace; font-size: 0.9em;"
+                  >
+                    <strong>X-API-Gateway-Token:</strong><br />
+                    ${this.apiGatewayToken}
+                  </div>
+                </div>
+              `
+            : nothing}
+          ${this.displayServiceTest && this.testResult
+            ? html`
+                <div
+                  style="color: green; font-size: 0.85em; padding: 8px; background: rgba(0,128,0,0.05); border-radius: 4px; max-height: 200px; overflow-y: auto;"
+                >
+                  <strong>✅ ${msg("Service response:")}</strong>
+                  <pre
+                    style="margin-top: 4px; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word;"
+                  >
+${JSON.stringify(this.testResult, null, 2)}</pre
+                  >
+                </div>
+              `
+            : nothing}
+          ${storedInfo
+            ? html`
+                <div
+                  style="margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,0.1);"
+                >
+                  <button
+                    @click=${this._renewContract}
+                    style="font-size: 0.85em; color: #666; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0;"
+                  >
+                    🔄 ${msg("Renegotiate contract")}
+                  </button>
+                </div>
+              `
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+
+  _renderModal(): TemplateResultOrSymbol {
+    if (!this.object || !this.object["@type"]) {
+      return nothing;
+    }
+
+    return html`${this.renderTemplateWhenWith(
+        [rdf.RDFTYPE_OBJECT, "images"],
+        this._renderImageArray,
+      )}
+      <div class="modal-box">
+        <div class="modal-content">
+          ${this.renderTemplateWhenWith(
+            ["providers", rdf.RDFTYPE_OBJECT],
+            () => {
+              return html`<div class="provider-line">
+                ${this.object.providers.map(
+                  (provider: rdf.Provider) =>
+                    html`<div>
+                      ${this._renderButton(
+                        html`<icon-material-symbols-rss-feed-rounded></icon-material-symbols-rss-feed-rounded>`,
+                        "sm",
+                        provider.name || "",
+                        "link-color",
+                      )}
+                      ${this._renderBgImg(
+                        provider.image?.url || "",
+                        "provider-logo",
+                      )}
+                    </div>`,
+                )}
+              </div>`;
+            },
+          )}
+          ${this.renderTemplateWhenWith(
+            [
+              [
+                rdf.RDFTYPE_PROVIDER,
+                rdf.RDFTYPE_SERVICE,
+                rdf.RDFTYPE_DATAOFFER,
+              ],
+            ],
+            () => this._renderDivision("h2", this.object.name),
+          )}
+          ${this.renderTemplateWhenWith([rdf.RDFTYPE_OBJECT, "title"], () =>
+            this._renderDivision("h2", this.object.title),
+          )}
+          ${this.renderTemplateWhenWith(
+            [rdf.RDFTYPE_DATAOFFER],
+            this._renderDataOfferBadgeRow,
+          )}
+          ${this.renderTemplateWhenWith(
+            [rdf.RDFTYPE_OBJECT, "keywords"],
+            () =>
+              html`<div class="badges">
+                ${this.object.keywords.map((keyword: rdf.NamedResource) =>
+                  this._renderBadge("information", keyword.name ?? ""),
+                )}
+              </div>`,
+          )}
+          ${this.renderTemplateWhenWith(
+            ["description"],
+            this._renderDescription,
+          )}
+          ${this.isType(rdf.RDFTYPE_SERVICE)
+            ? this._renderServiceSpecificModal()
+            : this._renderColumns(
+                html`${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_3D_OBJECT],
+                  () => {
+                    return html`${this.renderTemplateWhenWith(
+                      [["categories", "time_period"]],
+                      () =>
+                        html`<div
+                          class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
+                        >
+                          ${this.renderTemplateWhenWith(
+                            ["categories[]"],
+                            () =>
+                              html`<div class="flex-1 half">
+                                ${this._renderDivision("h3", msg("Category"))}
+                                ${this._renderCategoryBadgeComponent()}
+                              </div>`,
+                          )}
+                          ${this.renderTemplateWhenWith(["time_period"], () => {
+                            return html`<div class="flex-1 half">
+                              ${this._renderDivision("h3", msg("Time period"))}
+                              <div class="badges">
+                                ${this._renderBadge(
+                                  "information",
+                                  this.object.time_period,
+                                )}
+                                <div></div>
+                              </div>
+                            </div>`;
+                          })}
+                        </div>`,
+                    )}
+                    ${this.renderTemplateWhenWith(
+                      [["country", "location"]],
+                      () =>
+                        html`<div
+                          class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
+                        >
+                          ${this.renderTemplateWhenWith(["country"], () => {
+                            return html`<div class="flex-1 half">
+                              ${this._renderDivision("h3", msg("Country"))}
+                              ${this._renderDivision(
+                                "body-m",
+                                this.object.country,
+                              )}
+                            </div>`;
+                          })}
+                          ${this.renderTemplateWhenWith(["location"], () => {
+                            return html`<div class="flex-1 half">
+                              ${this._renderDivision("h3", msg("Location"))}
+                              ${this._renderDivision(
+                                "body-m",
+                                `${this.object.location?.address} ${this.object.location?.city} ${this.object.location?.state}`,
+                              )}
+                            </div>`;
+                          })}
+                        </div>`,
+                    )}
+                    ${this.renderTemplateWhenWith(
+                      ["actual_representation"],
+                      () => {
+                        return html`<div class="flex flex-1 flex-column">
+                          ${this._renderDivision(
+                            "h3",
+                            msg("Actual representation"),
+                          )}
+                          ${this._renderDivision(
+                            "body-m",
+                            this.object.actual_representation,
+                          )}
+                        </div>`;
+                      },
+                    )}
+                    ${this.renderTemplateWhenWith(
+                      [
+                        [
+                          "format",
+                          "file_size",
+                          "year",
+                          "texture",
+                          "texture_formats",
+                          "texture_resolution",
+                          "is_low_polygons",
+                          "polygons",
+                          "ai",
+                          "allow_ai",
+                        ],
+                      ],
+                      () => {
+                        return html`<div
+                          class="metadata-section flex flex-column flex-1 align-items-flex-start justify-content-space-between"
+                        >
+                          ${this._renderDivision("h2", msg("Technical"))}
+                          ${this.renderTemplateWhenWith(
+                            [["format", "file_size"]],
+                            () => {
+                              return html`<div
+                                class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
+                              >
+                                ${this.renderTemplateWhenWith(
+                                  ["format"],
+                                  () =>
+                                    html`<div class="half">
+                                      ${this._renderTitleValueDivision(
+                                        msg("Format file"),
+                                        this.object.format.name,
+                                      )}
+                                    </div>`,
+                                )}${this.renderTemplateWhenWith(
+                                  ["file_size"],
+                                  () =>
+                                    html`<div class="half">
+                                      ${this._renderTitleValueDivision(
+                                        msg("File size"),
+                                        this.object.file_size,
+                                      )}
+                                    </div>`,
+                                )}
+                              </div>`;
+                            },
+                          )}
+                          ${this.renderTemplateWhenWith(["year"], () => {
+                            return html`<div class="flex flex-1 flex-column">
+                              ${this._renderTitleValueDivision(
+                                msg("Year of creation"),
+                                this.object.year,
+                              )}
+                            </div>`;
+                          })}
+                          ${this.renderTemplateWhenWith(["texture"], () => {
+                            return html`<div class="flex flex-1 flex-column">
+                              ${this._renderTitleValueDivision(
+                                msg("Texture"),
+                                this.object.texture,
+                              )}
+                            </div>`;
+                          })}
+                          ${this.renderTemplateWhenWith(
+                            ["texture_formats"],
+                            () => {
+                              return html`<div class="flex flex-1 flex-column">
+                                ${this._renderTitleValueDivision(
+                                  msg("Texture formats"),
+                                  this.object.texture_formats,
+                                )}
+                              </div>`;
+                            },
+                          )}
+                          ${this.renderTemplateWhenWith(
+                            ["texture_resolution"],
+                            () => {
+                              return html`<div class="flex flex-1 flex-column">
+                                ${this._renderTitleValueDivision(
+                                  msg("Texture resolution"),
+                                  this.object.texture_resolution,
+                                )}
+                              </div>`;
+                            },
+                          )}
+                          <div class="flex flex-1 flex-column">
+                            ${this._renderDivision("h4", msg("Low-poly"))}
+                            ${this._renderBoolean(this.object.is_low_polygons)}
+                          </div>
+                          <div
+                            class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width"
+                          >
+                            <div class="flex flex-column half">
+                              ${this._renderDivision("h4", msg("AI-generated"))}
+                              ${this._renderBoolean(this.object.ai)}
+                            </div>
+                            <div class="flex flex-column half">
+                              ${this._renderDivision(
+                                "h4",
+                                msg("Allowed for AI"),
+                              )}
+                              ${this._renderBoolean(this.object.allow_ai)}
+                            </div>
+                          </div>
+                        </div>`;
+                      },
+                    )}
+                    ${this.renderTemplateWhenWith(
+                      [["prices", "rights_holder", "creator", "licenses"]],
+                      () => {
+                        return html`<div
+                          class="metadata-section flex flex-column flex-1 align-items-flex-start justify-content-space-between"
+                        >
+                          ${this._renderDivision("h2", msg("Informations"))}
+                          ${this.renderTemplateWhenWith(["prices"], () =>
+                            this._renderTitleValueDivision(
+                              msg("Prices"),
+                              this.object.prices,
+                            ),
+                          )}
+                          ${this.renderTemplateWhenWith(["rights_holder"], () =>
+                            this._renderTitleValueDivision(
+                              msg("Rights holder"),
+                              this.object.rights_holder,
+                            ),
+                          )}
+                          ${this.renderTemplateWhenWith(["creator"], () =>
+                            this._renderTitleValueDivision(
+                              msg("Creator"),
+                              this.object.creator,
+                            ),
+                          )}
+                          ${this.renderTemplateWhenWith(
+                            ["licences"],
+                            this._renderLicences,
+                          )}
+                        </div>`;
+                      },
+                    )}
+                    ${this.renderTemplateWhenWith([["providers"]], () => {
+                      if (this.object.providers.length === 0) {
+                        return nothing;
+                      }
+                      return html`<div
+                        class="metadata-section flex flex-column flex-1 align-items-flex-start justify-content-space-between"
+                      >
+                        ${this._renderDivision(
+                          "h2",
+                          this.object.providers.length === 1
+                            ? msg("Provider")
+                            : msg("Providers"),
+                        )}
+                        ${this.object.providers.map(
+                          (provider: rdf.Provider) => {
+                            const serviceNames: string[] = [];
+                            if (provider.services) {
+                              provider.services.map((service: rdf.Service) => {
+                                if (service.name)
+                                  serviceNames.push(service.name);
+                              });
+                            }
+                            return html`<div class="flex flex-column metadata-provider">
+                                <div class="flex flex-row flex-1 align-items-flex-start justify-content-space-between full-width">
+                                  ${
+                                    provider.image?.url
+                                      ? html`<img
+                                          src="${provider.image.url}"
+                                          alt=${provider.name}
+                                          class="default-img"
+                                        />`
+                                      : nothing
+                                  }
+                                  <div class="flex flex-column flex-1">
+                                    ${this._renderDivision(
+                                      "h4",
+                                      msg("Provider information"),
+                                    )}
+                                    ${this._renderDivision(
+                                      "body-m",
+                                      provider.name ?? "",
+                                    )}
+                                  </div>
+                                </div>
+                                ${
+                                  serviceNames.length !== 0
+                                    ? html`${this._renderDivision(
+                                        "h4",
+                                        this.object.providers.length === 1
+                                          ? msg("Service provided")
+                                          : msg("Services provided"),
+                                      )}
+                                      ${this._renderDivision(
+                                        "body-m",
+                                        this.object.providers.length === 1
+                                          ? serviceNames.toString()
+                                          : serviceNames.join(", "),
+                                      )}`
+                                    : nothing
+                                }${
+                                  provider.contact_url
+                                    ? html`<div class="flex flex-column flex-1">
+                                        ${this._renderDivision(
+                                          "h4",
+                                          msg("Contact details"),
+                                        )}
+                                        ${this._renderDivision(
+                                          "body-m",
+                                          provider.contact_url,
+                                        )}
+                                      </div>`
+                                    : nothing
+                                }
+                                </div>
+                              </div>`;
+                          },
+                        )}
+                      </div>`;
+                    })}`;
+                  },
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_MEDIA_OBJECT, "language"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Language"),
+                      this.object.language.name,
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_MEDIA_OBJECT, "creation_date"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Published Date"),
+                      formatDate(this.object.creation_date),
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_MEDIA_OBJECT, "update_date"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Update Date"),
+                      formatDate(this.object.update_date),
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_MEDIA_OBJECT, "licences"],
+                  this._renderLicences,
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_MEDIA_OBJECT, "location"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Location"),
+                      `${
+                        this.object.location?.address
+                          ? `${this.object.location.address}, `
+                          : ""
+                      }${this.object.location?.city ?? ""} ${
+                        this.object.location?.country ?? ""
+                      }`,
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_FACT_CHECKING_OBJECT, "organisation"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Organisation"),
+                      this.object.organisation,
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_FACT_CHECKING_OBJECT, "person"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Person"),
+                      this.object.person,
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_FACT_CHECKING_OBJECT, "version"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Version"),
+                      this.object.version,
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_DATAOFFER, "providers"],
+                  this._renderAboutProvider,
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_DATAOFFER, "services"],
+                  this._renderCompatibleServices,
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_INTERACTIVE_INFOGRAPHICS_OBJECT, "instruction"],
+                  () => {
+                    return html`${this._renderDivision(
+                      "h4",
+                      msg("Instruction"),
+                    )}
+                    ${this._renderButton(
+                      undefined,
+                      "sm",
+                      this.object.instruction,
+                      "outline-gray",
+                    )}`;
+                  },
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_MEDIA_OBJECT, "editor"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Editor"),
+                      this.object.editor,
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_MEDIA_OBJECT, "original_language"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Original Language"),
+                      this.object.original_language,
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_MEDIA_OBJECT, "contributors"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Contributors"),
+                      this.object.contributors,
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_MEDIA_OBJECT, "publication_service"],
+                  () =>
+                    this._renderTitleValueDivision(
+                      msg("Publication Service"),
+                      this.object.publication_service,
+                    ),
+                )}${this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_OBJECT, "assets[]"],
+                  () => {
+                    return html`
+                      ${this._renderDivision("h4", msg("Accessible Assets"))}
+                      <div class="assets-rows">
+                        ${this.object.assets.map((asset: rdf.Asset) => {
+                          return html`
+                            <div
+                              class="asset-row flex flex-row align-items-center flex-1"
+                            >
+                              <div class="asset-format">
+                                <p>
+                                  ${asset.format ? asset.format.name : nothing}
+                                </p>
+                              </div>
+                              <div class="flex flex-column">
+                                ${asset.name
+                                  ? html`<p>${asset.name}</p>`
+                                  : nothing}
+                                ${asset.size
+                                  ? html`<p>${asset.size}</p>`
+                                  : nothing}
+                              </div>
+                            </div>
+                          `;
+                        })}
+                      </div>
+                    `;
+                  },
+                )}`,
+                this.renderTemplateWhenWith(["offers"], this._renderOffers),
+                this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_PROVIDER, "services"],
+                  this._renderCompatibleServices,
+                ),
+                this.renderTemplateWhenWith(
+                  [rdf.RDFTYPE_PROVIDER, "data_offers"],
+                  this._renderCompatibleDataOffers,
+                ),
+              )}${this.renderTemplateWhenWith(
+            [rdf.RDFTYPE_PROVIDER, "contact_url"],
+            () =>
+              html`<div class="flex flex-column flex-1">
+                ${this._renderDivision("h4", msg("Contact"))}
+                ${this._renderDivision("body-m", this.object.contact_url)}
+              </div>`,
+          )}
+        </div>
+      </div> `;
+  }
+
+  _closeModal() {
+    this.dispatchEvent(new CustomEvent("close"));
+  }
+
+  _addBookmark() {
+    this.dispatchEvent(
+      new CustomEvent("bookmark", {
+        detail: { add: true, object: this.object },
+      }),
+    );
+  }
+
+  _removeBookmark() {
+    this.dispatchEvent(
+      new CustomEvent("bookmark", {
+        detail: { add: false, object: this.object },
+      }),
+    );
+  }
+
+  _purchase() {
+    console.warn(msg("Disabled for POC"));
+    this.dispatchEvent(new CustomEvent("purchase"));
+  }
+
+  _renderPolicySelection(): TemplateResult {
+    const policies = this.availablePolicies || [];
+
+    return html`
+      <div class="policy-selection-modal">
+        <div class="policy-selection-header">
+          <h3>${msg("Select a Policy")}</h3>
+          <p>
+            ${msg(
+              "Multiple policies are available for this dataset. Please select one to proceed with the negotiation.",
+            )}
+          </p>
+        </div>
+        <div class="policy-selection-list">
+          ${policies.map(
+            (policy: any, index: number) => html`
+              <div
+                class="policy-option"
+                @click=${() => this._selectPolicy(index)}
+              >
+                <div class="policy-option-header">
+                  <strong>${msg("Policy")} ${index + 1}</strong>
+                  ${policy["@id"]
+                    ? html`<code>${policy["@id"]}</code>`
+                    : nothing}
+                </div>
+                <div class="policy-option-details">
+                  ${unsafeHTML(this._formatPolicyDetails(policy))}
+                </div>
+              </div>
+            `,
+          )}
+        </div>
+        <div class="policy-selection-actions">
+          <tems-button
+            type="outline-gray"
+            @click=${this._cancelPolicySelection}
+          >
+            ${msg("Cancel")}
+          </tems-button>
+        </div>
+      </div>
+    `;
+  }
+
+  _renderNegotiationButton(): TemplateResultOrSymbol {
+    // Check if DSP connector is configured (now passed as property)
+
+    const hasDspConnector =
+      this.dspStore !== undefined && this.dspStore !== null;
+
+    if (!hasDspConnector) {
+      return html`<tems-button disabled=""
+        >${msg("Activate this service")}</tems-button
+      >`;
+    }
+
+    // Show policy selection if needed
+    if (this.showPolicySelection) {
+      return this._renderPolicySelection();
+    }
+
+    switch (this.negotiationStatus) {
+      case "idle":
+        return html`<tems-button @click=${this._negotiateAccess}
+          >${msg("Negotiate access")}</tems-button
+        >`;
+
+      case "negotiating":
+        return html`<tems-button disabled="">
+          ${msg("Negotiating...")}
+        </tems-button>`;
+
+      case "pending":
+        return html`<tems-button disabled="">
+          ${this.currentState || msg("Pending")}
+          ${this.attempt ? `(${this.attempt}/${this.maxAttempts})` : ""}
+        </tems-button>`;
+
+      case "granted": {
+        return html`
+          <tems-button disabled="" type="success">
+            ✅ ${msg("Access Granted")}
+          </tems-button>
+        `;
+      }
+
+      case "failed":
+        return html`
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <tems-button disabled="" type="error">
+              ❌ ${msg("Failed")}:
+              ${this.negotiationError || msg("Unknown error")}
+            </tems-button>
+            <tems-button @click=${this._negotiateAccess} type="outline-gray">
+              ${msg("Retry")}
+            </tems-button>
+          </div>
+        `;
+
+      default:
+        return html`<tems-button disabled=""
+          >${msg("Activate this service")}</tems-button
+        >`;
+    }
+  }
+
+  render() {
+    return html`<div class="modal">
+      <div class="topbar">
+        <tems-button
+          @click=${this._closeModal}
+          type="outline-gray"
+          .iconLeft=${html`<icon-material-symbols-close-rounded></icon-material-symbols-close-rounded>`}
+        ></tems-button>
+        ${this.isType(rdf.RDFTYPE_OBJECT)
+          ? html`${this.object.owned
+                ? html`<tems-button @click=${this._removeBookmark}
+                    >${msg("Remove from my bookmarks")}</tems-button
+                  >`
+                : html`<tems-button @click=${this._addBookmark}
+                    >${msg("Add to my bookmarks")}</tems-button
+                  >`}
+              <tems-button @click=${this._purchase} disabled=""
+                >${msg("Purchase")}</tems-button
+              >`
+          : nothing}
+        ${this.isType(rdf.RDFTYPE_SERVICE)
+          ? html`<tems-button disabled=""
+                >${msg("Integrate Externally")}</tems-button
+              >
+              ${this._renderNegotiationButton()}`
+          : nothing}
+      </div>
+      <div class="modal-content-wrapper">${this._renderModal()}</div>
+    </div>`;
+  }
+}