{% extends "base.html" %}

{% block title %}Bewerbung - Motivation{% endblock %}

{% block header %}Bewerbung: {{ job_name }}{% endblock %}

{% block content %}
<div class="page-intro">
    <h2>Schritt 2 von 3: Motivation und Qualifikationen</h2>
    <p>Bitte beantworten Sie die folgenden Fragen. Alle Angaben sind optional, helfen uns aber, Sie besser kennenzulernen.</p>
    <p><small>Maximal ca. 3000 Zeichen pro Antwort (etwa eine A4-Seite)</small></p>
</div>

<form method="POST" action="{{ url_for('submit_motivation', session_id=session_id) }}" class="application-form">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

    <div class="form-group">
        <label for="current_job">Bitte beschreiben Sie Ihre aktuelle berufliche Situation.</label>
        <textarea
            id="current_job"
            name="current_job"
            rows="6"
            maxlength="3000"
            placeholder="Optional - Ihre aktuelle Tätigkeit, Position, Verantwortlichkeiten...">{{ data.current_job or '' }}</textarea>
        <small class="char-count">Noch <span id="current_job_count">3000</span> Zeichen verfügbar</small>
    </div>

    <div class="form-group">
        <label for="motivation">Was motiviert Sie, für uns zu arbeiten?</label>
        <textarea
            id="motivation"
            name="motivation"
            rows="6"
            maxlength="3000"
            placeholder="Optional - Ihre Motivation, Interessen an unserem Unternehmen...">{{ data.motivation or '' }}</textarea>
        <small class="char-count">Noch <span id="motivation_count">3000</span> Zeichen verfügbar</small>
    </div>

    <div class="form-group">
        <label for="qualifications">Bitte nennen Sie uns Ihre besonderen Qualifikationen für diese Stelle.</label>
        <textarea
            id="qualifications"
            name="qualifications"
            rows="6"
            maxlength="3000"
            placeholder="Optional - Ihre Fähigkeiten, Erfahrungen, Ausbildungen...">{{ data.qualifications or '' }}</textarea>
        <small class="char-count">Noch <span id="qualifications_count">3000</span> Zeichen verfügbar</small>
    </div>

    <div class="form-group">
        <label for="salary">Was sind Ihre Gehaltsvorstellungen (brutto, basierend auf Vollzeitbeschäftigung)?</label>
        <textarea
            id="salary"
            name="salary"
            rows="4"
            maxlength="3000"
            placeholder="Optional - Ihre Gehaltsvorstellungen...">{{ data.salary or '' }}</textarea>
        <small class="char-count">Noch <span id="salary_count">3000</span> Zeichen verfügbar</small>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">Weiter zu Schritt 3</button>
    </div>
</form>

<noscript>
    <p class="info-message">Die Zeichenzähler funktionieren nur mit aktiviertem JavaScript. Die Validierung erfolgt beim Absenden des Formulars.</p>
</noscript>
{% endblock %}