{% extends "base.html" %}

{% block title %}Generated Letter - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Generated Letter</h1>
            <p class="text-gray-600">Template: {{ letter['template_name'] or 'N/A' }}</p>
        </div>
        <a href="{{ url_for('templates_list') }}" 
           class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition">
            <i class="fas fa-arrow-left mr-2"></i>Back to Templates
        </a>
    </div>
</div>

<div class="bg-white rounded-lg shadow-md p-6">
    <div class="mb-6 border-b pb-4">
        <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <span class="text-gray-600">Subject:</span>
                <span class="font-semibold text-gray-800 ml-2">{{ letter['letter_subject'] or 'N/A' }}</span>
            </div>
            <div>
                <span class="text-gray-600">Status:</span>
                {% if letter['status'] == 'sent' %}
                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-800 ml-2">
                    <i class="fas fa-check-circle mr-1"></i>Sent
                </span>
                {% else %}
                <span class="px-2 py-1 text-xs font-semibold rounded-full bg-yellow-100 text-yellow-800 ml-2">
                    <i class="fas fa-edit mr-1"></i>Draft
                </span>
                {% endif %}
            </div>
            <div>
                <span class="text-gray-600">Generated:</span>
                <span class="font-semibold text-gray-800 ml-2">{{ letter['sent_at']|format_datetime if letter['sent_at'] else 'N/A' }}</span>
            </div>
            <div>
                <span class="text-gray-600">Generated By:</span>
                <span class="font-semibold text-gray-800 ml-2">{{ letter['sent_by'] or 'System' }}</span>
            </div>
        </div>
    </div>
    
    <div class="prose max-w-none">
        <div class="bg-gray-50 rounded-lg p-6 border border-gray-200">
            <div class="whitespace-pre-wrap text-gray-800">{{ letter['letter_content'] }}</div>
        </div>
    </div>
    
    <div class="mt-6 flex gap-3">
        <button onclick="window.print()" 
                class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition">
            <i class="fas fa-print mr-2"></i>Print
        </button>
        <button onclick="copyToClipboard()" 
                class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition">
            <i class="fas fa-copy mr-2"></i>Copy to Clipboard
        </button>
    </div>
</div>

<script>
function copyToClipboard() {
    const content = `{{ letter['letter_content']|replace("'", "\\'")|replace("\n", "\\n") }}`;
    navigator.clipboard.writeText(content).then(() => {
        alert('Letter content copied to clipboard!');
    });
}
</script>
{% endblock %}