{% extends "client_portal/base.html" %}
{% from "components/ui.html" import page_header %}

{% block title %}{{ _('Activity Feed') }} - {{ _('Client Portal') }}{% endblock %}

{% block content %}
{% set breadcrumbs = [
    {'text': _('Client Portal'), 'url': url_for('client_portal.dashboard')},
    {'text': _('Activity Feed')}
] %}

{{ page_header(
    icon_class='fas fa-history',
    title_text=_('Activity Feed'),
    subtitle_text=_('Recent project activities'),
    breadcrumbs=breadcrumbs
) }}

{% if feed_items %}
<div class="space-y-4">
    {% for item in feed_items %}
    <div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden">
        <div class="p-6">
            <div class="flex items-start gap-4">
                <div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary/80 flex items-center justify-center flex-shrink-0 shadow-md">
                    <i class="fas
                        {% if 'time' in (item.action or '')|lower or item.entity_type == 'time_entry' %}fa-clock
                        {% elif 'comment' in (item.action or '')|lower or item.feed_type == 'comment' %}fa-comment
                        {% elif 'project' in (item.entity_type or '')|lower %}fa-folder-open
                        {% elif 'update' in (item.action or '')|lower or 'edit' in (item.action or '')|lower %}fa-edit
                        {% elif 'create' in (item.action or '')|lower or 'start' in (item.action or '')|lower %}fa-plus-circle
                        {% elif 'delete' in (item.action or '')|lower %}fa-trash
                        {% elif 'stop' in (item.action or '')|lower %}fa-stop-circle
                        {% else %}fa-circle{% endif %}
                        text-white"></i>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-start justify-between mb-2">
                        <div class="flex-1">
                            <h3 class="font-bold text-text-light dark:text-text-dark mb-1">
                                {{ item.description or (item.action|replace('_', ' ')|title) }}
                            </h3>
                            <div class="flex flex-wrap items-center gap-3 text-sm">
                                {% if item.project_name %}
                                <div class="flex items-center space-x-1 text-text-muted-light dark:text-text-muted-dark">
                                    <i class="fas fa-folder text-primary"></i>
                                    <span>{{ item.project_name }}</span>
                                </div>
                                {% endif %}
                                {% if item.user_display_name %}
                                <div class="flex items-center space-x-1 text-text-muted-light dark:text-text-muted-dark">
                                    <div class="w-5 h-5 bg-primary/10 rounded-full flex items-center justify-center">
                                        <i class="fas fa-user text-primary text-xs"></i>
                                    </div>
                                    <span>{{ item.user_display_name }}</span>
                                </div>
                                {% endif %}
                                <div class="flex items-center space-x-1 text-text-muted-light dark:text-text-muted-dark">
                                    <i class="fas fa-clock"></i>
                                    <span>{{ item.created_at|user_datetime if item.created_at else _('N/A') }}</span>
                                </div>
                            </div>
                        </div>
                        <span class="ml-4 px-3 py-1 text-xs font-semibold rounded-full bg-primary/10 text-primary">
                            {{ (item.action or 'activity')|replace('_', ' ')|title }}
                        </span>
                    </div>
                    {% if item.link_url %}
                    <a href="{{ item.link_url }}" class="text-sm text-primary hover:underline mt-2 inline-block">{{ _('View details') }}</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-border-dark rounded-xl shadow-lg p-12">
    <div class="text-center">
        <div class="bg-gray-100 dark:bg-gray-800 rounded-full p-8 w-32 h-32 mx-auto mb-6 flex items-center justify-center">
            <i class="fas fa-history text-5xl text-gray-400"></i>
        </div>
        <h3 class="text-xl font-semibold text-text-light dark:text-text-dark mb-2">{{ _('No Activity') }}</h3>
        <p class="text-text-muted-light dark:text-text-muted-dark max-w-md mx-auto">
            {{ _('No recent activity to display. Activity will appear here as projects are updated and time entries are logged.') }}
        </p>
    </div>
</div>
{% endif %}
{% endblock %}