{{showFile "templates/section/head.tmpl"}}
<body class="bg-[#0b0d12] text-white font-sans min-h-screen">
  <div class="max-w-4xl mx-auto px-6 py-10">

    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-8">
      <div>
        <h1 class="text-3xl md:text-4xl font-bold tracking-tight text-white">
          Editează notița
        </h1>
        <p class="text-gray-400 mt-2 text-sm md:text-base">
          Modifică titlul și conținutul, apoi salvează schimbările.
        </p>
      </div>

      <div class="flex gap-3">
        <a href="/list_notes"
          class="inline-flex items-center justify-center rounded-xl border border-[#313846] bg-[#171b22] px-4 py-3 text-sm font-semibold text-gray-200 transition hover:bg-[#20252f] hover:text-white">
          Înapoi la listă
        </a>

        <a href="/notes/?note={{.Path}}"
          class="inline-flex items-center justify-center rounded-xl border border-[#313846] bg-[#171b22] px-4 py-3 text-sm font-semibold text-gray-200 transition hover:bg-[#20252f] hover:text-white">
          Vezi notița
        </a>
      </div>
    </div>

    <div class="rounded-2xl border border-[#2a3140] bg-[#11151b] shadow-2xl overflow-hidden">
      <div class="border-b border-[#252b37] bg-[#181d27] px-6 py-5">
        <h2 class="text-xl md:text-2xl font-bold text-[#b899ff]">
          Formular editare
        </h2>
        <p class="text-sm text-gray-400 mt-1">
          Editezi notița selectată.
        </p>
      </div>

      <div class="p-6 md:p-8">
        <form method="POST" action="/api/update_note" class="space-y-6">

          <!-- PATH către fișier -->
          <input type="hidden" name="path" value="{{.Path}}">

          <!-- DIRECTORUL în care se află -->
          <input type="hidden" name="director" value="{{.Folder}}">

          <!-- Afișare folder (doar vizual) -->
          <div>
            <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
              Folder
            </label>
            <div
              class="w-full rounded-xl border border-[#323949] bg-[#1a1f29] px-4 py-3 text-sm text-gray-300">
              {{.Folder}}
            </div>
          </div>

          <div>
            <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
              Titlu fișier
            </label>
            <input type="text" name="titlu" value="{{.Titlu}}"
              class="w-full rounded-xl border border-[#323949] bg-[#1a1f29] px-4 py-3 text-sm text-gray-200 outline-none transition focus:border-[#7b58ad] focus:ring-2 focus:ring-[#7b58ad]/30">
          </div>

          <div>
            <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
              Conținut notiță
            </label>
            <textarea name="notita" rows="18"
              class="w-full rounded-xl border border-[#323949] bg-[#1a1f29] px-4 py-3 text-sm text-gray-200 outline-none transition focus:border-[#7b58ad] focus:ring-2 focus:ring-[#7b58ad]/30 resize-y">{{.Continut}}</textarea>
          </div>

          <div class="flex flex-col sm:flex-row gap-3 pt-2">
            <button type="submit"
              class="flex-1 rounded-xl bg-[#7b58ad] px-5 py-3 text-sm font-bold text-white transition hover:bg-[#9974d0] shadow-lg shadow-purple-900/20">
              Salvează modificările
            </button>

            <a href="/list_notes/"
              class="flex-1 rounded-xl border border-[#3a3f4b] bg-[#171a21] px-5 py-3 text-center text-sm font-semibold text-gray-200 transition hover:bg-[#20242d] hover:text-white">
              Anulează
            </a>
          </div>

        </form>
      </div>

      <div class="border-t border-[#252b37] bg-[#12151b] px-6 py-4 flex justify-between items-center text-[11px] uppercase tracking-widest text-gray-500">
        <span>Status: Edit Mode</span>
        <span class="flex items-center gap-2">
          <span class="w-2 h-2 rounded-full bg-amber-400"></span>
          Loaded
        </span>
      </div>
    </div>
  </div>
</body>

</html>