{% extends "base.html" %}

{% block title %}Bewerbung ansehen{% endblock %}

{% block header %}Bewerbungsübersicht{% endblock %}

{% block content %}
<div class="application-view">
    <div class="section">
        <h2>Stelleninformation</h2>
        <div class="info-grid">
            <div class="info-item">
                <span class="label">Position:</span>
                <span class="value">{{ app_data.job_name }}</span>
            </div>
            <div class="info-item">
                <span class="label">E-Mail:</span>
                <span class="value">{{ app_data.email }}</span>
            </div>
            <div class="info-item">
                <span class="label">Status:</span>
                <span class="value">{{ app_data.status or 'In Bearbeitung' }}</span>
            </div>
            <div class="info-item">
                <span class="label">Eingereicht am:</span>
                <span class="value">
                    {% if app_data.submitted_at %}
                        {{ app_data.submitted_at[:10] }} {{ app_data.submitted_at[11:16] }}
                    {% else %}
                        Noch nicht eingereicht
                    {% endif %}
                </span>
            </div>
        </div>
    </div>

    <div class="section">
        <h2>Persönliche Informationen</h2>
        {% if app_data.personal_info %}
            <div class="info-grid">
                <div class="info-item">
                    <span class="label">Name:</span>
                    <span class="value">{{ app_data.personal_info.name }}</span>
                </div>
                <div class="info-item">
                    <span class="label">Vorname:</span>
                    <span class="value">{{ app_data.personal_info.firstname }}</span>
                </div>
                <div class="info-item">
                    <span class="label">Adresse:</span>
                    <span class="value">{{ app_data.personal_info.address }}</span>
                </div>
                <div class="info-item">
                    <span class="label">PLZ:</span>
                    <span class="value">{{ app_data.personal_info.zip_code }}</span>
                </div>
                <div class="info-item">
                    <span class="label">Stadt:</span>
                    <span class="value">{{ app_data.personal_info.city }}</span>
                </div>
                <div class="info-item">
                    <span class="label">Telefon:</span>
                    <span class="value">{{ app_data.personal_info.phone }}</span>
                </div>
                <div class="info-item">
                    <span class="label">Geburtsjahr:</span>
                    <span class="value">{{ app_data.personal_info.birth_year }}</span>
                </div>
                <div class="info-item">
                    <span class="label">Zivilstand:</span>
                    <span class="value">{{ app_data.personal_info.civil_status or 'Nicht angegeben' }}</span>
                </div>
            </div>
        {% else %}
            <p class="info-message">Noch nicht ausgefüllt</p>
        {% endif %}
    </div>

    <div class="section">
        <h2>Motivation und Qualifikationen</h2>
        {% if app_data.motivation_answers %}
            <div class="text-responses">
                <div class="response-item">
                    <h3>Aktuelle berufliche Situation</h3>
                    <p class="response-text">{{ app_data.motivation_answers.current_job or 'Nicht angegeben' }}</p>
                </div>
                <div class="response-item">
                    <h3>Motivation</h3>
                    <p class="response-text">{{ app_data.motivation_answers.motivation or 'Nicht angegeben' }}</p>
                </div>
                <div class="response-item">
                    <h3>Qualifikationen</h3>
                    <p class="response-text">{{ app_data.motivation_answers.qualifications or 'Nicht angegeben' }}</p>
                </div>
                <div class="response-item">
                    <h3>Gehaltsvorstellungen</h3>
                    <p class="response-text">{{ app_data.motivation_answers.salary or 'Nicht angegeben' }}</p>
                </div>
            </div>
        {% else %}
            <p class="info-message">Noch nicht ausgefüllt</p>
        {% endif %}
    </div>

    <div class="section">
        <h2>Hochgeladene Dokumente</h2>
        {% if app_data.uploaded_files %}
            <div class="documents-list">
                <table class="documents-table">
                    <thead>
                        <tr>
                            <th>Dateiname</th>
                            <th>Größe</th>
                            <th>Hochgeladen am</th>
                            <th>Aktionen</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for file in app_data.uploaded_files %}
                        <tr>
                            <td>{{ file.original_name }}</td>
                            <td>{{ "%.2f"|format(file.size / 1024 / 1024) }} MB</td>
                            <td>{{ file.uploaded_at[:10] }} {{ file.uploaded_at[11:16] }}</td>
                            <td>
                                <a href="{{ url_for('download_file', session_id=session_id, filename=file.stored_name) }}"
                                   class="btn btn-small btn-secondary">Herunterladen</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="info-message">Keine Dokumente hochgeladen</p>
        {% endif %}
    </div>

    <div class="section">
        <h2>Zeitstempel</h2>
        <div class="info-grid">
            <div class="info-item">
                <span class="label">Erstellt am:</span>
                <span class="value">{{ app_data.created_at[:10] }} {{ app_data.created_at[11:16] }}</span>
            </div>
            <div class="info-item">
                <span class="label">Zuletzt aktualisiert:</span>
                <span class="value">{{ app_data.updated_at[:10] }} {{ app_data.updated_at[11:16] }}</span>
            </div>
        </div>
    </div>
</div>

<style>
.application-view {
    max-width: 900px;
    margin: 0 auto;
}

.section {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.section h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #333;
    border-bottom: 2px solid #007bff;
    padding-bottom: 10px;
}

.section h3 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #555;
    font-size: 1em;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.info-item {
    display: flex;
    flex-direction: column;
}

.info-item .label {
    font-weight: bold;
    color: #666;
    font-size: 0.9em;
    margin-bottom: 4px;
}

.info-item .value {
    color: #333;
    font-size: 1em;
}

.text-responses {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.response-item {
    background: white;
    padding: 15px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
}

.response-text {
    white-space: pre-wrap;
    line-height: 1.6;
    margin: 0;
    color: #333;
}

.documents-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.documents-table th,
.documents-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.documents-table th {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #555;
}

.documents-table tr:hover {
    background-color: #f9f9f9;
}

.btn-small {
    padding: 6px 12px;
    font-size: 0.9em;
}

.info-message {
    color: #666;
    font-style: italic;
    margin: 0;
}
</style>
{% endblock %}