text: import DappLib from "@decentology/dappstarter-dapplib";
  import DOM from "../../components/dom";
  import "../../components/action-card.js";
  import "../../components/action-button.js";
  import "../../components/text-widget.js";
  import "../../components/number-widget.js";
  import "../../components/account-widget.js";
  import "../../components/upload-widget.js";
  import { unsafeHTML } from "lit-html/directives/unsafe-html";
  import { LitElement, html, customElement, property } from "lit-element";
  
  @customElement("harness-page")
  export default class HarnessPage extends LitElement {
    @property()
    get;
    @property()
    post;
    @property()
    title;
    @property()
    category;
    @property()
    description;
  
    createRenderRoot() {
      return this;
    }
    constructor(args) {
      super(args);
    }
  
    getPages() {
      return[
      {
          "name": "core-administrator_role",
          "title": "Administrator Role",
          "description": "Define accounts that can perform certain admin functions.",
          "category": "Access Control",
          "route": "/core-administrator_role"
      },
      {
          "name": "core-composable_nft",
          "title": "Composable NFT",
          "description": "Interactively select options to build an NFT application.",
          "category": "Non-fungible Tokens",
          "route": "/core-composable_nft"
      },
      {
          "name": "core-contract_access",
          "title": "Contract Access",
          "description": "Control which external contracts can interact with your contract.",
          "category": "Access Control",
          "route": "/core-contract_access"
      },
      {
          "name": "core-token",
          "title": "Custom Token",
          "description": "Create a token for tracking value associated with your dapp.",
          "category": "Asset and Value Tracking",
          "route": "/core-token"
      },
      {
          "name": "core-entity",
          "title": "Entity Collection",
          "description": "Manage a collection of items.",
          "category": "Collection",
          "route": "/core-entity"
      },
      {
          "name": "core-ipfs",
          "title": "IPFS Documents",
          "description": "InterPlanetary File System (decentralized file storage)",
          "category": "File Storage",
          "route": "/core-ipfs"
      }
  ]; 
    }
  
    handleClick = e => {
      e.preventDefault();
      this.setPageLoader(e.target.dataset.link);
    };
  
    setPageLoader(name) {
      let pageLoader = document.getElementById("page-loader");
      pageLoader.load(name, this.getPages());
      this.requestUpdate();
    }
  
    render() {
      let content = html`
        <div class="container m-auto">
          <div class="row fadeIn mt-3 p-2 block">
            <p class="mt-3">
              Welcome to the UI Harness! Each feature module you selected for your project 
              has a page that demonstrates all of the module's capabilities with a user interface. You can 
              try the various features, then copy code selectively to your Dapp page. To continue, 
              select a feature module.           
            </p>
          </div>
          <ul class="mt-3 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
          ${this.getPages().map(page =>
                html`<li class="col-span-1 bg-white rounded-lg shadow h-64">
                        <div class="flex flex-col items-center p-6 h-full">
                          <div class="font-bold text-xl mb-2">${page.title}</div>
                          <p class="text-gray-700 text-base mb-3">${page.description}</p>
                          <div class="flex flex-row flex-grow">
                              <button
                                @click=${this.handleClick}
                                data-link=${page.name}
                                class="self-end text-white font-bold py-2 px-8 rounded bg-green-500 hover:bg-green-700"}"
                              >
                                View
                              </button>
                            </div>
                        </div>
                      </li>`)
          }
          </ul>
        </div>
      `; 
      return content;
  
    }
  }
  
  
  
  