{% extends "base.html" %}

{% block title %}{{ 'Edit' if template else 'New' }} Template - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center">
        <h1 class="text-3xl font-bold text-gray-800">
            {{ 'Edit' if template else 'New' }} Letter Template
        </h1>
        <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">
    <form method="POST">
        <div class="space-y-6">
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Template Name *</label>
                <input type="text" name="template_name" value="{{ template['template_name'] if template else '' }}" required
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            </div>
            
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Category</label>
                <select name="template_category" 
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <option value="">Select Category</option>
                    <option value="appointment" {% if template and template['template_category'] == 'appointment' %}selected{% endif %}>Appointment</option>
                    <option value="invoice" {% if template and template['template_category'] == 'invoice' %}selected{% endif %}>Invoice</option>
                    <option value="report" {% if template and template['template_category'] == 'report' %}selected{% endif %}>Report</option>
                    <option value="general" {% if template and template['template_category'] == 'general' %}selected{% endif %}>General</option>
                </select>
            </div>
            
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Template Content *</label>
                <p class="text-xs text-gray-500 mb-2">
                    Use variables like <code>{{ '{{case_id}}' }}</code>, <code>{{ '{{claimant_name}}' }}</code>, <code>{{ '{{appointment_date}}' }}</code>, etc.
                </p>
                <textarea name="template_content" rows="15" required
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm">{{ template['template_content'] if template else '' }}</textarea>
            </div>
            
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-2">Available Variables (JSON)</label>
                <p class="text-xs text-gray-500 mb-2">Optional: JSON array of variable names for reference</p>
                <textarea name="variables" rows="3"
                          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm">{{ template['variables'] if template and template['variables'] else '["case_id", "claimant_name", "client_name", "appointment_date", "doctor_name", "invoice_number", "invoice_amount"]' }}</textarea>
            </div>
            
            <div>
                <label class="flex items-center gap-2">
                    <input type="checkbox" name="is_active" {% if not template or template['is_active'] == 1 %}checked{% endif %}
                           class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                    <span class="text-sm font-semibold text-gray-700">Active</span>
                </label>
            </div>
        </div>
        
        <div class="flex gap-3 mt-6">
            <button type="submit" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-save mr-2"></i>{{ 'Update' if template else 'Create' }} Template
            </button>
            <a href="{{ url_for('templates_list') }}" 
               class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-2 rounded-lg font-semibold transition">
                Cancel
            </a>
        </div>
    </form>
</div>
{% endblock %}