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

{% block title %}{{ template.title_en }}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1>
            <i class="fas fa-file-contract me-2"></i>
            {{ template.title_en }}
        </h1>
        <div>
            {% if perms.core.change_consenttemplate %}
            <a href="{% url 'core:consent_template_update' template.pk %}" class="btn btn-warning">
                <i class="fa fa-edit me-1"></i>{% trans "Edit" %}
            </a>
            {% endif %}
            <a href="{% url 'core:consent_template_list' %}" class="btn btn-secondary">
                <i class="fa fa-arrow-left me-1"></i>{% trans "Back to List" %}
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Template Information -->
        <div class="col-lg-8">
            <!-- Basic Info Card -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">{% trans "Template Information" %}</h5>
                </div>
                <div class="card-body">
                    <dl class="row">
                        <dt class="col-sm-3">{% trans "Type" %}:</dt>
                        <dd class="col-sm-9">
                            <span class="badge bg-info">{{ template.get_consent_type_display }}</span>
                        </dd>

                        <dt class="col-sm-3">{% trans "Title (EN)" %}:</dt>
                        <dd class="col-sm-9">{{ template.title_en }}</dd>

                        {% if template.title_ar %}
                        <dt class="col-sm-3">{% trans "Title (AR)" %}:</dt>
                        <dd class="col-sm-9">{{ template.title_ar }}</dd>
                        {% endif %}

                        <dt class="col-sm-3">{% trans "Version" %}:</dt>
                        <dd class="col-sm-9">
                            <span class="badge bg-secondary">v{{ template.version }}</span>
                        </dd>

                        <dt class="col-sm-3">{% trans "Status" %}:</dt>
                        <dd class="col-sm-9">
                            {% if template.is_active %}
                            <span class="badge bg-success">{% trans "Active" %}</span>
                            {% else %}
                            <span class="badge bg-secondary">{% trans "Inactive" %}</span>
                            {% endif %}
                        </dd>

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

                        <dt class="col-sm-3">{% trans "Last Updated" %}:</dt>
                        <dd class="col-sm-9">{{ template.updated_at|date:"Y-m-d H:i" }}</dd>
                    </dl>
                </div>
            </div>

            <!-- Content Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#content-en" role="tab">
                                {% trans "Content (English)" %}
                            </a>
                        </li>
                        {% if template.content_ar %}
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#content-ar" role="tab">
                                {% trans "Content (Arabic)" %}
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="content-en" role="tabpanel">
                            <div class="p-3 bg-light border rounded" style="white-space: pre-wrap;">{{ template.content_en }}</div>
                        </div>
                        {% if template.content_ar %}
                        <div class="tab-pane fade" id="content-ar" role="tabpanel">
                            <div class="p-3 bg-light border rounded" style="white-space: pre-wrap; direction: rtl;">{{ template.content_ar }}</div>
                        </div>
                        {% endif %}
                    </div>
                    <div class="mt-3">
                        <small class="text-muted">
                            <strong>{% trans "Available Placeholders:" %}</strong>
                            <code>{patient_name}</code>, <code>{patient_mrn}</code>, 
                            <code>{date}</code>, <code>{patient_dob}</code>, <code>{patient_age}</code>
                        </small>
                    </div>
                </div>
            </div>

            <!-- Preview Card -->
            {% if sample_patient %}
            <div class="card mb-4">
                <div class="card-header">
                    <ul class="nav nav-tabs card-header-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-bs-toggle="tab" href="#preview-en" role="tab">
                                {% trans "Preview (English)" %}
                            </a>
                        </li>
                        {% if preview_ar %}
                        <li class="nav-item">
                            <a class="nav-link" data-bs-toggle="tab" href="#preview-ar" role="tab">
                                {% trans "Preview (Arabic)" %}
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </div>
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="fa fa-info-circle me-2"></i>
                        {% trans "Preview with sample patient:" %} <strong>{{ sample_patient.full_name_en }}</strong> ({{ sample_patient.mrn }})
                    </div>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="preview-en" role="tabpanel">
                            <div class="p-3 bg-white border rounded" style="white-space: pre-wrap;">{{ preview_en }}</div>
                        </div>
                        {% if preview_ar %}
                        <div class="tab-pane fade" id="preview-ar" role="tabpanel">
                            <div class="p-3 bg-white border rounded" style="white-space: pre-wrap; direction: rtl;">{{ preview_ar }}</div>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <!-- Actions Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Actions" %}</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        {% if perms.core.change_consenttemplate %}
                        <a href="{% url 'core:consent_template_update' template.pk %}" class="btn btn-warning">
                            <i class="fa fa-edit me-1"></i>{% trans "Edit Template" %}
                        </a>
                        {% endif %}
                        {% if perms.core.delete_consenttemplate and template.is_active %}
                        <a href="{% url 'core:consent_template_delete' template.pk %}" class="btn btn-danger">
                            <i class="fa fa-ban me-1"></i>{% trans "Deactivate" %}
                        </a>
                        {% endif %}
                        <a href="{% url 'core:consent_template_list' %}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left me-1"></i>{% trans "Back to List" %}
                        </a>
                    </div>
                </div>
            </div>

            <!-- Version History Card -->
            {% if version_history %}
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Version History" %}</h5>
                </div>
                <div class="card-body">
                    <div class="list-group list-group-flush">
                        {% for version in version_history %}
                        <div class="list-group-item {% if version.pk == template.pk %}active{% endif %}">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <strong>v{{ version.version }}</strong>
                                    {% if version.is_active %}
                                    <span class="badge bg-success ms-2">{% trans "Active" %}</span>
                                    {% endif %}
                                    {% if version.pk == template.pk %}
                                    <span class="badge bg-primary ms-2">{% trans "Current" %}</span>
                                    {% endif %}
                                </div>
                                {% if version.pk != template.pk %}
                                <a href="{% url 'core:consent_template_detail' version.pk %}" class="btn btn-sm btn-outline-primary">
                                    <i class="fa fa-eye"></i>
                                </a>
                                {% endif %}
                            </div>
                            <small class="text-muted">{{ version.created_at|date:"Y-m-d H:i" }}</small>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Metadata Card -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">{% trans "Metadata" %}</h5>
                </div>
                <div class="card-body">
                    <dl class="mb-0">
                        <dt>{% trans "Template ID" %}:</dt>
                        <dd><code>{{ template.id }}</code></dd>
                        
                        <dt>{% trans "Tenant" %}:</dt>
                        <dd>{{ template.tenant.name }}</dd>
                        
                        <dt>{% trans "Created At" %}:</dt>
                        <dd>{{ template.created_at|date:"Y-m-d H:i:s" }}</dd>
                        
                        <dt>{% trans "Updated At" %}:</dt>
                        <dd>{{ template.updated_at|date:"Y-m-d H:i:s" }}</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}