<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import Editor from '@tinymce/tinymce-svelte';

  let apiKey = "xoifjvd46mymq6y2ev6wyaj7utyykb3tz9pf9v8m98oeiqip";

  let conf = {
    "height": 500,
    "plugins": [ 'autoresize', 'code' ],
    "toolbar": "undo redo | bold italic | code ",
    "menubar": false
  };
  
  export let name, type, tags, attributes, description;
  
  const dispatch = createEventDispatcher();

  function change_tags(e) {
    dispatch("change_tags", {tags: e.target.value});
  }

  let tiny;
  
  const tinymceloaded = () => {
    tiny = window.tinymce.init({
      selector: "textarea.attributes"
    });
  }
</script>

<style>
  div.cardInput {
    width: 5in;
    display: flex;
    flex-direction: column;
  }
</style>

<div class="cardInput">
  <div class="row">Name: <input name="name" bind:value={name}/></div>
  <div class="row">Type: <input name="type" bind:value={type}/></div>
  <div class="row">Tags: <input name="tags" on:change={change_tags} value={tags}/></div>
  <div class="row">Attributes:
    <Editor {apiKey} {conf} bind:value={attributes}/>
  </div>
  <div class="row">Description:
    <Editor {apiKey} {conf} bind:value={description}/>
  </div>
  <div class="row">
    <button on:click={e => dispatch('add_card')}>+</button>
    <button on:click={e => dispatch('remove_card')}>-</button>
  </div>
</div>
