{% extends "shared/base_dashboard.html" %}
{% load static %}

{% block title %}Notificações - Chaplin{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
    
    <div class="flex justify-between items-center mb-8">
        <div>
            <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Notificações</h1>
            <p class="text-gray-500 dark:text-gray-400 mt-1">Suas notificações mais recentes</p>
        </div>
    </div>

    <div class="space-y-3">
        {% for notif in notifications %}
        <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-5 flex items-start gap-4
            {% if not notif.lida %}border-l-4 border-l-orange-400{% endif %}">

            
            <div class="shrink-0 w-10 h-10 rounded-full flex items-center justify-center
                {% if notif.tipo == 'tarefa_atribuida' %}bg-blue-100 dark:bg-blue-900/30
                {% elif notif.tipo == 'tarefa_concluida' %}bg-green-100 dark:bg-green-900/30
                {% elif notif.tipo == 'nova_mensagem' %}bg-purple-100 dark:bg-purple-900/30
                {% elif notif.tipo == 'tarefa_criada' %}bg-yellow-100 dark:bg-yellow-900/30
                {% else %}bg-gray-100 dark:bg-gray-700{% endif %}">
                {% if notif.tipo == 'tarefa_atribuida' %}
                <svg class="w-5 h-5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                {% elif notif.tipo == 'tarefa_concluida' %}
                <svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                {% elif notif.tipo == 'nova_mensagem' %}
                <svg class="w-5 h-5 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
                {% else %}
                <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
                {% endif %}
            </div>

            
            <div class="flex-1 min-w-0">
                <div class="flex items-start justify-between gap-2">
                    <p class="font-semibold text-gray-900 dark:text-white text-sm">{{ notif.titulo }}</p>
                    <span class="text-xs text-gray-400 whitespace-nowrap shrink-0">{{ notif.created_at|date:"d/m H:i" }}</span>
                </div>
                {% if notif.mensagem %}
                <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{ notif.mensagem }}</p>
                {% endif %}
                {% if notif.task %}
                <a href="{% url 'tasks:detail' notif.task.pk %}" class="inline-block mt-2 text-xs text-orange-500 hover:text-orange-600 font-medium">
                    Ver tarefa →
                </a>
                {% endif %}
            </div>
        </div>
        {% empty %}
        <div class="text-center py-20 text-gray-400 dark:text-gray-500">
            <svg class="w-16 h-16 mx-auto mb-4 opacity-30" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
            </svg>
            <p class="text-sm font-medium">Nenhuma notificação por aqui.</p>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}