text: <script>
      import { onMount } from "svelte";
      import { updateCodeStore } from "../code-store.js";
      import Editor from "../components/Editor.svelte";
      import Config from "../components/Config.svelte";
      import View from "../components/View.svelte";
      import Card from "../components/Card.svelte";
      import Tag from "../components/Tag.svelte";
      import Links from "../components/Links.svelte";
      import { fromUrl } from "../code-store.js";
      // import pkg from '@mermaid-js/mermaid/package.json'
      import pkg from "@mermaid/package.json";
      export let mermaidVersion = pkg.version;
      onMount(async () => {
          ga("send", "pageview");
          ga("send", "event", "version", mermaidVersion, mermaidVersion);
          fromUrl(params.data);
      });
      // export let code = '';
      // export let classes = '';
      // export let error = {};
      // export let token = '';
      // export let expected = '';
      export let params = {};
      function loadFlowChart() {
          loadSampleDiagram("FlowChart");
      }
      function loadSequenceDiagram() {
          loadSampleDiagram("SequenceDiagram");
      }
      function loadClassDiagram() {
          loadSampleDiagram("ClassDiagram");
      }
      function loadStateDiagram() {
          loadSampleDiagram("StateDiagram");
      }
      function loadGanttChart() {
          loadSampleDiagram("GanttChart");
      }
      function loadPieChart() {
          loadSampleDiagram("PieChart");
      }
      function loadERDiagram() {
          loadSampleDiagram("ERDiagram");
      }
      function loadSampleDiagram(diagramType) {
          let code = "";
          switch (diagramType) {
              case "FlowChart":
                  code = `graph TD
      A[Christmas] -->|Get money| B(Go shopping)
      B --> C{Let me think}
      C -->|One| D[Laptop]
      C -->|Two| E[iPhone]
      C -->|Three| F[fa:fa-car Car]
              `;
                  break;
              case "SequenceDiagram":
                  code = `sequenceDiagram
      Alice->>+John: Hello John, how are you?
      Alice->>+John: John, can you hear me?
      John-->>-Alice: Hi Alice, I can hear you!
      John-->>-Alice: I feel great!
              `;
                  break;
              case "ClassDiagram":
                  code = `classDiagram
      Animal <|-- Duck
      Animal <|-- Fish
      Animal <|-- Zebra
      Animal : +int age
      Animal : +String gender
      Animal: +isMammal()
      Animal: +mate()
      class Duck{
        +String beakColor
        +swim()
        +quack()
      }
      class Fish{
        -int sizeInFeet
        -canEat()
      }
      class Zebra{
        +bool is_wild
        +run()
      }
              `;
                  break;
              case "StateDiagram":
                  code = `stateDiagram
      [*] --> Still
      Still --> [*]
      Still --> Moving
      Moving --> Still
      Moving --> Crash
      Crash --> [*]
              `;
                  break;
              case "GanttChart":
                  code = `gantt
      title A Gantt Diagram
      dateFormat  YYYY-MM-DD
      section Section
      A task           :a1, 2014-01-01, 30d
      Another task     :after a1  , 20d
      section Another
      Task in sec      :2014-01-12  , 12d
      another task      : 24d
              `;
                  break;
              case "PieChart":
                  code = `pie title Pets adopted by volunteers
      "Dogs" : 386
      "Cats" : 85
      "Rats" : 15
              `;
                  break;
              case "ERDiagram":
                  code = `erDiagram
            CUSTOMER }|..|{ DELIVERY-ADDRESS : has
            CUSTOMER ||--o{ ORDER : places
            CUSTOMER ||--o{ INVOICE : "liable for"
            DELIVERY-ADDRESS ||--o{ ORDER : receives
            INVOICE ||--|{ ORDER : covers
            ORDER ||--|{ ORDER-ITEM : includes
            PRODUCT-CATEGORY ||--|{ PRODUCT : contains
            PRODUCT ||--o{ ORDER-ITEM : "ordered in"
              `;
                  break;
          }
          let newState = {
              code,
              mermaid: { theme: "default" },
              updateEditor: true,
          };
          updateCodeStore(newState);
      }
  </script>
  
  <style>
      #body {
          font-family: "Roboto", sans-serif;
          background-color: #fcfbfc;
      }
      #editor-root {
          display: flex;
          height: 100%;
      }
      #col1 {
          width: 35%;
      }
      #col2 {
          width: 65%;
          padding-left: 32px;
      }
      #link-root {
          display: flex;
          height: fit-content;
      }
      #link-col1 {
          width: 50%;
      }
      #link-col2 {
          width: 50%;
          padding-left: 32px;
      }
      #app-title {
          font-family: "Playfair Display", serif;
          font-size: 32px;
          font-weight: 700;
          margin: 0;
          color: #1e60ab;
          opacity: 0.8;
      }
      #title-container {
          width: fit-content;
          margin: 0 auto 16px;
          padding-bottom: 16px;
      }
      #power {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          height: 4rem;
      }
      #sampleLoader {
          padding-bottom: 10px;
          padding-left: 10px;
          border-bottom: 1px solid lightgray;
      }
      .button-container {
          margin-top: 5px;
      }
      .button-style {
          background-color: #a2d9e2;
          color: #33a2c4;
          border-radius: 0.25rem;
          padding: 0.5rem;
          border: 1px solid #a2d9e2;
          margin: 0.25rem;
      }
      .button-style:hover {
          background-color: #fff;
          color: #33a2c4;
          border: 1px solid #33a2c4;
      }
      .button-style:focus {
          outline: none;
      }
      .link-style {
          text-decoration: none;
          color: #33a2c4;
      }
  </style>
  
  <div id="body">
      <div id="title-container">
          <h1 id="app-title">Mermaid Live Editor</h1>
      </div>
      <div id="editor-root">
          <div id="col1">
              <Card title="Code" noPadding="true">
                  <div id="sampleLoader">
                      <span id="sampleLoaderTitle">Sample Diagram Options</span>
                      <br />
                      <div class="button-container">
                          <button class="button-style" on:click={loadFlowChart}>
                              Flow Chart
                          </button>
                          <button
                              class="button-style"
                              on:click={loadSequenceDiagram}>
                              Sequence Diagram
                          </button>
                          <button
                              class="button-style"
                              on:click={loadClassDiagram}>
                              Class Diagram
                          </button>
                          <button
                              class="button-style"
                              on:click={loadStateDiagram}>
                              State Diagram
                          </button>
                          <button class="button-style" on:click={loadGanttChart}>
                              Gantt Chart
                          </button>
                          <button class="button-style" on:click={loadPieChart}>
                              Pie Chart
                          </button>
                          <button class="button-style" on:click={loadERDiagram}>
                              ER Diagram
                          </button>
                      </div>
                  </div>
                  <Editor data={params.data} />
              </Card>
              <Card title="Mermaid Configuration">
                  <Config />
              </Card>
  
          </div>
          <div id="col2">
              <Card title="Preview">
                  <View />
              </Card>
              <div id="link-root">
                  <div id="link-col1">
                      <Card title="Actions">
                          <Links />
                      </Card>
                  </div>
                  <div id="link-col2">
                      <Card title="Links">
                          <div class="button-container">
                              <button class="button-style">
                                  <a
                                      href="https://mermaid-js.github.io/mermaid"
                                      target="_blank"
                                      class="link-style">
                                      Mermaid Documentation
                                  </a>
                              </button>
                              <button class="button-style">
                                  <a
                                      href="https://github.com/mermaid-js/mermaid"
                                      target="_blank"
                                      class="link-style">
                                      Mermaid on GitHub
                                  </a>
                              </button>
                              <button class="button-style">
                                  <a
                                      href="https://github.com/mermaid-js/mermaid-live-editor"
                                      target="_blank"
                                      class="link-style">
                                      Live Editor on GitHub
                                  </a>
                              </button>
                              <button class="button-style">
                                  <a
                                      href="https://github.com/mermaid-js/mermaid-cli"
                                      target="_blank"
                                      class="link-style">
                                      Mermaid CLI
                                  </a>
                              </button>
                          </div>
                      </Card>
                  </div>
              </div>
          </div>
      </div>
      <div id="power">
          Powered by mermaid
          <Tag color="green">{mermaidVersion}</Tag>
      </div>
  </div>
  