{% extends "base.html" %}
{% block title %}Neues Projekt{% endblock %}
{% block content %}

<div class="section-header" style="display:flex; justify-content:space-between; align-items:center;">
    <h1>Neues Projekt anlegen</h1>
    <a href="{{ url_for('profil.cockpit') }}" class="btn btn-secondary">Abbrechen</a>
</div>

<div class="card" style="background:var(--info-bg); border-left: 4px solid var(--primary);">
    <strong>Commitment.</strong> Mit dem Anlegen entscheidest du dich, dieses Projekt durchzuziehen.
    Du kannst es spaeter abschliessen und selbst bewerten — und erst dann wieder ein neues anfangen.
</div>

<div class="card">
    <form method="post" style="display: grid; gap: 1rem;">
        <div>
            <label style="display:block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.3rem;">
                Titel * <span style="font-weight: normal;">(was willst du bauen?)</span>
            </label>
            <input type="text" name="titel" required maxlength="100" autofocus
                   value="{{ eingabe_titel or '' }}"
                   placeholder="z.B. 'Stiftehalter mit meinem Lieblings-Tier'"
                   style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 1rem;">
        </div>
        <div>
            <label style="display:block; font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.3rem;">
                Beschreibung <span style="font-weight: normal;">(optional, kannst du spaeter ergaenzen)</span>
            </label>
            <textarea name="beschreibung_md" rows="6" maxlength="2000"
                      placeholder="Was willst du genau bauen? Hast du schon eine Idee, mit welcher Software (TinkerCAD, MakerWorld, ...)? Welches Material?"
                      style="padding: 0.6rem; width: 100%; border: 1px solid var(--border); border-radius: 4px; font-size: 0.95rem; font-family: inherit;">{{ eingabe_beschreibung or '' }}</textarea>
            <div style="font-size: 0.8rem; color: var(--text-light); margin-top: 0.3rem;">
                Markdown geht: **fett**, *kursiv*, Listen mit -.
            </div>
        </div>
        <div style="display: flex; justify-content: space-between;">
            <a href="{{ url_for('profil.cockpit') }}" class="btn btn-secondary">Abbrechen</a>
            <button class="btn btn-primary">Projekt anlegen</button>
        </div>
    </form>
</div>

{% endblock %}