<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Password Change Reminder</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f6f8;
      color: #333;
      padding: 0;
      margin: 0;
    }
    .container {
      background: #ffffff;
      max-width: 600px;
      margin: 30px auto;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      padding: 30px;
    }
    h2 {
      color: #444;
      font-size: 20px;
      margin-bottom: 20px;
    }
    p {
      font-size: 15px;
      line-height: 1.6;
    }
    a.button {
      display: inline-block;
      background: #007bff;
      color: #fff;
      text-decoration: none;
      padding: 10px 18px;
      border-radius: 5px;
      margin-top: 15px;
    }
    .footer {
      font-size: 13px;
      color: #777;
      margin-top: 25px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Hello {{employee_name}},</h2>
    <p>
      This is a friendly reminder to update your account password for security reasons.
    </p>
    <p>
      Your account was created on <strong>{{created_date}}</strong> and you haven't updated your password since then.
    </p>
    <p>
      Please click the button below to change your password now:
    </p>
    <p>
      <a href="{{reset_link}}" class="button">Change Password</a>
    </p>
    <p class="footer">
      This is an automated message from your Timesheet System.<br>
      Please ignore if you've already updated your password.
    </p>
  </div>
</body>
</html>
