{% extends "django-dans-emails/base.html" %}

{% block content %}
	<div style="background-color: #f0f9ff; border-left: 4px solid #3b82f6; padding: 16px; margin-bottom: 24px; border-radius: 4px;">
		<h2 style="margin: 0; color: #1e40af; font-size: 18px; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.3;">
			New Contact Form Submission
		</h2>
		{% if team_name %}
		<p style="margin: 4px 0 0 0; color: #64748b; font-size: 14px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.5;">
			Received via {{ team_name }} contact form
		</p>
		{% endif %}
	</div>

	<div style="background-color: #f9fafb; padding: 20px; border-radius: 6px; margin-bottom: 20px;">
		<h3 style="margin: 0 0 16px 0; color: #374151; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.3;">
			Contact Details
		</h3>

		<p style="margin: 8px 0; color: #111827; font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.5;">
			<span style="color: #6b7280; font-weight: 500; display: inline-block; min-width: 60px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">Name:</span>
			<strong style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">{{ name }}</strong>
		</p>
		<p style="margin: 8px 0; color: #111827; font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.5;">
			<span style="color: #6b7280; font-weight: 500; display: inline-block; min-width: 60px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">Email:</span>
			<a href="mailto:{{ email }}" style="color: #3b82f6; text-decoration: none; font-weight: 600; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">{{ email }}</a>
		</p>
		{% if phone %}
		<p style="margin: 8px 0; color: #111827; font-size: 15px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.5;">
			<span style="color: #6b7280; font-weight: 500; display: inline-block; min-width: 60px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">Phone:</span>
			<strong style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">{{ phone }}</strong>
		</p>
		{% endif %}
	</div>

	<div>
		<h3 style="margin: 0 0 12px 0; color: #374151; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.3;">
			Message
		</h3>
		<div style="background-color: #ffffff; border: 1px solid #e5e7eb; padding: 16px; border-radius: 6px;">
			<p style="margin: 0; color: #374151; font-size: 15px; line-height: 1.6; white-space: pre-wrap; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;">{{ message|linebreaksbr }}</p>
		</div>
	</div>
{% endblock %}