{% extends "base.html" %}
{% load i18n static  patient_tags %}

{% block title %}{% trans "Audit Log" %} - {% patient_name note.patient %}{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1 class="h3 mb-0">
            <i class="fa fa-history me-2"></i>{% trans "Note Audit Log" %}
        </h1>
        <a href="{% url 'documents:note-detail' note.pk %}" class="btn btn-secondary">
            <i class="fa fa-arrow-left me-1"></i>{% trans "Back to Note" %}
        </a>
    </div>

    {% include "includes/messages.html" %}

    <div class="row">
        <div class="col-md-10 offset-md-1">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">{% trans "Note Information" %}</h5>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-3">{% trans "Patient" %}:</dt>
                        <dd class="col-sm-9">{% patient_name note.patient %}</dd>

                        <dt class="col-sm-3">{% trans "Category" %}:</dt>
                        <dd class="col-sm-9"><span class="badge bg-primary">{{ note.get_category_display }}</span></dd>

                        <dt class="col-sm-3">{% trans "Date" %}:</dt>
                        <dd class="col-sm-9">{{ note.note_date|date:"Y-m-d H:i" }}</dd>

                        <dt class="col-sm-3">{% trans "Status" %}:</dt>
                        <dd class="col-sm-9">
                            {% if note.is_locked %}
                            <span class="badge bg-danger">
                                <i class="fa fa-lock me-1"></i>{% trans "Locked" %}
                            </span>
                            {% else %}
                            <span class="badge bg-success">
                                <i class="fa fa-unlock me-1"></i>{% trans "Unlocked" %}
                            </span>
                            {% endif %}
                        </dd>
                    </dl>
                </div>
            </div>

            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">{% trans "Audit Trail" %}</h5>
                </div>
                <div class="card-body">
                    {% if audit_logs %}
                    <div class="timeline">
                        {% for log in audit_logs %}
                        <div class="timeline-item mb-4">
                            <div class="d-flex">
                                <div class="flex-shrink-0">
                                    <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                        <i class="fa fa-{% if log.action == 'CREATED' %}plus{% elif log.action == 'UPDATED' %}edit{% elif log.action == 'LOCKED' %}lock{% elif log.action == 'UNLOCKED' %}unlock{% elif log.action == 'ADDENDUM' %}plus-circle{% else %}history{% endif %}"></i>
                                    </div>
                                </div>
                                <div class="flex-grow-1 ms-3">
                                    <div class="card">
                                        <div class="card-body">
                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                <h6 class="mb-0">
                                                    <span class="badge bg-{% if log.action == 'CREATED' %}success{% elif log.action == 'UPDATED' %}info{% elif log.action == 'LOCKED' %}danger{% elif log.action == 'UNLOCKED' %}warning{% elif log.action == 'ADDENDUM' %}primary{% else %}secondary{% endif %}">
                                                        {{ log.get_action_display }}
                                                    </span>
                                                </h6>
                                                <small class="text-muted">
                                                    {{ log.timestamp|date:"Y-m-d H:i:s" }}
                                                </small>
                                            </div>
                                            <p class="mb-1">
                                                <strong>{% trans "User" %}:</strong> {{ log.user.get_full_name }}
                                            </p>
                                            {% if log.changes %}
                                            <div class="mt-2">
                                                <strong>{% trans "Changes" %}:</strong>
                                                <pre class="bg-light p-2 rounded mt-1 mb-0" style="font-size: 0.875rem;">{{ log.changes }}</pre>
                                            </div>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                    {% else %}
                    <div class="text-center py-5">
                        <i class="fa fa-history fa-3x text-muted mb-3"></i>
                        <p class="text-muted">{% trans "No audit logs found for this note." %}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block css %}
<style>
    .timeline-item:last-child::before {
        display: none;
    }
</style>
{% endblock %}