{% extends "base.html" %}
{% block title %}Alle Posts - LinkedIn Posts{% endblock %}

{% block head %}
<style>
    .post-card {
        background: linear-gradient(135deg, rgba(61, 72, 72, 0.3) 0%, rgba(45, 56, 56, 0.4) 100%);
        border: 1px solid rgba(61, 72, 72, 0.6);
        transition: all 0.2s ease;
    }
    .post-card:hover {
        border-color: rgba(255, 199, 0, 0.3);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    .customer-header {
        background: linear-gradient(90deg, rgba(255, 199, 0, 0.1) 0%, transparent 100%);
    }
    .score-ring {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 0.75rem;
    }
    .score-high { background: rgba(34, 197, 94, 0.2); border: 2px solid rgba(34, 197, 94, 0.5); color: #86efac; }
    .score-medium { background: rgba(234, 179, 8, 0.2); border: 2px solid rgba(234, 179, 8, 0.5); color: #fde047; }
    .score-low { background: rgba(239, 68, 68, 0.2); border: 2px solid rgba(239, 68, 68, 0.5); color: #fca5a5; }
</style>
{% endblock %}

{% block content %}
<div class="mb-8 flex items-center justify-between">
    <div>
        <h1 class="text-3xl font-bold text-white mb-2">Alle Posts</h1>
        <p class="text-gray-400">{{ total_posts }} generierte Posts</p>
    </div>
    <a href="/create" class="px-4 py-2.5 btn-primary rounded-lg font-medium flex items-center gap-2">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
        Neuer Post
    </a>
</div>

{% if error %}
<div class="bg-red-900/50 border border-red-500 text-red-200 px-4 py-3 rounded-lg mb-6">
    <strong>Error:</strong> {{ error }}
</div>
{% endif %}

{% if customers_with_posts %}
<div class="space-y-8">
    {% for item in customers_with_posts %}
    {% if item.posts %}
    <div class="card-bg rounded-xl border overflow-hidden">
        <!-- Customer Header -->
        <div class="customer-header px-6 py-4 border-b border-brand-bg-light">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="w-12 h-12 rounded-xl flex items-center justify-center shadow-lg overflow-hidden {{ 'bg-brand-highlight' if not item.profile_picture else '' }}">
                        {% if item.profile_picture %}
                        <img src="{{ item.profile_picture }}" alt="{{ item.customer.name }}" class="w-full h-full object-cover" loading="lazy" referrerpolicy="no-referrer">
                        {% else %}
                        <span class="text-brand-bg-dark font-bold text-lg">{{ item.customer.name[0] | upper }}</span>
                        {% endif %}
                    </div>
                    <div>
                        <h3 class="font-semibold text-white text-lg">{{ item.customer.name }}</h3>
                        <p class="text-sm text-gray-400">{{ item.customer.company_name or 'Kein Unternehmen' }}</p>
                    </div>
                </div>
                <div class="flex items-center gap-4">
                    <span class="px-4 py-1.5 bg-brand-bg rounded-full text-sm text-gray-300 font-medium">
                        {{ item.post_count }} Post{{ 's' if item.post_count != 1 else '' }}
                    </span>
                </div>
            </div>
        </div>

        <!-- Posts Grid -->
        <div class="p-4">
            <div class="grid gap-3">
                {% for post in item.posts %}
                <a href="/posts/{{ post.id }}" class="post-card rounded-xl p-4 block group">
                    <div class="flex items-center gap-4">
                        <!-- Score Circle -->
                        {% if post.critic_feedback and post.critic_feedback | length > 0 %}
                        {% set score = post.critic_feedback[-1].overall_score %}
                        <div class="score-ring flex-shrink-0 {{ 'score-high' if score >= 85 else 'score-medium' if score >= 70 else 'score-low' }}">
                            {{ score }}
                        </div>
                        {% else %}
                        <div class="score-ring flex-shrink-0 bg-brand-bg-dark border-2 border-brand-bg-light text-gray-500">
                            —
                        </div>
                        {% endif %}

                        <!-- Content -->
                        <div class="flex-1 min-w-0">
                            <div class="flex items-start justify-between gap-3">
                                <h4 class="font-medium text-white group-hover:text-brand-highlight transition-colors truncate">
                                    {{ post.topic_title or 'Untitled' }}
                                </h4>
                                <span class="flex-shrink-0 px-2 py-0.5 text-xs rounded font-medium {{ 'bg-green-600/20 text-green-400 border border-green-600/30' if post.status == 'approved' else 'bg-yellow-600/20 text-yellow-400 border border-yellow-600/30' }}">
                                    {{ post.status | capitalize }}
                                </span>
                            </div>
                            <div class="flex items-center gap-4 mt-1.5 text-sm text-gray-500">
                                <span class="flex items-center gap-1.5">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                    {{ post.created_at.strftime('%d.%m.%Y') if post.created_at else 'N/A' }}
                                </span>
                                <span class="flex items-center gap-1.5">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                    {{ post.created_at.strftime('%H:%M') if post.created_at else '' }}
                                </span>
                                <span class="flex items-center gap-1.5">
                                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
                                    {{ post.iterations }} Iteration{{ 's' if post.iterations != 1 else '' }}
                                </span>
                            </div>
                        </div>

                        <!-- Arrow -->
                        <svg class="w-5 h-5 text-gray-600 group-hover:text-brand-highlight transition-colors flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                        </svg>
                    </div>
                </a>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
    {% endfor %}
</div>
{% else %}
<div class="card-bg rounded-xl border p-12 text-center">
    <div class="w-20 h-20 bg-brand-bg rounded-2xl flex items-center justify-center mx-auto mb-6">
        <svg class="w-10 h-10 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
    </div>
    <h3 class="text-xl font-semibold text-white mb-2">Noch keine Posts</h3>
    <p class="text-gray-400 mb-6 max-w-md mx-auto">Erstelle deinen ersten LinkedIn Post mit KI-Unterstützung.</p>
    <a href="/create" class="inline-flex items-center gap-2 px-6 py-3 btn-primary font-medium rounded-lg transition-colors">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
        Post erstellen
    </a>
</div>
{% endif %}
{% endblock %}
