1<script>
2  import { _ } from "../i18n";
3
4  /** @type {Record<string,unknown>} */
5  export let meta;
6
7  $: metakeys = Object.keys(meta).filter(
8    (key) => !key.startsWith("_") && key !== "filename" && key !== "lineno"
9  );
10
11  /**
12   * @param {string} metakey
13   */
14  function removeMetadata(metakey) {
15    delete meta[metakey];
16    meta = meta;
17  }
18
19  /**
20   * @param {string} currentKey
21   * @param {string} newKey
22   */
23  function updateMetakey(currentKey, newKey) {
24    meta = Object.keys(meta).reduce((
25      /** @type {Record<string,unknown>} */ m,
26      key
27    ) => {
28      if (key === currentKey) {
29        m[newKey] = meta[currentKey];
30      } else {
31        m[key] = meta[key];
32      }
33      return m;
34    }, {});
35  }
36
37  function addMetadata() {
38    meta[""] = "";
39    meta = meta;
40  }
41</script>
42
43{#each metakeys as metakey, i}
44  <div class="flex-row">
45    <button
46      class="muted round remove-row"
47      on:click={() => removeMetadata(metakey)}
48      type="button"
49      tabindex={-1}> × </button>
50    <input
51      type="text"
52      class="key"
53      placeholder={_("Key")}
54      value={metakey}
55      on:change={(event) => {
56        updateMetakey(metakey, event.target.value);
57      }}
58      required
59    />
60    <input
61      type="text"
62      class="value"
63      placeholder={_("Value")}
64      bind:value={meta[metakey]}
65    />
66    {#if i === metakeys.length - 1}
67      <button
68        class="muted round"
69        type="button"
70        on:click={addMetadata}
71        title={_("Add metadata")}> + </button>
72    {/if}
73  </div>
74{/each}
75
76<style>
77  div {
78    padding-left: 56px;
79    font-size: 0.8em;
80  }
81
82  input.key {
83    width: 10em;
84  }
85
86  input.value {
87    flex-grow: 1;
88    max-width: 15em;
89  }
90
91  @media (max-width: 767px) {
92    div {
93      padding-left: 0;
94    }
95  }
96</style>
97