{% extends "base.html" %}
{% from "components/ui.html" import page_header %}

{% block content %}
{% set breadcrumbs = [
    {'text': 'Admin', 'url': url_for('admin.admin_dashboard')},
    {'text': 'Email Templates', 'url': url_for('admin.list_email_templates')},
    {'text': template.name}
] %}

{{ page_header(
    icon_class='fas fa-envelope',
    title_text=template.name,
    subtitle_text='Email template details',
    breadcrumbs=breadcrumbs,
    actions_html='' +
        '<a href="' + url_for("admin.edit_email_template", template_id=template.id) + '" class="bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors"><i class="fas fa-edit mr-2"></i>Edit</a>'
) }}

<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow mb-6">
    <h2 class="text-lg font-semibold mb-4">{{ _('Template Information') }}</h2>
    <dl class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Name</dt>
            <dd class="text-sm text-gray-900 dark:text-gray-100">{{ template.name }}</dd>
        </div>
        {% if template.description %}
        <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Description</dt>
            <dd class="text-sm text-gray-900 dark:text-gray-100">{{ template.description }}</dd>
        </div>
        {% endif %}
        <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Status</dt>
            <dd class="text-sm text-gray-900 dark:text-gray-100">
                {% if template.is_default %}
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">Default</span>
                {% else %}
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">Active</span>
                {% endif %}
            </dd>
        </div>
        <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Created</dt>
            <dd class="text-sm text-gray-900 dark:text-gray-100">{{ template.created_at.strftime('%Y-%m-%d %H:%M') if template.created_at else '-' }}</dd>
        </div>
        <div>
            <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Last Updated</dt>
            <dd class="text-sm text-gray-900 dark:text-gray-100">{{ template.updated_at.strftime('%Y-%m-%d %H:%M') if template.updated_at else '-' }}</dd>
        </div>
    </dl>
</div>

{% if template.html %}
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow mb-6">
    <h2 class="text-lg font-semibold mb-4">{{ _('HTML Template') }}</h2>
    <pre class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto text-sm"><code>{{ template.html }}</code></pre>
</div>
{% endif %}

{% if template.css %}
<div class="bg-card-light dark:bg-card-dark p-6 rounded-lg shadow">
    <h2 class="text-lg font-semibold mb-4">CSS Styles</h2>
    <pre class="bg-gray-100 dark:bg-gray-800 p-4 rounded-lg overflow-x-auto text-sm"><code>{{ template.css }}</code></pre>
</div>
{% endif %}
{% endblock %}