154 lines
4.7 KiB
Twig
154 lines
4.7 KiB
Twig
{% extends 'base.html.twig' %}
|
|
|
|
{% block title %}Immobilien - {{ parent() }}{% endblock %}
|
|
|
|
{% block stylesheets %}
|
|
{{ parent() }}
|
|
<style>
|
|
.immobilien-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
.immobilie-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
overflow: hidden;
|
|
transition: transform 0.2s, box-shadow 0.2s;
|
|
}
|
|
.immobilie-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
|
|
}
|
|
.immobilie-header {
|
|
background: #4CAF50;
|
|
color: white;
|
|
padding: 15px;
|
|
}
|
|
.immobilie-typ {
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
opacity: 0.9;
|
|
}
|
|
.immobilie-body {
|
|
padding: 20px;
|
|
}
|
|
.immobilie-preis {
|
|
font-size: 24px;
|
|
font-weight: bold;
|
|
color: #4CAF50;
|
|
margin: 10px 0;
|
|
}
|
|
.immobilie-details {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 15px 0;
|
|
}
|
|
.immobilie-details li {
|
|
padding: 5px 0;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
.immobilie-details li:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.badge {
|
|
display: inline-block;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: bold;
|
|
}
|
|
.badge-success {
|
|
background: #e8f5e9;
|
|
color: #4CAF50;
|
|
}
|
|
.btn-details {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 10px;
|
|
background: #4CAF50;
|
|
color: white;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
margin-top: 15px;
|
|
}
|
|
.btn-details:hover {
|
|
background: #45a049;
|
|
color: white;
|
|
}
|
|
.page-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.btn-primary {
|
|
display: inline-block;
|
|
padding: 10px 20px;
|
|
background: #4CAF50;
|
|
color: white;
|
|
text-decoration: none;
|
|
border-radius: 4px;
|
|
}
|
|
.btn-primary:hover {
|
|
background: #45a049;
|
|
color: white;
|
|
}
|
|
.no-results {
|
|
text-align: center;
|
|
padding: 40px;
|
|
color: #666;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="page-header">
|
|
<h2>Verfügbare Immobilien</h2>
|
|
<div>
|
|
<a href="{{ path('app_immobilie_suche') }}" class="btn-primary">Erweiterte Suche</a>
|
|
<a href="/api" class="btn-primary">API</a>
|
|
</div>
|
|
</div>
|
|
|
|
{% if immobilien|length > 0 %}
|
|
<div class="immobilien-grid">
|
|
{% for immobilie in immobilien %}
|
|
<div class="immobilie-card">
|
|
<div class="immobilie-header">
|
|
<div class="immobilie-typ">{{ immobilie.typ.label }}</div>
|
|
<strong>{{ immobilie.adresse }}</strong>
|
|
</div>
|
|
<div class="immobilie-body">
|
|
<div class="immobilie-preis">{{ immobilie.preis|number_format(2, ',', '.') }} €</div>
|
|
|
|
<ul class="immobilie-details">
|
|
<li>📐 Fläche: {{ immobilie.flaeche }} m²</li>
|
|
<li>🛏️ Zimmer: {{ immobilie.zimmer }}</li>
|
|
<li>💰 Preis/m²: {{ immobilie.preisProQm|number_format(2, ',', '.') }} €</li>
|
|
{% if immobilie.baujahr %}
|
|
<li>📅 Baujahr: {{ immobilie.baujahr }}</li>
|
|
{% endif %}
|
|
{% if immobilie.garage %}
|
|
<li>🚗 <span class="badge badge-success">Mit Garage</span></li>
|
|
{% endif %}
|
|
</ul>
|
|
|
|
<a href="{{ path('app_immobilie_show', {id: immobilie.id}) }}" class="btn-details">
|
|
Details ansehen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% else %}
|
|
<div class="no-results">
|
|
<h3>Keine Immobilien verfügbar</h3>
|
|
<p>Aktuell sind keine Immobilien in unserem System verfügbar.</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|