<script>
  import { onMount } from 'svelte';
  import Prism from 'prismjs';
  import 'prism-svelte';
  export let source = "";
  let css_code = "";
  let html_code = "";

  onMount(() => {
    fetch(`${source}.css`) 
      .then(resource => resource.text())
      .then(data => css_code = data);

    fetch(`${source}.html`) 
      .then(resource => resource.text())
      .then(data => html_code = data)
      .then(() => Prism.highlightAll());
  });
</script>

<style>
  code-view {
    display:flex;
    flex-direction: row;
    justify-content: space-evenly;
  }

  code-view css-view {
    flex: 1;
  }

  code-view html-view {
    flex: 2;
    max-width: 50%;
  }
</style>

<code-view>
  <css-view>
    <h1>CSS</h1>
    <pre>
      <code class="language-svelte">
    {css_code}
      </code>
    </pre>
  </css-view>

  <html-view>
    <h1>HTML</h1>
    <pre>
      <code class="language-svelte">
    {html_code}
      </code>
    </pre>
  </html-view>
</code-view>
