<!-- Application Status Updated -->
<h1 class="email-title">Application Status Update</h1>

<div style="text-align: center; margin: 20px 0">
  <span class="status-badge {{status_class}}">{{status}}</span>
</div>

<p>Hi {{first_name}},</p>
<p>There has been an update on your application for the position:</p>

<div class="detail-card">
  <div class="detail-row">
    <span class="detail-label">Job Title</span>
    <span class="detail-value">{{job_title}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">Company</span>
    <span class="detail-value">{{company_name}}</span>
  </div>
  <div class="detail-row">
    <span class="detail-label">Status</span>
    <span class="detail-value" style="color: {{status_color}};"
      >{{status}}</span
    >
  </div>
  <div class="detail-row">
    <span class="detail-label">Updated On</span>
    <span class="detail-value">{{updated_at}}</span>
  </div>
</div>

<Show when="{{note}}">
  <div
    class="info-box"
    style="background-color: #f3f4f6; border-left-color: #6b7280"
  >
    <p class="info-box-title" style="color: #374151">📝 Note from Employer:</p>
    <p style="margin: 0; color: #1f2937">{{note}}</p>
  </div>
</Show>

<div style="text-align: center">
  <a href="{{applications_url}}" class="cta-button">View Application</a>
</div>

<div class="info-box">
  <p class="info-box-title">💡 What's Next?</p>
  <p style="margin: 0">{{next_steps}}</p>
</div>

<p>Best of luck with your application!</p>
<p>Best regards,<br /><strong>The Nxtgauge Team</strong></p>
