{% extends "base.html" %}

{% block title %}Bewerbung - Persönliche Daten{% endblock %}

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

{% block content %}
<div class="page-intro">
    <h2>Schritt 1 von 3: Persönliche Daten</h2>
    <p>Bitte geben Sie Ihre persönlichen Informationen ein. Alle Felder mit * sind Pflichtfelder.</p>
</div>

<form method="POST" action="{{ url_for('submit_personal', session_id=session_id) }}" class="application-form">

    <div class="form-section">
        <h3>Persönliche Informationen</h3>

        <div class="form-group">
            <label for="name">Nachname *</label>
            <input
                type="text"
                id="name"
                name="name"
                required
                maxlength="255"
                value="{{ data.name or '' }}"
                aria-required="true">
        </div>

        <div class="form-group">
            <label for="firstname">Vorname *</label>
            <input
                type="text"
                id="firstname"
                name="firstname"
                required
                maxlength="255"
                value="{{ data.firstname or '' }}"
                aria-required="true">
        </div>

        <div class="form-group">
            <label for="address">Adresse *</label>
            <input
                type="text"
                id="address"
                name="address"
                required
                maxlength="255"
                value="{{ data.address or '' }}"
                placeholder="Straße und Hausnummer"
                aria-required="true">
        </div>

        <div class="form-row">
            <div class="form-group">
                <label for="zip_code">PLZ *</label>
                <input
                    type="text"
                    id="zip_code"
                    name="zip_code"
                    required
                    maxlength="10"
                    value="{{ data.zip_code or '' }}"
                    pattern="[0-9]{1,10}"
                    aria-required="true">
            </div>

            <div class="form-group">
                <label for="city">Stadt *</label>
                <input
                    type="text"
                    id="city"
                    name="city"
                    required
                    maxlength="255"
                    value="{{ data.city or '' }}"
                    aria-required="true">
            </div>
        </div>

        <div class="form-group">
            <label for="phone">Telefonnummer *</label>
            <input
                type="tel"
                id="phone"
                name="phone"
                required
                value="{{ data.phone or '' }}"
                placeholder="+41 79 123 45 67"
                pattern="\+\d{1,3}[\s\d]{1,20}"
                aria-required="true">
            <small>Bitte im internationalen Format eingeben (z.B. +41 79 123 45 67)</small>
        </div>
    </div>

    <div class="form-section">
        <h3>Zusätzliche Informationen</h3>

        <div class="form-group">
            <label for="birth_year">Geburtsjahr *</label>
            <input
                type="text"
                id="birth_year"
                name="birth_year"
                required
                maxlength="4"
                value="{{ data.birth_year or '' }}"
                placeholder="1990"
                pattern="[0-9]{4}"
                aria-required="true">
            <small>Bitte vierstellig eingeben (z.B. 1990)</small>
        </div>

        <div class="form-group">
            <label for="civil_status">Zivilstand</label>
            <input
                type="text"
                id="civil_status"
                name="civil_status"
                maxlength="255"
                value="{{ data.civil_status or '' }}"
                placeholder="Optional">
        </div>
    </div>

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

    <p class="required-note">* Pflichtfelder</p>
</form>
{% endblock %}