278 lines
13 KiB
HTML
278 lines
13 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
{% load star_rating %}
|
|
{% load social_icons %}
|
|
|
|
{% block title %}Comment #{{ comment.id }} - {% trans "Social Media Monitoring" %} - PX360{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<!-- Breadcrumb -->
|
|
<nav aria-label="breadcrumb" class="mb-3">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'social:social_comment_list' %}">{% trans "Social Media" %}</a>
|
|
</li>
|
|
<li class="breadcrumb-item">
|
|
<a href="{% url 'social:social_platform' comment.platform %}">{{ comment.get_platform_display }}</a>
|
|
</li>
|
|
<li class="breadcrumb-item active" aria-current="page">Comment #{{ comment.id }}</li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<!-- Page Header -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div class="d-flex align-items-center">
|
|
<div class="me-3">
|
|
{% social_icon comment.platform %}
|
|
</div>
|
|
<div>
|
|
<h2 class="mb-1">{% trans "Comment Details" %}</h2>
|
|
<p class="text-muted mb-0">{{ comment.get_platform_display }}</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<a href="{% url 'social:social_comment_list' %}" class="btn btn-outline-secondary me-2">
|
|
<i class="bi bi-arrow-left me-1"></i> {% trans "View Similar" %}
|
|
</a>
|
|
<a href="{% url 'social:social_platform' comment.platform %}" class="btn btn-outline-primary">
|
|
<i class="bi bi-grid me-1"></i> {% trans "Back to Platform" %}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<!-- Comment Card -->
|
|
<div class="col-lg-8">
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<div class="d-flex justify-content-between align-items-center">
|
|
<div>
|
|
<span class="badge bg-primary me-2">{{ comment.get_platform_display }}</span>
|
|
{% if comment.rating %}
|
|
<span class="badge bg-warning text-dark me-2">
|
|
{{ comment.rating|star_rating }} {{ comment.rating }}/5
|
|
</span>
|
|
{% endif %}
|
|
{% if comment.ai_analysis %}
|
|
{% with sentiment=comment.ai_analysis.sentiment.classification.en %}
|
|
{% if sentiment == 'positive' %}
|
|
<span class="badge bg-success">Positive</span>
|
|
{% elif sentiment == 'negative' %}
|
|
<span class="badge bg-danger">Negative</span>
|
|
{% else %}
|
|
<span class="badge bg-secondary">Neutral</span>
|
|
{% endif %}
|
|
{% endwith %}
|
|
{% else %}
|
|
<span class="badge bg-light text-dark">Not Analyzed</span>
|
|
{% endif %}
|
|
</div>
|
|
<small class="text-muted">
|
|
{% if comment.published_at %}
|
|
{{ comment.published_at|date:"M d, Y H:i" }}
|
|
{% else %}
|
|
{{ comment.scraped_at|date:"M d, Y H:i" }}
|
|
{% endif %}
|
|
</small>
|
|
</div>
|
|
</div>
|
|
<div class="card-body">
|
|
{% if comment.author %}
|
|
<h5 class="mb-3">@{{ comment.author }}</h5>
|
|
{% endif %}
|
|
|
|
<p class="fs-5 mb-4">{{ comment.comments }}</p>
|
|
|
|
<div class="row mb-3">
|
|
<div class="col-md-4">
|
|
<div class="text-center">
|
|
<i class="bi bi-heart text-danger fs-4"></i>
|
|
<h5 class="mb-0 mt-2">{{ comment.like_count }}</h5>
|
|
<small class="text-muted">{% trans "Likes" %}</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-center">
|
|
<i class="bi bi-chat text-primary fs-4"></i>
|
|
<h5 class="mb-0 mt-2">{{ comment.reply_count }}</h5>
|
|
<small class="text-muted">{% trans "Replies" %}</small>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="text-center">
|
|
<i class="bi bi-clock text-secondary fs-4"></i>
|
|
<h5 class="mb-0 mt-2">{{ comment.scraped_at|timesince }}</h5>
|
|
<small class="text-muted">{% trans "Scraped" %}</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if comment.post_url %}
|
|
<div class="mt-3">
|
|
<a href="{{ comment.post_url }}" target="_blank" class="btn btn-outline-primary btn-sm">
|
|
<i class="bi bi-box-arrow-up-right me-1"></i> {% trans "View Original Post" %}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI Analysis -->
|
|
{% if comment.ai_analysis %}
|
|
<div class="card mb-4">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-robot me-2"></i>{% trans "AI Analysis" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<h6>{% trans "Sentiment" %}</h6>
|
|
<h2 class="{% if comment.ai_analysis.sentiment.classification.en == 'positive' %}text-success{% elif comment.ai_analysis.sentiment.classification.en == 'negative' %}text-danger{% else %}text-secondary{% endif %}">
|
|
{{ comment.ai_analysis.sentiment.classification.en|title }}
|
|
</h2>
|
|
<p class="text-muted">{{ comment.ai_analysis.sentiment.classification.ar }}</p>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>{% trans "Sentiment Score" %}</h6>
|
|
<h2>{{ comment.ai_analysis.sentiment.score|floatformat:2 }}</h2>
|
|
<p class="text-muted">{% trans "Analysis confidence" %}: {{ comment.ai_analysis.sentiment.confidence|floatformat:2 }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{% if comment.ai_analysis.summaries.en %}
|
|
<div class="mt-3">
|
|
<h6>{% trans "Summary (English)" %}</h6>
|
|
<p>{{ comment.ai_analysis.summaries.en }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if comment.ai_analysis.summaries.ar %}
|
|
<div class="mt-3">
|
|
<h6>{% trans "الملخص (Arabic)" %}</h6>
|
|
<p dir="rtl">{{ comment.ai_analysis.summaries.ar }}</p>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if comment.ai_analysis.keywords.en %}
|
|
<div class="mt-3">
|
|
<h6>{% trans "Keywords" %}</h6>
|
|
<div>
|
|
{% for keyword in comment.ai_analysis.keywords.en %}
|
|
<span class="badge bg-light text-dark me-1 mb-1">{{ keyword }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if comment.ai_analysis.topics.en %}
|
|
<div class="mt-3">
|
|
<h6>{% trans "Topics" %}</h6>
|
|
<div>
|
|
{% for topic in comment.ai_analysis.topics.en %}
|
|
<span class="badge bg-info text-dark me-1 mb-1">{{ topic }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Raw Data -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<button class="btn btn-link text-decoration-none p-0 w-100 text-start" type="button" data-bs-toggle="collapse" data-bs-target="#rawDataCollapse">
|
|
<i class="bi bi-code-square me-2"></i>{% trans "Raw Data" %}
|
|
</button>
|
|
</div>
|
|
<div class="collapse" id="rawDataCollapse">
|
|
<div class="card-body">
|
|
<pre class="bg-light p-3 rounded">{{ comment.raw_data }}</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sidebar -->
|
|
<div class="col-lg-4">
|
|
<!-- Comment Info -->
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-info-circle me-2"></i>{% trans "Comment Info" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<dl class="row mb-0">
|
|
<dt class="col-sm-5">Comment ID:</dt>
|
|
<dd class="col-sm-7">{{ comment.comment_id }}</dd>
|
|
|
|
<dt class="col-sm-5">Post ID:</dt>
|
|
<dd class="col-sm-7">{{ comment.post_id }}</dd>
|
|
|
|
<dt class="col-sm-5">Platform:</dt>
|
|
<dd class="col-sm-7">{{ comment.get_platform_display }}</dd>
|
|
|
|
<dt class="col-sm-5">Published:</dt>
|
|
<dd class="col-sm-7">
|
|
{% if comment.published_at %}
|
|
{{ comment.published_at|date:"M d, Y H:i" }}
|
|
{% else %}
|
|
<span class="text-muted">-</span>
|
|
{% endif %}
|
|
</dd>
|
|
|
|
<dt class="col-sm-5">Scraped:</dt>
|
|
<dd class="col-sm-7">{{ comment.scraped_at|date:"M d, Y H:i" }}</dd>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Entities -->
|
|
{% if comment.ai_analysis.entities %}
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-tags me-2"></i>{% trans "Entities" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<ul class="list-group list-group-flush">
|
|
{% for entity in comment.ai_analysis.entities|slice:":10" %}
|
|
<li class="list-group-item d-flex justify-content-between align-items-center">
|
|
{% if entity.text %}{{ entity.text }}{% else %}{{ entity }}{% endif %}
|
|
{% if entity.type %}
|
|
<span class="badge bg-secondary rounded-pill">{{ entity.type }}</span>
|
|
{% endif %}
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Actions -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h6 class="mb-0"><i class="bi bi-lightning me-2"></i>{% trans "Actions" %}</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="d-grid gap-2">
|
|
<button class="btn btn-primary">
|
|
<i class="bi bi-plus-circle me-2"></i>{% trans "Create PX Action" %}
|
|
</button>
|
|
<button class="btn btn-success">
|
|
<i class="bi bi-check-circle me-2"></i>{% trans "Mark as Reviewed" %}
|
|
</button>
|
|
<button class="btn btn-warning">
|
|
<i class="bi bi-flag me-2"></i>{% trans "Flag for Follow-up" %}
|
|
</button>
|
|
<button class="btn btn-outline-danger">
|
|
<i class="bi bi-trash me-2"></i>{% trans "Delete Comment" %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|