{% extends 'layouts/base.html' %}
{% load social_filters %}
{% load social_icons %}
{% load action_icons %}
{% load star_rating %}

{% block title %}Comment Detail - {{ platform_name }}{% endblock %}
{% block page_title %}Comment Details{% endblock %}
{% block page_subtitle %}View detailed analysis from {{ platform_name }}{% endblock %}

{% block content %}

<!-- Page Header with Gradient -->
<div class="page-header-gradient">
    <div class="flex justify-between items-center">
        <div class="flex items-center gap-3">
            <a href="{% url 'social:comments_list' platform_type %}" class="inline-flex items-center justify-center w-10 h-10 bg-white/10 border-2 border-white/30 rounded-xl hover:bg-white hover:text-navy transition">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <div>
                <h1 class="text-2xl font-bold mb-1">Comment Details</h1>
                <p class="text-blue-100 text-sm">View detailed analysis from {{ platform_name }}</p>
            </div>
        </div>
        
        <div class="flex items-center gap-2">
            <div class="text-white">
                {% social_icon platform_type size=24 %}
            </div>
            <span class="font-semibold">{{ platform_name }}</span>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
    <!-- Main Content -->
    <div class="lg:col-span-8">
        <div class="space-y-6">
            <!-- Main Comment Card -->
            <div class="hh-card">
                <div class="hh-card-body">
                    <div class="flex gap-4 mb-6">
                        <div class="w-16 h-16 rounded-full bg-navy text-white flex items-center justify-center text-2xl font-bold flex-shrink-0 relative">
                            {{ comment.author_name|slice:":1"|upper }}
                            <span class="absolute bottom-0 right-0 w-4 h-4 bg-green-500 border-2 border-white rounded-full"></span>
                        </div>
                        
                        <div class="flex-1">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <h3 class="text-xl font-bold mb-1">{{ comment.author_name }}</h3>
                                    <div class="flex flex-wrap gap-2">
                                        {% if comment.synced_via_webhook %}
                                            <span class="hh-badge hh-badge-success">
                                                <i data-lucide="zap" class="w-3 h-3 inline mr-1"></i> Real-time
                                            </span>
                                        {% endif %}
                                        
                                        {% if comment.ai_analysis %}
                                            <span class="hh-badge hh-badge-info">
                                                <i data-lucide="cpu" class="w-3 h-3 inline mr-1"></i> AI Analyzed
                                            </span>
                                        {% endif %}
                                        
                                        {% if comment.rating %}
                                            <span class="hh-badge" style="background: #fef3c7; color: #92400e;">
                                                <i data-lucide="star" class="w-3 h-3 inline mr-1"></i> {{ comment.rating }}/5
                                            </span>
                                        {% endif %}
                                    </div>
                                </div>
                                
                                <div class="text-right">
                                    <span class="text-sm text-gray-500 flex items-center gap-1">
                                        <i data-lucide="calendar" class="w-4 h-4"></i>
                                        {{ comment.created_at|date:"M d, Y H:i" }}
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-gray-50 rounded-xl p-4 mb-4">
                        <p class="text-gray-800">{{ comment.text }}</p>
                    </div>
                    
                    <!-- Media -->
                    {% if comment.media_url %}
                        <div class="rounded-xl overflow-hidden mb-4">
                            <img src="{{ comment.media_url }}" alt="Comment media" class="w-full h-auto">
                        </div>
                    {% endif %}
                    
                    <!-- Engagement Stats -->
                    <div class="grid grid-cols-3 gap-4 pt-4 border-t border-gray-200">
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <i data-lucide="heart" class="w-8 h-8 text-red-500"></i>
                            <div>
                                <div class="text-2xl font-bold">{{ comment.like_count }}</div>
                                <div class="text-sm text-gray-500">Likes</div>
                            </div>
                        </div>
                        
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <i data-lucide="message-circle" class="w-8 h-8 text-navy"></i>
                            <div>
                                <div class="text-2xl font-bold">{{ comment.reply_count }}</div>
                                <div class="text-sm text-gray-500">Replies</div>
                            </div>
                        </div>
                        
                        <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                            <i data-lucide="fingerprint" class="w-8 h-8 text-gray-400"></i>
                            <div>
                                <div class="text-sm font-mono">{{ comment.comment_id|truncatechars:12 }}</div>
                                <div class="text-sm text-gray-500">ID</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Replies Section -->
            {% if replies %}
            <div class="hh-card">
                <div class="hh-card-header">
                    <div class="flex items-center gap-2">
                        <i data-lucide="message-circle" class="w-5 h-5 text-navy"></i>
                        <h5 class="font-semibold">Replies ({{ replies|length }})</h5>
                    </div>
                </div>
                
                <div class="hh-card-body">
                    <div class="space-y-3">
                        {% for reply in replies %}
                        <div class="bg-gray-50 rounded-xl p-4 border border-gray-200">
                            <div class="flex justify-between items-start mb-2">
                                <div>
                                    <div class="font-bold flex items-center gap-2">
                                        {{ reply.author_name }}
                                        {% if reply.author_name == 'You' %}
                                            <span class="hh-badge hh-badge-info">You</span>
                                        {% endif %}
                                    </div>
                                    <span class="text-sm text-gray-500 flex items-center gap-1">
                                        <i data-lucide="calendar" class="w-3 h-3"></i>
                                        {{ reply.created_at|date:"M d, Y H:i" }}
                                    </span>
                                </div>
                            </div>
                            <p class="mb-1">{{ reply.text }}</p>
                            <code class="text-xs text-gray-500">{{ reply.reply_id|truncatechars:10 }}</code>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
            
            <!-- Reply Form -->
            <div class="hh-card">
                <div class="hh-card-header bg-gradient-to-r from-navy to-blue text-white">
                    <div class="flex items-center gap-2">
                        <i data-lucide="reply" class="w-5 h-5"></i>
                        <h5 class="font-semibold">Post a Reply</h5>
                    </div>
                </div>
                
                <div class="hh-card-body">
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-4">
                            <textarea 
                                id="reply-text" 
                                name="text" 
                                rows="5" 
                                placeholder="Write your thoughtful reply here..."
                                class="hh-form-textarea"
                                required></textarea>
                            
                            <p class="text-sm text-gray-500 mt-2 flex items-center gap-1">
                                <i data-lucide="info" class="w-4 h-4"></i>
                                Your reply will be posted publicly to platform
                            </p>
                        </div>
                        
                        <div class="flex gap-3">
                            <button type="submit" class="hh-btn hh-btn-primary">
                                <i data-lucide="send" class="w-4 h-4"></i>
                                Post Reply
                            </button>
                            
                            <a href="{% url 'social:comments_list' platform_type %}" class="hh-btn hh-btn-secondary">
                                <i data-lucide="x" class="w-4 h-4"></i>
                                Cancel
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->
    <div class="lg:col-span-4">
        <div class="space-y-6">
            <!-- Comment Info -->
            <div class="hh-section-card">
                <div class="hh-section-header">
                    <div class="flex items-center gap-3">
                        <div class="hh-section-icon">
                            <i data-lucide="info" class="w-5 h-5"></i>
                        </div>
                        <h3 class="text-lg font-semibold">Comment Information</h3>
                    </div>
                </div>
                
                <div class="space-y-3">
                    <div class="flex justify-between py-2 border-b border-gray-200">
                        <span class="text-sm text-gray-500 font-semibold">Platform</span>
                        <span class="text-sm font-semibold">{{ platform_name }}</span>
                    </div>
                    
                    {% if platform_type == 'META' and comment.source_platform %}
                    <div class="flex justify-between py-2 border-b border-gray-200">
                        <span class="text-sm text-gray-500 font-semibold">Source</span>
                        <span class="text-sm font-semibold">
                            {% if comment.source_platform == 'FB' %}
                                Facebook
                            {% elif comment.source_platform == 'IG' %}
                                Instagram
                            {% endif %}
                        </span>
                    </div>
                    {% endif %}
                    
                    <div class="flex justify-between py-2 border-b border-gray-200">
                        <span class="text-sm text-gray-500 font-semibold">Author</span>
                        <span class="text-sm font-semibold">{{ comment.author_name }}</span>
                    </div>
                    
                    <div class="flex justify-between py-2 border-b border-gray-200">
                        <span class="text-sm text-gray-500 font-semibold">Created</span>
                        <span class="text-sm font-semibold">{{ comment.created_at|date:"M d, Y H:i" }}</span>
                    </div>
                    
                    <div class="flex justify-between py-2 border-b border-gray-200">
                        <span class="text-sm text-gray-500 font-semibold">Replies</span>
                        <span class="text-sm font-semibold">{{ replies|length }}</span>
                    </div>
                    
                    <div class="flex justify-between py-2">
                        <span class="text-sm text-gray-500 font-semibold">Sync Method</span>
                        <span class="text-sm font-semibold">
                            {% if comment.synced_via_webhook %}
                                <span class="hh-badge hh-badge-success">
                                    <i data-lucide="zap" class="w-3 h-3 inline mr-1"></i> Webhook
                                </span>
                            {% else %}
                                <span class="hh-badge hh-badge-info">
                                    <i data-lucide="refresh-cw" class="w-3 h-3 inline mr-1"></i> Polling
                                </span>
                            {% endif %}
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- AI Analysis -->
            {% if comment.ai_analysis %}
                <!-- Sentiment -->
                {% if comment.ai_analysis.sentiment %}
                <div class="hh-card border-l-4 border-l-green-500">
                    <div class="hh-card-body">
                        <h5 class="font-semibold mb-4 flex items-center gap-2">
                            <i data-lucide="heart-pulse" class="w-5 h-5 text-green-500"></i>
                            Sentiment Analysis
                        </h5>
                        
                        <div class="grid grid-cols-2 gap-3 mb-4">
                            <div class="p-3 rounded-xl text-center {% if comment.ai_analysis.sentiment.classification.en == 'positive' %}bg-green-100 text-green-800{% elif comment.ai_analysis.sentiment.classification.en == 'negative' %}bg-red-100 text-red-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                                <div class="text-xs text-gray-600 mb-1">English</div>
                                <div class="text-lg font-bold">{{ comment.ai_analysis.sentiment.classification.en|capfirst }}</div>
                            </div>
                            
                            <div class="p-3 rounded-xl text-center {% if comment.ai_analysis.sentiment.classification.ar == 'إيجابي' %}bg-green-100 text-green-800{% elif comment.ai_analysis.sentiment.classification.ar == 'سلبي' %}bg-red-100 text-red-800{% else %}bg-gray-100 text-gray-800{% endif %}">
                                <div class="text-xs text-gray-600 mb-1">العربية</div>
                                <div class="text-lg font-bold" style="direction: rtl;">{{ comment.ai_analysis.sentiment.classification.ar }}</div>
                            </div>
                        </div>
                        
                        <div class="space-y-2">
                            <div class="flex justify-between py-1">
                                <span class="text-sm text-gray-500">Sentiment Score</span>
                                <span class="text-sm font-semibold">{{ comment.ai_analysis.sentiment.score|floatformat:2 }}</span>
                            </div>
                            
                            <div class="flex justify-between py-1">
                                <span class="text-sm text-gray-500">Confidence</span>
                                <span class="text-sm font-semibold">{{ comment.ai_analysis.sentiment.confidence|floatformat:0 }}%</span>
                            </div>
                            
                            {% if comment.ai_analysis.sentiment.urgency_level %}
                            <div class="flex justify-between py-1">
                                <span class="text-sm text-gray-500">Urgency Level</span>
                                <span class="text-sm font-semibold">
                                    {% if comment.ai_analysis.sentiment.urgency_level.en == 'critical' %}
                                        <span class="hh-badge hh-badge-danger">{{ comment.ai_analysis.sentiment.urgency_level.en }}</span>
                                    {% elif comment.ai_analysis.sentiment.urgency_level.en == 'high' %}
                                        <span class="hh-badge hh-badge-warning">{{ comment.ai_analysis.sentiment.urgency_level.en }}</span>
                                    {% elif comment.ai_analysis.sentiment.urgency_level.en == 'medium' %}
                                        <span class="hh-badge hh-badge-info">{{ comment.ai_analysis.sentiment.urgency_level.en }}</span>
                                    {% else %}
                                        <span class="hh-badge hh-badge-success">{{ comment.ai_analysis.sentiment.urgency_level.en }}</span>
                                    {% endif %}
                                </span>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- Actionable Insights -->
                {% if comment.ai_analysis.actionable_insights %}
                <div class="hh-card border-l-4 border-l-yellow-500">
                    <div class="hh-card-body">
                        <h5 class="font-semibold mb-4 flex items-center gap-2">
                            <i data-lucide="lightbulb" class="w-5 h-5 text-yellow-500"></i>
                            Actionable Insights
                        </h5>
                        
                        {% if comment.ai_analysis.actionable_insights.primary_concern %}
                        <div class="mb-4 p-3 bg-gray-50 rounded-xl">
                            <div class="text-xs text-gray-500 mb-1">Primary Concern</div>
                            <div class="font-semibold mb-1">{{ comment.ai_analysis.actionable_insights.primary_concern.en }}</div>
                            <div class="text-sm text-gray-600" style="direction: rtl;">{{ comment.ai_analysis.actionable_insights.primary_concern.ar }}</div>
                        </div>
                        {% endif %}
                        
                        {% if comment.ai_analysis.actionable_insights.requires_followup is not None %}
                        <div class="flex justify-between py-1">
                            <span class="text-sm text-gray-500">Requires Follow-up</span>
                            <span class="text-sm font-semibold">
                                {% if comment.ai_analysis.actionable_insights.requires_followup %}
                                    <span class="hh-badge hh-badge-danger">Yes</span>
                                {% else %}
                                    <span class="hh-badge hh-badge-success">No</span>
                                {% endif %}
                            </span>
                        </div>
                        {% endif %}
                        
                        {% if comment.ai_analysis.actionable_insights.followup_priority %}
                        <div class="flex justify-between py-1">
                            <span class="text-sm text-gray-500">Follow-up Priority</span>
                            <span class="text-sm font-semibold">
                                {% if comment.ai_analysis.actionable_insights.followup_priority.en == 'urgent' %}
                                    <span class="hh-badge hh-badge-danger">{{ comment.ai_analysis.actionable_insights.followup_priority.en }}</span>
                                {% elif comment.ai_analysis.actionable_insights.followup_priority.en == 'high' %}
                                    <span class="hh-badge hh-badge-warning">{{ comment.ai_analysis.actionable_insights.followup_priority.en }}</span>
                                {% else %}
                                    <span class="hh-badge hh-badge-info">{{ comment.ai_analysis.actionable_insights.followup_priority.en }}</span>
                                {% endif %}
                            </span>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
                
                <!-- Business Intelligence -->
                {% if comment.ai_analysis.business_intelligence %}
                <div class="hh-card border-l-4 border-l-blue-500">
                    <div class="hh-card-body">
                        <h5 class="font-semibold mb-4 flex items-center gap-2">
                            <i data-lucide="trending-up" class="w-5 h-5 text-blue-500"></i>
                            Business Intelligence
                        </h5>
                        
                        {% if comment.ai_analysis.business_intelligence.patient_satisfaction_score %}
                        <div class="text-center mb-4 p-4 rounded-xl {% if comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 80 %}bg-green-100{% elif comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 60 %}bg-yellow-100{% else %}bg-red-100{% endif %}">
                            <div class="text-sm text-gray-600 mb-2">Patient Satisfaction Score</div>
                            <div class="text-4xl font-bold {% if comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 80 %}text-green-600{% elif comment.ai_analysis.business_intelligence.patient_satisfaction_score >= 60 %}text-yellow-600{% else %}text-red-600{% endif %}">
                                {{ comment.ai_analysis.business_intelligence.patient_satisfaction_score }}
                            </div>
                        </div>
                        {% endif %}
                        
                        {% if comment.ai_analysis.business_intelligence.retention_risk %}
                        <div class="flex justify-between py-1">
                            <span class="text-sm text-gray-500">Retention Risk</span>
                            <span class="text-sm font-semibold">
                                {% if comment.ai_analysis.business_intelligence.retention_risk.level == 'high' %}
                                    <span class="hh-badge hh-badge-danger">{{ comment.ai_analysis.business_intelligence.retention_risk.level }}</span>
                                {% elif comment.ai_analysis.business_intelligence.retention_risk.level == 'medium' %}
                                    <span class="hh-badge hh-badge-warning">{{ comment.ai_analysis.business_intelligence.retention_risk.level }}</span>
                                {% else %}
                                    <span class="hh-badge hh-badge-success">{{ comment.ai_analysis.business_intelligence.retention_risk.level }}</span>
                                {% endif %}
                            </span>
                        </div>
                        {% endif %}
                        
                        {% if comment.ai_analysis.business_intelligence.reputation_impact %}
                        <div class="flex justify-between py-1">
                            <span class="text-sm text-gray-500">Reputation Impact</span>
                            <span class="text-sm font-semibold">
                                {% if comment.ai_analysis.business_intelligence.reputation_impact.level == 'severe' %}
                                    <span class="hh-badge hh-badge-danger">{{ comment.ai_analysis.business_intelligence.reputation_impact.level }}</span>
                                {% elif comment.ai_analysis.business_intelligence.reputation_impact.level == 'negative' %}
                                    <span class="hh-badge hh-badge-warning">{{ comment.ai_analysis.business_intelligence.reputation_impact.level }}</span>
                                {% elif comment.ai_analysis.business_intelligence.reputation_impact.level == 'positive' %}
                                    <span class="hh-badge hh-badge-success">{{ comment.ai_analysis.business_intelligence.reputation_impact.level }}</span>
                                {% else %}
                                    <span class="hh-badge hh-badge-info">{{ comment.ai_analysis.business_intelligence.reputation_impact.level }}</span>
                                {% endif %}
                            </span>
                        </div>
                        {% endif %}
                    </div>
                </div>
                {% endif %}
                
                <!-- Keywords -->
                {% if comment.ai_analysis.keywords %}
                <div class="hh-card">
                    <div class="hh-card-header">
                        <div class="flex items-center gap-2">
                            <i data-lucide="tags" class="w-5 h-5 text-navy"></i>
                            <h5 class="font-semibold">Keywords</h5>
                        </div>
                    </div>
                    
                    <div class="hh-card-body">
                        <div class="flex flex-wrap gap-2">
                            {% for keyword in comment.ai_analysis.keywords.en %}
                                <span class="hh-badge hh-badge-info">{{ keyword }}</span>
                            {% endfor %}
                        </div>
                        
                        <div class="flex flex-wrap gap-2 mt-2">
                            {% for keyword in comment.ai_analysis.keywords.ar %}
                                <span class="hh-badge" style="background: #fef3c7; color: #92400e; direction: rtl;">{{ keyword }}</span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- Emotions -->
                {% if comment.ai_analysis.emotions %}
                <div class="hh-card">
                    <div class="hh-card-header">
                        <div class="flex items-center gap-2">
                            <i data-lucide="smile" class="w-5 h-5 text-navy"></i>
                            <h5 class="font-semibold">Emotion Analysis</h5>
                        </div>
                    </div>
                    
                    <div class="hh-card-body">
                        <!-- Joy -->
                        <div class="mb-4">
                            <div class="flex justify-between mb-1">
                                <span class="text-sm font-semibold text-gray-600 flex items-center gap-1">
                                    <i data-lucide="smile" class="w-4 h-4 text-green-500"></i> Joy / فرح
                                </span>
                                <span class="text-sm font-semibold">{{ comment.ai_analysis.emotions.joy|floatformat:0 }}%</span>
                            </div>
                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-green-500 rounded-full" style="width: {{ comment.ai_analysis.emotions.joy|floatformat:0 }}%"></div>
                            </div>
                        </div>
                        
                        <!-- Anger -->
                        <div class="mb-4">
                            <div class="flex justify-between mb-1">
                                <span class="text-sm font-semibold text-gray-600 flex items-center gap-1">
                                    <i data-lucide="angry" class="w-4 h-4 text-red-500"></i> Anger / غضب
                                </span>
                                <span class="text-sm font-semibold">{{ comment.ai_analysis.emotions.anger|floatformat:0 }}%</span>
                            </div>
                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-red-500 rounded-full" style="width: {{ comment.ai_analysis.emotions.anger|floatformat:0 }}%"></div>
                            </div>
                        </div>
                        
                        <!-- Sadness -->
                        <div class="mb-4">
                            <div class="flex justify-between mb-1">
                                <span class="text-sm font-semibold text-gray-600 flex items-center gap-1">
                                    <i data-lucide="frown" class="w-4 h-4 text-gray-500"></i> Sadness / حزن
                                </span>
                                <span class="text-sm font-semibold">{{ comment.ai_analysis.emotions.sadness|floatformat:0 }}%</span>
                            </div>
                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-gray-500 rounded-full" style="width: {{ comment.ai_analysis.emotions.sadness|floatformat:0 }}%"></div>
                            </div>
                        </div>
                        
                        <!-- Fear -->
                        <div>
                            <div class="flex justify-between mb-1">
                                <span class="text-sm font-semibold text-gray-600 flex items-center gap-1">
                                    <i data-lucide="meh" class="w-4 h-4 text-navy"></i> Fear / خوف
                                </span>
                                <span class="text-sm font-semibold">{{ comment.ai_analysis.emotions.fear|floatformat:0 }}%</span>
                            </div>
                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-navy rounded-full" style="width: {{ comment.ai_analysis.emotions.fear|floatformat:0 }}%"></div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}
                
                <!-- AI Summary -->
                {% if comment.ai_analysis.summaries %}
                <div class="hh-card">
                    <div class="hh-card-header">
                        <div class="flex items-center gap-2">
                            <i data-lucide="file-text" class="w-5 h-5 text-navy"></i>
                            <h5 class="font-semibold">AI Summary</h5>
                        </div>
                    </div>
                    
                    <div class="hh-card-body">
                        <p class="text-sm text-gray-600 mb-2">{{ comment.ai_analysis.summaries.en }}</p>
                        <p class="text-sm text-gray-600" style="direction: rtl;">{{ comment.ai_analysis.summaries.ar }}</p>
                    </div>
                </div>
                {% endif %}
                
            {% else %}
            <!-- AI Not Started -->
            <div class="hh-card text-center">
                <div class="hh-card-body">
                    <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="bot" class="w-8 h-8 text-gray-500"></i>
                    </div>
                    
                    <h5 class="font-semibold mb-2">AI Analysis Pending</h5>
                    
                    <p class="text-sm text-gray-500 mb-4 max-w-xs mx-auto">
                        This comment is waiting for AI-powered analysis. The system will automatically analyze sentiment, topics, emotions, and generate actionable business intelligence insights.
                    </p>
                    
                    <div class="text-sm text-gray-500 bg-gray-50 rounded-xl p-4 text-left">
                        <strong class="text-gray-800">Analysis will include:</strong>
                        <ul class="mt-2 space-y-1">
                            <li class="flex items-center gap-2">
                                <i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
                                Sentiment analysis (English & Arabic)
                            </li>
                            <li class="flex items-center gap-2">
                                <i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
                                Actionable insights & recommendations
                            </li>
                            <li class="flex items-center gap-2">
                                <i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
                                Business intelligence metrics
                            </li>
                            <li class="flex items-center gap-2">
                                <i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
                                Patient journey tracking
                            </li>
                            <li class="flex items-center gap-2">
                                <i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
                                Service quality indicators
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

{% endblock %}