{% extends 'email/base.html.twig' %}

{% block title %}New Contact Form Submission{% endblock %}

{% block content %}
<div class="icon-badge icon-info">
    <span>&#128172;</span>
</div>

<h2 class="text-center">New Contact Form Submission</h2>
<p class="text-center text-muted">
    You've received a new message through the website contact form.
</p>

<div class="alert alert-info">
    <h4>New Inquiry Received</h4>
    <p>Submitted on {{ submission.createdAt|date('F d, Y \\a\\t g:i A') }}</p>
</div>

<div class="info-box">
    <table>
        <tr>
            <td class="label">Name</td>
            <td class="value">{{ submission.name }}</td>
        </tr>
        {% if submission.organization %}
        <tr>
            <td class="label">Organization</td>
            <td class="value">{{ submission.organization }}</td>
        </tr>
        {% endif %}
        <tr>
            <td class="label">Email</td>
            <td class="value">
                <a href="mailto:{{ submission.email }}" style="color: #e94560;">{{ submission.email }}</a>
            </td>
        </tr>
        {% if submission.phone %}
        <tr>
            <td class="label">Phone</td>
            <td class="value">
                <a href="tel:{{ submission.phone }}" style="color: #e94560;">{{ submission.phone }}</a>
            </td>
        </tr>
        {% endif %}
        {% if submission.ipAddress %}
        <tr>
            <td class="label">IP Address</td>
            <td class="value" style="font-family: monospace; font-size: 13px; color: #666;">{{ submission.ipAddress }}</td>
        </tr>
        {% endif %}
    </table>
</div>

<h3>Message</h3>
<div style="background-color: #f8f9fa; border-radius: 8px; padding: 20px; border-left: 4px solid #1a1a2e;">
    <p style="margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.8;">{{ submission.message }}</p>
</div>

<div class="btn-wrapper">
    <a href="mailto:{{ submission.email }}?subject=Re: Your inquiry to KitsCo" class="btn btn-primary">Reply to {{ submission.name|split(' ')|first }}</a>
</div>

{% if adminUrl is defined %}
<div class="btn-wrapper" style="margin-top: -15px;">
    <a href="{{ adminUrl }}" class="btn btn-outline">View in Admin Panel</a>
</div>
{% endif %}

<hr class="divider">

<p class="text-center text-muted text-small">
    This notification was sent automatically when a visitor submitted the contact form on kits.co.tz
</p>
{% endblock %}

{% block contact_section %}{% endblock %}