import './app.element.<%= style %>';

export class AppElement extends HTMLElement {
  public static observedAttributes = [

  ];

  connectedCallback() {
    const title = '<%= projectName %>';
    this.innerHTML = `
      <header class="flex">
    <img alt="Nx logo" width="75" src="https://nx.dev/assets/images/nx-logo-white.svg" />
    <h1>Welcome to ${title}!</h1>
</header>
<main>
    <h2>Resources &amp; Tools</h2>
    <p>
      Thank you for using and showing some ♥ for Nx.
    </p>
    <div class="flex github-star-container">
      <a href="https://github.com/nrwl/nx" target="_blank" rel="noopener noreferrer"> If you like Nx, please give it a star:
        <div class="github-star-badge">
          <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>
            Star
        </div>
      </a>
    </div>
    <p>
      Here are some links to help you get started.
    </p>
    <ul class="resources">
        <li class="col-span-2">
            <a
                    class="resource flex"
                    href="https://connect.nrwl.io/app/courses/nx-workspaces/intro"
            >
                Nx video course
            </a>
        </li>
        <li class="col-span-2">
            <a
                    class="resource flex"
                    href="https://nx.dev/angular/getting-started/what-is-nx"
            >
                Nx video tutorial
            </a>
        </li>
        <li class="col-span-2">
            <a
                    class="resource flex"
                    href="https://nx.dev/angular/tutorial/01-create-application"
            >
                Interactive tutorial
            </a>
        </li>
        <li class="col-span-2">
            <a class="resource flex" href="https://connect.nrwl.io/">
                <img
                        height="36"
                        alt="Nrwl Connect"
                        src="https://connect.nrwl.io/assets/img/CONNECT_ColorIcon.png"
                />
                <span class="gutter-left">Nrwl Connect</span>
            </a>
        </li>
    </ul>
    <h2>Next Steps</h2>
    <p>Here are some things you can do with Nx.</p>
    <details open>
        <summary>Add UI library</summary>
        <pre>
\`# Generate UI lib
nx g @nrwl/angular:lib ui

# Add a component
nx g @nrwl/angular:component xyz --project ui\`</pre
        >
    </details>
    <details>
        <summary>View dependency graph</summary>
        <pre>\`nx dep-graph\`</pre>
    </details>
    <details>
        <summary>Run affected commands</summary>
        <pre>
\`# see what's been affected by changes
nx affected:dep-graph

# run tests for current changes
nx affected:test

# run e2e tests for current changes
nx affected:e2e
\`</pre
        >
    </details>
</main>
    `;
  }
}
customElements.define('<%= prefix %>-root', AppElement);
