{% extends "base.html" %}

{% block title %}Message Templates - Server Monitoring{% endblock %}

{% block page_title %}Message Templates{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Template Statistics -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h5 class="card-title">Total Templates</h5>
                    <h2>{{ template_stats.get('total', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h5 class="card-title">Total Usage</h5>
                    <h2>{{ template_stats.get('total_usage', 0) }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h5 class="card-title">Categories</h5>
                    <h2>{{ template_stats.get('by_category', {}) | length }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-white">
                <div class="card-body">
                    <h5 class="card-title">Avg Usage</h5>
                    <h2>{{ (template_stats.get('total_usage', 0) / template_stats.get('total', 1)) | round(1) }}</h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Templates Table -->
    <div class="card">
        <div class="card-header">
            <h5>Message Templates</h5>
            <small class="text-muted">Manage and view compressed message templates</small>
        </div>
        <div class="card-body">
            {% if templates %}
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>Hash</th>
                            <th>Template Text</th>
                            <th>Category</th>
                            <th>Usage Count</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for template in templates %}
                        <tr>
                            <td><code>{{ template.template_hash[:8] }}...</code></td>
                            <td>{{ template.template_text[:80] }}{% if template.template_text | length > 80 %}...{% endif %}</td>
                            <td><span class="badge bg-secondary">{{ template.category or 'uncategorized' }}</span></td>
                            <td>{{ template.usage_count }}</td>
                            <td>{{ template.created_at | local_dt if template.created_at else 'N/A' }}</td>
                            <td>
                                <button class="btn btn-sm btn-outline-primary" onclick="viewTemplate('{{ template.template_hash }}')">
                                    <i class="fas fa-eye"></i>
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-5">
                <i class="fas fa-file-alt fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No templates found</h5>
                <p class="text-muted">Message templates will appear here when devices start sending compressed logs.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
function viewTemplate(hash) {
    // Implementation for viewing template details
    alert('Template details for: ' + hash);
}
</script>
{% endblock %}