{{ define "strings/fragments/fileEdit" }}
<div id="file-editor" class="p-6 mb-4 dark:text-white flex flex-col gap-2 bg-white dark:bg-gray-800 drop-shadow-sm rounded">
  <div class="flex justify-between items-center md:flex-row md:items-center gap-2">
    <div class="flex gap-2">
      <input
        type="text"
        name="filename"
        placeholder="Filename"
        required
        value="{{ .Name }}"
        class="md:max-w-64"
      >
      <button
        id="remove-file-btn"
        class="remove-file-btn btn flex items-center text-red-400 dark:text-red-500"
        onclick="this.closest('#file-editor').remove()"
      >
        {{ i "trash-2" "size-4" }}
      </button>
    </div>
    <div class="text-sm text-gray-500 dark:text-gray-400">
      <span id="line-count">0 lines</span>
      <span class="select-none px-1 [&:before]:content-['·']"></span>
      <span id="byte-count">0 bytes</span>
    </div>
  </div>
  <textarea
    name="content" 
    wrap="off"
    class="w-full font-mono"
    rows="20"
    spellcheck="false"
    placeholder="Paste your string here!"
    required
  >{{ .Content }}</textarea>
</div>
{{ end }}