{% extends 'base.html.twig' %}
{% block title %}Notificaciones – HuertosCastellon.es{% endblock %}
{% block meta_robots %}noindex, nofollow{% endblock %}

{% block body %}

<header class="page-header">
    <div class="container">
        <div class="section-header-sm" style="color:rgba(255,255,255,.65)">Bandeja</div>
        <h1><i class="bi bi-bell me-2" style="opacity:.8"></i>Notificaciones</h1>
    </div>
</header>

<div class="container" style="padding-top:1.5rem; padding-bottom:4rem; max-width:680px">

    {% if notificaciones is empty %}
    <div class="content-card p-5 text-center">
        <div style="font-size:3rem; opacity:.2; margin-bottom:1rem">🔔</div>
        <h2 style="font-size:1rem; font-weight:800; color:#1a3528">Sin notificaciones</h2>
        <p class="text-muted small mt-1">Aquí aparecerán las respuestas del propietario a tus solicitudes.</p>
    </div>
    {% else %}
    <div class="d-flex flex-column gap-2">
        {% for n in notificaciones %}
        <div class="content-card p-0 overflow-hidden" style="{% if not n.isLeida() %}border-left:3px solid var(--verde-medio){% endif %}">
            <div class="p-3 d-flex gap-3 align-items-start">
                <div style="width:40px; height:40px; border-radius:10px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.1rem;
                    background:{% if not n.isLeida() %}var(--verde-palido){% else %}#f5f5f5{% endif %}">
                    {% if 'aceptada' in n.mensaje|lower %}✅{% elseif 'rechazada' in n.mensaje|lower or 'no ha sido' in n.mensaje|lower %}❌{% else %}📋{% endif %}
                </div>
                <div class="flex-grow-1 min-width-0">
                    <p class="mb-1 {{ not n.isLeida() ? 'fw-semibold' : 'text-muted' }}" style="font-size:.9rem; color:{% if not n.isLeida() %}#1a3528{% else %}#6c757d{% endif %}">
                        {{ n.mensaje }}
                    </p>
                    <div class="d-flex align-items-center gap-3 flex-wrap">
                        <span style="font-size:.75rem; color:#adb5bd">{{ n.creadaEn|date('d/m/Y · H:i') }}</span>
                        {% if n.reserva %}
                        <a href="{{ path('app_mi_area') }}" style="font-size:.78rem; color:var(--verde-medio); text-decoration:none; font-weight:600">
                            Ver mis reservas <i class="bi bi-arrow-right ms-1"></i>
                        </a>
                        {% endif %}
                    </div>
                </div>
                {% if not n.isLeida() %}
                <div style="width:8px; height:8px; background:var(--verde-medio); border-radius:50%; flex-shrink:0; margin-top:4px"></div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

</div>
{% endblock %}