{% extends "base.html" %}

{% block title %}{{ 'edit_template'|t }} - {{ event.name }}{% endblock %}

{% block content %}
<div class="communications-edit-page">
    <div class="page-header">
        <h1>{{ 'edit'|t }}: {{ template_type_name }}</h1>
        <a href="{{ url_for('event_communications', event_id=event.id) }}" class="btn btn-outline"><i data-lucide="arrow-left"></i> {{ 'back'|t }}</a>
    </div>

    <div class="section-box">
        <form method="POST" class="template-edit-form">
            <div class="form-group">
                <label for="subject">{{ 'subject'|t }}</label>
                <input type="text" id="subject" name="subject" value="{{ template.subject }}" required>
            </div>

            <div class="form-group">
                <label for="body">{{ 'body'|t }}</label>
                <textarea id="body" name="body" rows="15" required>{{ template.body }}</textarea>
                <small class="text-muted">{{ 'available_placeholders'|t }}: {staff_name}, {attendee_name}, {event_name}, {invite_url}, {reminder_count}, {event_date}, {event_location}, {changes_text}, {session_name}</small>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary"><i data-lucide="save"></i> {{ 'save_changes'|t }}</button>
                <a href="{{ url_for('event_communications', event_id=event.id) }}" class="btn btn-secondary">{{ 'cancel'|t }}</a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}