{% extends "emails/base.html" %}

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

{% block content %}
<h2 style="color: #dc2626; margin-bottom: 20px;">🔔 New Contact Submission</h2>

<p>A new contact form submission has been received and requires attention.</p>

<div style="background-color: #fef2f2; padding: 15px; border-radius: 8px; border-left: 4px solid #dc2626; margin: 20px 0;">
    <p style="margin: 5px 0;"><strong>Ticket:</strong> {{ ticket_number }}</p>
    <p style="margin: 5px 0;"><strong>Category:</strong> {{ category }}</p>
    <p style="margin: 5px 0;"><strong>Status:</strong> Pending Review</p>
</div>

<h3 style="color: #374151; margin-top: 25px;">Contact Information</h3>
<div style="background-color: #f9fafb; padding: 15px; border-radius: 8px;">
    <p style="margin: 5px 0;"><strong>Name:</strong> {{ name }}</p>
    <p style="margin: 5px 0;"><strong>Email:</strong> <a href="mailto:{{ email }}">{{ email }}</a></p>
</div>

<h3 style="color: #374151; margin-top: 25px;">Subject</h3>
<p style="background-color: #f3f4f6; padding: 15px; border-radius: 8px;">{{ subject }}</p>

<h3 style="color: #374151; margin-top: 25px;">Message</h3>
<div style="background-color: #f9fafb; padding: 15px; border-left: 4px solid #2563eb; margin: 15px 0;">
    {{ message|linebreaks }}
</div>

<div style="margin-top: 30px; padding: 20px; background-color: #eff6ff; border-radius: 8px;">
    <p style="margin: 0 0 15px 0;"><strong>Quick Actions:</strong></p>
    <a href="{{ admin_url }}" style="display: inline-block; background-color: #2563eb; color: white; padding: 12px 24px; text-decoration: none; border-radius: 6px; font-weight: bold;">
        View in Admin Panel →
    </a>
</div>

<p style="margin-top: 20px; font-size: 14px; color: #6b7280;">
    This is an automated notification. Please respond to the ticket through the admin panel.
</p>
{% endblock %}