{% extends "emails/base_email.html" %}
{% block email_content %}
<h2 style="margin-top: 0; font-size: 18px; color: #111827;">⏰ Deadline Approaching</h2>
<p style="color: #374151; font-size: 15px; line-height: 1.6;">
  This is a reminder that the following ticket is due in <strong>{{ days_left }}</strong> day{% if days_left != 1 %}s{% endif %}:
</p>

<div style="background-color: #fef3c7; border-left: 4px solid #f59e0b; padding: 16px; border-radius: 8px; margin: 20px 0;">
  <h3 style="margin: 0 0 6px 0; font-size: 16px; color: #92400e;">{{ ticket_name }}</h3>
  <p style="margin: 0; color: #92400e; font-size: 14px;">{{ ticket_uuid }}</p>
</div>

<table style="width: 100%; border-collapse: collapse; font-size: 13px; margin: 16px 0;">
  <tr>
    <td style="padding: 8px 0; color: #6b7280; width: 120px;">Due Date</td>
    <td style="padding: 8px 0; color: #111827; font-weight: 600;">{{ due_date }}</td>
  </tr>
  <tr>
    <td style="padding: 8px 0; color: #6b7280;">Project</td>
    <td style="padding: 8px 0; color: #111827;">{{ project_name }}</td>
  </tr>
  <tr>
    <td style="padding: 8px 0; color: #6b7280;">Status</td>
    <td style="padding: 8px 0; color: #111827;">{{ status_name }}</td>
  </tr>
  {% if priority_name %}
  <tr>
    <td style="padding: 8px 0; color: #6b7280;">Priority</td>
    <td style="padding: 8px 0; color: #111827;">{{ priority_name }}</td>
  </tr>
  {% endif %}
</table>

{% if days_left <= 2 %}
<div style="background-color: #fee2e2; border-left: 4px solid #ef4444; padding: 12px 16px; border-radius: 8px; margin: 16px 0;">
  <p style="margin: 0; color: #991b1b; font-size: 14px; font-weight: 600;">
    ⚠️ This ticket is due very soon! Please prioritize it.
  </p>
</div>
{% endif %}

<div style="text-align: center; margin: 24px 0;">
  <a href="{{ ticket_url }}" class="btn">View Ticket</a>
</div>
{% endblock %}