<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Password Expiration Notice</title>
</head>
<body style="margin: 0; padding: 0; font-family: 'Segoe UI', Arial, sans-serif; background-color: #f4f4f4;">
    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="background-color: #f4f4f4; padding: 20px 0;">
        <tr>
            <td align="center">
                <table cellpadding="0" cellspacing="0" border="0" width="600" style="background-color: #ffffff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                    <!-- Header -->
                    <tr>
                        <td style="background-color: #0078d4; padding: 20px; text-align: center; border-radius: 4px 4px 0 0;">
                            <img src="{{ logo_url | default('https://cdn.example.com/logo.png') }}" alt="IT Department" style="height: 40px;">
                        </td>
                    </tr>
                    
                    <!-- Warning Banner -->
                    <tr>
                        <td style="background-color: #fff4ce; padding: 15px; border-left: 4px solid #ffb900;">
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td style="padding-right: 10px;">
                                        <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iI2ZmYjkwMCI+PHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bTEgMTVoLTJ2LTJoMnYyem0wLTRoLTJWN2gydjZ6Ii8+PC9zdmc+" alt="Warning" style="width: 24px; height: 24px;">
                                    </td>
                                    <td>
                                        <strong style="color: #323130; font-size: 16px;">Action Required: Password Expires in {{ days_until_expiry | default('3') }} Days</strong>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    
                    <!-- Content -->
                    <tr>
                        <td style="padding: 30px;">
                            <h2 style="color: #323130; font-size: 24px; margin: 0 0 20px;">Your Password is About to Expire</h2>
                            
                            <p style="color: #605e5c; font-size: 16px; line-height: 24px; margin: 0 0 20px;">
                                Hello {{ "{{.FirstName}}" }},
                            </p>
                            
                            <p style="color: #605e5c; font-size: 16px; line-height: 24px; margin: 0 0 20px;">
                                Our records indicate that your {{ organization | default('organization') }} password will expire on <strong>{{ expiry_date | default('{{.ExpiryDate}}') }}</strong>. 
                                To prevent any interruption to your access, please update your password before it expires.
                            </p>
                            
                            <p style="color: #605e5c; font-size: 16px; line-height: 24px; margin: 0 0 30px;">
                                Password requirements:
                            </p>
                            
                            <ul style="color: #605e5c; font-size: 14px; line-height: 22px; margin: 0 0 30px; padding-left: 20px;">
                                <li>Minimum 12 characters</li>
                                <li>At least one uppercase letter</li>
                                <li>At least one lowercase letter</li>
                                <li>At least one number</li>
                                <li>At least one special character</li>
                                <li>Cannot be the same as your last 5 passwords</li>
                            </ul>
                            
                            <table cellpadding="0" cellspacing="0" border="0" style="margin: 0 auto;">
                                <tr>
                                    <td style="background-color: #0078d4; border-radius: 4px; padding: 12px 24px;">
                                        <a href="{{ "{{.URL}}" }}" style="color: #ffffff; text-decoration: none; font-size: 16px; font-weight: 600; display: block;">
                                            Update Password Now
                                        </a>
                                    </td>
                                </tr>
                            </table>
                            
                            <p style="color: #a19f9d; font-size: 14px; line-height: 20px; margin: 30px 0 0; text-align: center;">
                                If you're unable to click the button above, copy and paste this link into your browser:<br>
                                <a href="{{ "{{.URL}}" }}" style="color: #0078d4; word-break: break-all;">{{ "{{.URL}}" }}</a>
                            </p>
                        </td>
                    </tr>
                    
                    <!-- Footer -->
                    <tr>
                        <td style="background-color: #f8f8f8; padding: 20px; text-align: center; border-radius: 0 0 4px 4px;">
                            <p style="color: #a19f9d; font-size: 12px; margin: 0;">
                                This is an automated message from {{ organization | default('IT Department') }}.<br>
                                Please do not reply to this email.<br>
                                For assistance, contact the help desk at {{ support_email | default('support@example.com') }}
                            </p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>