2025-11-02 14:35:35 +03:00

215 lines
10 KiB
HTML

{% extends "base.html" %}
{% load i18n static %}
{% block title %}{{ template.name }} - Tenhal{% endblock %}
{% block content %}
<div class="container-fluid">
<!-- Page Header -->
<div class="d-flex justify-content-between align-items-center mb-3">
<div>
<h1 class="page-header mb-0">
<i class="fas fa-file-alt me-2"></i>{{ template.name }}
</h1>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'core:dashboard' %}">{% trans "Dashboard" %}</a></li>
<li class="breadcrumb-item"><a href="{% url 'notifications:dashboard' %}">{% trans "Notifications" %}</a></li>
<li class="breadcrumb-item"><a href="{% url 'notifications:template_list' %}">{% trans "Templates" %}</a></li>
<li class="breadcrumb-item active">{{ template.name }}</li>
</ol>
</nav>
</div>
<div>
<form method="post" action="{% url 'notifications:template_toggle' template.pk %}" class="d-inline">
{% csrf_token %}
<button type="submit" class="btn btn-outline-warning">
<i class="fas fa-power-off me-1"></i>
{% if template.is_active %}{% trans "Deactivate" %}{% else %}{% trans "Activate" %}{% endif %}
</button>
</form>
<a href="{% url 'notifications:template_update' template.pk %}" class="btn btn-primary">
<i class="fas fa-edit me-1"></i>{% trans "Edit" %}
</a>
<a href="{% url 'notifications:template_delete' template.pk %}" class="btn btn-danger">
<i class="fas fa-trash me-1"></i>{% trans "Delete" %}
</a>
</div>
</div>
<div class="row g-3">
<!-- Template Details -->
<div class="col-md-8">
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">{% trans "Template Details" %}</h5>
</div>
<div class="card-body">
<div class="row mb-3">
<div class="col-md-6">
<label class="text-muted small">{% trans "Code" %}</label>
<div><code>{{ template.code }}</code></div>
</div>
<div class="col-md-3">
<label class="text-muted small">{% trans "Channel" %}</label>
<div>
{% if template.channel == 'SMS' %}
<span class="badge bg-primary"><i class="fas fa-sms"></i> SMS</span>
{% elif template.channel == 'WHATSAPP' %}
<span class="badge bg-success"><i class="fab fa-whatsapp"></i> WhatsApp</span>
{% elif template.channel == 'EMAIL' %}
<span class="badge bg-info"><i class="fas fa-envelope"></i> Email</span>
{% endif %}
</div>
</div>
<div class="col-md-3">
<label class="text-muted small">{% trans "Status" %}</label>
<div>
{% if template.is_active %}
<span class="badge bg-success">{% trans "Active" %}</span>
{% else %}
<span class="badge bg-secondary">{% trans "Inactive" %}</span>
{% endif %}
</div>
</div>
</div>
{% if template.subject %}
<div class="mb-3">
<label class="text-muted small">{% trans "Subject" %} ({% trans "Email only" %})</label>
<div><strong>{{ template.subject }}</strong></div>
</div>
{% endif %}
<div class="mb-3">
<label class="text-muted small">{% trans "Body (English)" %}</label>
<div class="card bg-light">
<div class="card-body">
<pre class="mb-0" style="white-space: pre-wrap;">{{ template.body_en }}</pre>
</div>
</div>
</div>
{% if template.body_ar %}
<div class="mb-3">
<label class="text-muted small">{% trans "Body (Arabic)" %}</label>
<div class="card bg-light">
<div class="card-body" dir="rtl">
<pre class="mb-0" style="white-space: pre-wrap;">{{ template.body_ar }}</pre>
</div>
</div>
</div>
{% endif %}
{% if template.variables %}
<div class="mb-3">
<label class="text-muted small">{% trans "Available Variables" %}</label>
<div>
{% for var in template.variables %}
<span class="badge bg-light text-dark me-1">{<wbr>{{ var }}<wbr>}</span>
{% endfor %}
</div>
</div>
{% endif %}
</div>
</div>
<!-- Recent Messages -->
{% if recent_messages %}
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="card-title mb-0">{% trans "Recent Messages" %}</h5>
<a href="{% url 'notifications:message_list' %}?template={{ template.pk }}"
class="btn btn-sm btn-outline-primary">
{% trans "View All" %}
</a>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>{% trans "Date" %}</th>
<th>{% trans "Recipient" %}</th>
<th>{% trans "Status" %}</th>
<th>{% trans "Actions" %}</th>
</tr>
</thead>
<tbody>
{% for message in recent_messages %}
<tr>
<td>{{ message.created_at|date:"Y-m-d H:i" }}</td>
<td>{{ message.recipient }}</td>
<td>
{% if message.status == 'DELIVERED' or message.status == 'READ' %}
<span class="badge bg-success">{{ message.get_status_display }}</span>
{% elif message.status == 'FAILED' %}
<span class="badge bg-danger">{{ message.get_status_display }}</span>
{% else %}
<span class="badge bg-secondary">{{ message.get_status_display }}</span>
{% endif %}
</td>
<td>
<a href="{% url 'notifications:message_detail' message.pk %}"
class="btn btn-sm btn-outline-primary">
<i class="fas fa-eye"></i>
</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endif %}
</div>
<!-- Statistics & Metadata -->
<div class="col-md-4">
<!-- Usage Statistics -->
<div class="card mb-3">
<div class="card-header">
<h5 class="card-title mb-0">{% trans "Usage Statistics" %}</h5>
</div>
<div class="card-body">
<div class="mb-3">
<label class="text-muted small">{% trans "Total Sent" %}</label>
<h3 class="mb-0">{{ usage_stats.total_sent }}</h3>
</div>
<div class="mb-3">
<label class="text-muted small">{% trans "Successful" %}</label>
<h3 class="mb-0 text-success">{{ usage_stats.successful }}</h3>
</div>
<div>
<label class="text-muted small">{% trans "Failed" %}</label>
<h3 class="mb-0 text-danger">{{ usage_stats.failed }}</h3>
</div>
</div>
</div>
<!-- Metadata -->
<div class="card">
<div class="card-header">
<h5 class="card-title mb-0">{% trans "Metadata" %}</h5>
</div>
<div class="card-body">
<div class="mb-2">
<label class="text-muted small">{% trans "Created" %}</label>
<div>{{ template.created_at|date:"Y-m-d H:i:s" }}</div>
</div>
<div class="mb-2">
<label class="text-muted small">{% trans "Updated" %}</label>
<div>{{ template.updated_at|date:"Y-m-d H:i:s" }}</div>
</div>
<div>
<label class="text-muted small">{% trans "Template ID" %}</label>
<div><code class="small">{{ template.id }}</code></div>
</div>
</div>
</div>
</div>
</div>
</div>
{% endblock %}