{% extends "base.html" %}

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

{% block content %}
<div class="communications-page">
    <div class="page-header">
        <h1>{{ 'communications'|t }}</h1>
        <a href="{{ url_for('event_detail', code=event.code) }}" class="btn btn-outline"><i data-lucide="arrow-left"></i> {{ 'back_to_event'|t }}</a>
    </div>

    <div class="communications-section">
        <div class="section-box">
            <div class="section-header">
                <h2>{{ 'email_templates'|t }}</h2>
                <p class="text-muted">{{ 'customize_email_content'|t }}</p>
            </div>

            <div class="templates-grid">
                {% for template_type, config in template_types.items() %}
                    {% if template_type in templates_map %}
                        {% set template = templates_map[template_type] %}
                        <div class="template-card">
                            <div class="template-header">
                                <h3>{{ config.name }}</h3>
                                <a href="{{ url_for('edit_email_template', event_id=event.id, template_type=template_type) }}" class="btn btn-sm btn-outline">
                                    <i data-lucide="pencil"></i> {{ 'edit'|t }}
                                </a>
                            </div>
                            <div class="template-preview">
                                <p><strong>{{ 'subject'|t }}:</strong> {{ template.subject }}</p>
                                <p class="template-body">{{ template.body[:200] }}...</p>
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>

        <div class="section-box">
            <div class="section-header">
                <h2>{{ 'send_custom_email'|t }}</h2>
                <p class="text-muted">{{ 'send_custom_email_desc'|t }}</p>
            </div>
            <a href="{{ url_for('send_custom_email', event_id=event.id) }}" class="btn btn-primary">
                <i data-lucide="mail"></i> {{ 'compose_email'|t }}
            </a>
        </div>

        <div class="section-box">
            <div class="section-header">
                <h2>{{ 'sent_emails'|t }}</h2>
                <p class="text-muted">{{ 'recent_communications'|t }}</p>
            </div>

            {% if sent_history %}
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>{{ 'date'|t }}</th>
                            <th>{{ 'subject'|t }}</th>
                            <th>{{ 'recipient_type'|t }}</th>
                            <th>{{ 'recipient'|t }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for email in sent_history %}
                            <tr>
                                <td>{{ email.sent_at|localized_date }}</td>
                                <td>{{ email.subject }}</td>
                                <td>{{ email.recipient_type|t }}</td>
                                <td>
                                    {% if email.recipient_id %}
                                        {% if email.recipient_type == 'attendee' %}
                                            {{ email.recipient_id }}
                                        {% else %}
                                            {{ email.recipient_id }}
                                        {% endif %}
                                    {% else %}
                                        {{ email.recipient_type|t }}
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            {% else %}
                <p class="text-muted">{{ 'no_emails_sent_yet'|t }}</p>
            {% endif %}
        </div>
    </div>
</div>

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