{% extends "base.html" %}
{% block body %}
  <div class="max-w-md mx-auto bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden">
    <div class="px-6 py-4 bg-slate-50 border-b border-slate-100">
      <h3 class="font-bold text-slate-800 text-lg">Neue Ausgabe eintragen</h3>
      <p class="text-xs text-slate-500 mt-1">Geben Sie den Betrag und die entsprechende Kategorie an.</p>
    </div>
    
    <form action="{{ url }}" method="POST" class="p-6 space-y-5">
      <div>
        <label for="{{ select_id_text }}" class="block text-sm font-medium text-slate-700 mb-1">Betrag in €</label>
        <div class="relative rounded-md shadow-sm">
          <input type="number"
                 step="0.01"
                 min="1"
                 max="10000"
                 placeholder="0.00" 
                 name="{{ select_id_text }}"
                 id="{{ select_id_text }}"
                 required
                 class="block w-full rounded-lg border-slate-200 pl-4 pr-12 py-2.5 text-slate-900 placeholder-slate-400 focus:border-indigo-500 focus:ring-indigo-500 border focus:outline-none sm:text-sm">
          <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-4">
            <span class="text-slate-500 sm:text-sm">EUR</span>
          </div>
        </div>
      </div>

      <div>
        <label for="{{ select_id }}" class="block text-sm font-medium text-slate-700 mb-1">Kategorie / Beschreibung</label>
        <select name="{{ select_id }}" 
                id="{{ select_id }}"
                class="block w-full rounded-lg border-slate-200 px-4 py-2.5 text-slate-900 focus:border-indigo-500 focus:ring-indigo-500 border focus:outline-none sm:text-sm"> 
          {% for name in data %}  
              <option value="{{ name }}">{{ name }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="pt-2 flex gap-3">
        <a href="/" class="flex-1 text-center py-2.5 px-4 border border-slate-200 rounded-lg text-sm font-medium text-slate-700 hover:bg-slate-50 transition-colors">
          Abbrechen
        </a>
        <button type="submit" class="flex-1 bg-indigo-600 hover:bg-indigo-700 text-white py-2.5 px-4 rounded-lg text-sm font-semibold shadow transition-colors">
          Speichern
        </button> 
      </div>
    </form>
  </div>
{% endblock %}