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

{% block title %}{% trans "Consent Details" %} - {{ block.super }}{% endblock %}

{% block css %}
<style>
    .consent-detail-container {
        padding: 1rem;
    }
    
    .consent-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1.5rem;
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .consent-card {
        border: none;
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        border-radius: 0.5rem;
        margin-bottom: 1.5rem;
    }
    
    .consent-content {
        background-color: #f8f9fa;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 1.5rem;
        white-space: pre-wrap;
        font-size: 0.95rem;
        line-height: 1.6;
        max-height: 500px;
        overflow-y: auto;
    }
    
    .signature-display {
        border: 2px solid #28a745;
        border-radius: 0.375rem;
        padding: 1rem;
        background-color: white;
        text-align: center;
    }
    
    .signature-display img {
        max-width: 100%;
        height: auto;
        max-height: 200px;
    }
    
    .verification-badge {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
    }
    
    .verification-badge.verified {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }
    
    .verification-badge.unverified {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }
    
    @media print {
        .consent-header .btn,
        .no-print {
            display: none;
        }
        
        .consent-card {
            box-shadow: none;
            border: 1px solid #dee2e6;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid consent-detail-container">
    <!-- Header -->
    <div class="consent-header">
        <h1>
            <i class="fa fa-file-signature me-2"></i>
            {% trans "Consent Details" %}
        </h1>
        <div class="btn-group no-print">
            <button onclick="window.print()" class="btn btn-outline-primary">
                <i class="fa fa-print me-1"></i>{% trans "Print" %}
            </button>
            <a href="{% url 'core:consent_list' %}" class="btn btn-secondary">
                <i class="fa fa-arrow-left me-1"></i>{% trans "Back to List" %}
            </a>
        </div>
    </div>

    <!-- Messages -->


    <div class="row">
        <div class="col-12 col-lg-10 offset-lg-1">
            <!-- Patient & Consent Info -->
            <div class="card consent-card">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fa fa-info-circle me-2"></i>{% trans "Consent Information" %}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <dl class="row">
                                <dt class="col-sm-5">{% trans "Patient" %}:</dt>
                                <dd class="col-sm-7">
                                    <strong>{{ consent.patient.full_name_en }}</strong><br>
                                    <small class="text-muted">MRN: {{ consent.patient.mrn }}</small>
                                </dd>
                                
                                <dt class="col-sm-5">{% trans "Consent Type" %}:</dt>
                                <dd class="col-sm-7">
                                    <span class="badge bg-info">{{ consent.get_consent_type_display }}</span>
                                </dd>
                                
                                <dt class="col-sm-5">{% trans "Version" %}:</dt>
                                <dd class="col-sm-7">{{ consent.version }}</dd>
                                
                                <dt class="col-sm-5">{% trans "Status" %}:</dt>
                                <dd class="col-sm-7">
                                    {% if consent.is_active %}
                                        <span class="badge bg-success">{% trans "Active" %}</span>
                                    {% else %}
                                        <span class="badge bg-secondary">{% trans "Inactive" %}</span>
                                    {% endif %}
                                </dd>
                            </dl>
                        </div>
                        
                        <div class="col-md-6">
                            <dl class="row">
                                <dt class="col-sm-5">{% trans "Signed By" %}:</dt>
                                <dd class="col-sm-7">
                                    <strong>{{ consent.signed_by_name }}</strong>
                                    {% if consent.signed_by_relationship %}
                                        <br><small class="text-muted">{{ consent.signed_by_relationship }}</small>
                                    {% endif %}
                                </dd>
                                
                                <dt class="col-sm-5">{% trans "Signed At" %}:</dt>
                                <dd class="col-sm-7">
                                    {% if consent.signed_at %}
                                        {{ consent.signed_at|date:"Y-m-d H:i" }}
                                    {% else %}
                                        <span class="text-muted">{% trans "Not signed" %}</span>
                                    {% endif %}
                                </dd>
                                
                                <dt class="col-sm-5">{% trans "Signature Method" %}:</dt>
                                <dd class="col-sm-7">
                                    {% if consent.signature_method %}
                                        {{ consent.get_signature_method_display }}
                                    {% else %}
                                        <span class="text-muted">—</span>
                                    {% endif %}
                                </dd>
                                
                                <dt class="col-sm-5">{% trans "Created" %}:</dt>
                                <dd class="col-sm-7">{{ consent.created_at|date:"Y-m-d H:i" }}</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Consent Content -->
            <div class="card consent-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-file-alt me-2"></i>{% trans "Consent Content" %}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="consent-content">{{ consent.content_text }}</div>
                </div>
            </div>

            <!-- Signature -->
            {% if consent.signature_image %}
            <div class="card consent-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-pen-nib me-2"></i>{% trans "Signature" %}
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="signature-display">
                                <img src="{{ consent.signature_image.url }}" alt="{% trans 'Signature' %}">
                            </div>
                        </div>
                        <div class="col-md-4">
                            <h6>{% trans "Verification" %}</h6>
                            {% if signature_verified %}
                                <div class="verification-badge verified">
                                    <i class="fa fa-check-circle"></i>
                                    <span>{% trans "Signature Verified" %}</span>
                                </div>
                            {% elif signature_verified == False %}
                                <div class="verification-badge unverified">
                                    <i class="fa fa-exclamation-triangle"></i>
                                    <span>{% trans "Verification Failed" %}</span>
                                </div>
                            {% endif %}
                            
                            <div class="mt-3">
                                <small class="text-muted">
                                    <strong>{% trans "Hash" %}:</strong><br>
                                    <code style="font-size: 0.7rem; word-break: break-all;">{{ consent.signature_hash|truncatechars:32 }}</code>
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Technical Details -->
            <div class="card consent-card no-print">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fa fa-cog me-2"></i>{% trans "Technical Details" %}
                    </h5>
                </div>
                <div class="card-body">
                    <dl class="row mb-0">
                        <dt class="col-sm-3">{% trans "Signed IP" %}:</dt>
                        <dd class="col-sm-9">{{ consent.signed_ip|default:"—" }}</dd>
                        
                        <dt class="col-sm-3">{% trans "User Agent" %}:</dt>
                        <dd class="col-sm-9">
                            <small class="text-muted">{{ consent.signed_user_agent|default:"—"|truncatechars:100 }}</small>
                        </dd>
                        
                        <dt class="col-sm-3">{% trans "Consent ID" %}:</dt>
                        <dd class="col-sm-9"><code>{{ consent.id }}</code></dd>
                        
                        <dt class="col-sm-3">{% trans "Last Updated" %}:</dt>
                        <dd class="col-sm-9">{{ consent.updated_at|date:"Y-m-d H:i:s" }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}