<!DOCTYPE html>
<html lang="ro">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/webp" href="/favicon.webp">
  <title>MyNotes</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-[#0b0d12] text-white font-sans">
  <div class="min-h-screen flex items-center justify-center p-6">
    <div class="w-full max-w-2xl">

      <!-- header -->
      <div class="mb-6 flex items-center justify-between">
        <div>
          <h1 class="text-3xl font-bold tracking-tight text-white">MyNotes</h1>
          <p class="text-sm text-gray-400 mt-1">Creează și organizează notițe în foldere locale</p>
        </div>

        <a href="/list_notes"
          class="inline-flex items-center gap-2 rounded-lg border border-[#3a3f4b] bg-[#171a21] px-4 py-2 text-sm font-semibold text-gray-200 transition hover:bg-[#20242d] hover:text-white">
          Vezi notițele
        </a>
      </div>

      <!-- card principal -->
      <div class="rounded-2xl border border-[#2a2f3a] bg-[#13161d] shadow-2xl overflow-hidden">
        <!-- top bar -->
        <div class="border-b border-[#2a2f3a] bg-[#161a22] px-6 py-4 flex items-center justify-between">
          <div>
            <h2 class="text-xl font-bold text-[#b191ff]">Notă Nouă</h2>
            <p class="text-sm text-gray-400 mt-1">Salvare în arhiva locală</p>
          </div>

          <div class="flex items-center gap-2 text-xs text-gray-400">
            <span class="h-2 w-2 rounded-full bg-green-500"></span>
            Ready
          </div>
        </div>

        <!-- form -->
        <div class="p-6">
          <form class="space-y-6" method="POST" action="api/save_note">

            <div>
              <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
                Folder
              </label>
              <input type="text" name="director" placeholder="ex: scoala/istorie"
                class="w-full rounded-xl border border-[#323847] bg-[#1a1f29] px-4 py-3 text-sm text-gray-200 outline-none transition placeholder:text-gray-500 focus:border-[#8d6bdb] focus:ring-2 focus:ring-[#8d6bdb]/30">
              <p class="mt-2 text-xs text-gray-500">Alege folderul în care va fi salvată notița.</p>
            </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" placeholder="ex: Plan de idei 2026"
                class="w-full rounded-xl border border-[#323847] bg-[#1a1f29] px-4 py-3 text-sm text-gray-200 outline-none transition placeholder:text-gray-500 focus:border-[#8d6bdb] focus:ring-2 focus:ring-[#8d6bdb]/30">
            </div>

            <div>
              <label class="block text-xs font-semibold text-gray-400 uppercase tracking-wider mb-2">
                Conținut Notiță
              </label>
              <textarea rows="10" name="notita" placeholder="Începe să scrii..."
                class="w-full rounded-xl border border-[#323847] bg-[#1a1f29] px-4 py-3 text-sm text-gray-200 outline-none transition placeholder:text-gray-500 focus:border-[#8d6bdb] focus:ring-2 focus:ring-[#8d6bdb]/30 resize-none"></textarea>
            </div>

            <div class="flex flex-col sm:flex-row gap-3">
              <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">
                Creează Notă
              </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">
                Deschide lista notițelor
              </a>
            </div>
          </form>
        </div>

        <!-- footer -->
        <div class="border-t border-[#2a2f3a] bg-[#12151b] px-6 py-4 flex justify-between items-center text-[11px] uppercase tracking-widest text-gray-500">
          <span>Status: Ready</span>
          <span class="flex items-center gap-2">
            <span class="w-2 h-2 rounded-full bg-green-500"></span>
            Linked
          </span>
        </div>
      </div>
    </div>
  </div>
</body>

</html>