{% extends 'base.html' %}

{% block title %}Notifications — WildWatch{% endblock %}

{% block content %}
<div style="background:linear-gradient(135deg,var(--forest-deep),var(--forest-mid)); padding:36px 0 24px;">
  <div class="container">
    <h1 style="font-family:var(--font-display); color:var(--cream); font-size:1.8rem; margin-bottom:4px;">🔔 Notifications</h1>
    <p style="color:var(--sage); font-size:0.9rem;">{{ notifications.count }} notification{{ notifications.count|pluralize }}</p>
  </div>
</div>

<div class="container py-md" style="max-width:700px;">
  {% if notifications %}
  <div style="display:flex; flex-direction:column; gap:8px;">
    {% for notif in notifications %}
    <a href="{{ notif.link|default:'#' }}" style="text-decoration:none;">
      <div style="background:var(--bg-card); border-radius:var(--radius-lg); padding:16px 20px; border:1px solid var(--border-light); display:flex; align-items:center; gap:14px; transition:all 0.2s; {% if not notif.is_read %}border-left:3px solid var(--moss); background:rgba(90,138,74,0.04);{% endif %}">
        {% if notif.sender and notif.sender.profile.profile_photo %}
          <img src="{{ notif.sender.profile.profile_photo.url }}" style="width:40px;height:40px;border-radius:50%;object-fit:cover;flex-shrink:0;" alt="">
        {% elif notif.sender %}
          <div style="width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--moss),var(--earth-warm));display:flex;align-items:center;justify-content:center;color:white;font-size:0.9rem;font-weight:700;flex-shrink:0;">{{ notif.sender.username|first|upper }}</div>
        {% else %}
          <div style="width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--forest-light),var(--moss));display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;">🌿</div>
        {% endif %}

        <div style="flex:1; min-width:0;">
          <p style="font-size:0.9rem; color:var(--text-primary); margin:0; font-weight:{% if not notif.is_read %}600{% else %}400{% endif %};">{{ notif.message }}</p>
          <p style="font-size:0.75rem; color:var(--text-muted); margin:3px 0 0;">{{ notif.created_at|timesince }} ago</p>
        </div>

        <div style="flex-shrink:0;">
          {% if notif.notif_type == 'like' %}<span style="font-size:1.1rem;">❤️</span>
          {% elif notif.notif_type == 'comment' %}<span style="font-size:1.1rem;">💬</span>
          {% elif notif.notif_type == 'follow' %}<span style="font-size:1.1rem;">👤</span>
          {% elif notif.notif_type == 'achievement' %}<span style="font-size:1.1rem;">🏆</span>
          {% elif notif.notif_type == 'referral' %}<span style="font-size:1.1rem;">🤝</span>
          {% elif notif.notif_type == 'announcement' %}<span style="font-size:1.1rem;">📣</span>
          {% endif %}
        </div>
      </div>
    </a>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">🔔</div>
    <h3 class="empty-title">No notifications yet</h3>
    <p style="color:var(--text-muted); margin-top:8px;">When someone likes or comments on your photos, you'll see it here.</p>
  </div>
  {% endif %}
</div>
{% endblock %}