581 lines
34 KiB
HTML
581 lines
34 KiB
HTML
{% 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 %}
|