{% extends 'base.html.twig' %}

{% block title %}Meine Immobilien - {{ parent() }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .immobilien-list {
            margin-top: 20px;
        }

        .immobilie-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

        .immobilie-card h3 {
            color: #333;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 2px solid #4CAF50;
        }

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

        .detail-item {
            padding: 10px;
            background-color: #f8f9fa;
            border-radius: 4px;
        }

        .detail-item label {
            display: block;
            font-weight: 500;
            color: #666;
            font-size: 12px;
            margin-bottom: 5px;
        }

        .detail-item value {
            display: block;
            color: #333;
            font-size: 16px;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .empty-state h2 {
            color: #666;
            margin-bottom: 20px;
        }

        .empty-state a {
            display: inline-block;
            padding: 12px 24px;
            background-color: #4CAF50;
            color: white;
            text-decoration: none;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        .empty-state a:hover {
            background-color: #45a049;
        }
    </style>
{% endblock %}

{% block body %}
    <h1>Meine Immobilien</h1>

    {% if immobilien|length > 0 %}
        <div class="immobilien-list">
            {% for immobilie in immobilien %}
                <div class="immobilie-card">
                    <h3>{{ immobilie.adresse }}</h3>
                    <div class="immobilie-details">
                        <div class="detail-item">
                            <label>Typ</label>
                            <value>{{ immobilie.typ.label }}</value>
                        </div>
                        <div class="detail-item">
                            <label>Kaufpreis</label>
                            <value>{{ immobilie.kaufpreis|number_format(0, ',', '.') }} €</value>
                        </div>
                        <div class="detail-item">
                            <label>Wohnfläche</label>
                            <value>{{ immobilie.wohnflaeche }} m²</value>
                        </div>
                        <div class="detail-item">
                            <label>Nutzfläche</label>
                            <value>{{ immobilie.nutzflaeche }} m²</value>
                        </div>
                        <div class="detail-item">
                            <label>Gesamtfläche</label>
                            <value>{{ immobilie.gesamtflaeche }} m²</value>
                        </div>
                        <div class="detail-item">
                            <label>Zimmer</label>
                            <value>{{ immobilie.zimmer }}</value>
                        </div>
                        {% if immobilie.baujahr %}
                            <div class="detail-item">
                                <label>Baujahr</label>
                                <value>{{ immobilie.baujahr }}</value>
                            </div>
                        {% endif %}
                        {% if immobilie.bundesland %}
                            <div class="detail-item">
                                <label>Bundesland</label>
                                <value>{{ immobilie.bundesland.name }}</value>
                            </div>
                        {% endif %}
                        {% if immobilie.heizungstyp %}
                            <div class="detail-item">
                                <label>Heizungstyp</label>
                                <value>{{ immobilie.heizungstyp.name }}</value>
                            </div>
                        {% endif %}
                        <div class="detail-item">
                            <label>Garage</label>
                            <value>{{ immobilie.garage ? 'Ja' : 'Nein' }}</value>
                        </div>
                        <div class="detail-item">
                            <label>Erstellt am</label>
                            <value>{{ immobilie.createdAt|date('d.m.Y H:i') }}</value>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <div class="empty-state">
            <h2>Sie haben noch keine Immobilien gespeichert</h2>
            <p>Nutzen Sie den Immobilienrechner, um Ihre erste Immobilie zu berechnen und zu speichern.</p>
            <a href="{{ path('app_home') }}">Zum Rechner</a>
        </div>
    {% endif %}
{% endblock %}