<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>بازنشانی رمز عبور - انجمن علمی مهندسی کامپیوتر گیلان</title>
    <style>
        body {
            font-family: 'Vazir', 'Tahoma', Arial, sans-serif;
            line-height: 1.6;
            color: #333;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            direction: rtl; /* Ensure RTL for the entire body */
            text-align: right; /* Align text to the right */
        }
        .header {
            background-color: #dc2626; /* Red color for password reset */
            color: white;
            padding: 20px;
            text-align: center;
            border-radius: 8px 8px 0 0;
        }
        .content {
            background-color: #f9fafb;
            padding: 30px;
            border-radius: 0 0 8px 8px;
        }
        .button {
            display: inline-block;
            background-color: #dc2626;
            color: white;
            padding: 12px 24px;
            text-decoration: none;
            border-radius: 6px;
            margin: 20px 0;
        }
        .footer {
            text-align: center;
            width: 100%;
            margin-top: 20px;
            font-size: 14px;
            color: #6b7280;
        }
        /* For elements that should remain LTR, like URLs */
        .ltr {
            direction: ltr;
            text-align: left;
        }
        /* Vazir font import for email clients that support it */
        @font-face {
            font-family: 'Vazir';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/Vazir-Regular.woff2') format('woff2');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }
        @font-face {
            font-family: 'Vazir';
            src: url('https://cdn.jsdelivr.net/gh/rastikerdar/vazir-font@v30.1.0/dist/Vazir-Bold.woff2') format('woff2');
            font-weight: bold;
            font-style: normal;
            font-display: swap;
        }
        .social-links {
            width: 100%;
            display: flex;
            justify-content: center;
            gap: 1rem;
            margin-top: 15px;
            direction: ltr; /* Force LTR for social icons/text */
        }
        .social-links a {
            text-decoration: none;
            color: #6b7280;
            display: flex;
            align-items: center;
            gap: 5px;
            flex-direction: row-reverse; /* Reverse order for RTL text with LTR icons */
        }
        .social-links img {
            width: 24px;
            height: 24px;
            vertical-align: middle;
        }
    </style>
</head>
<body dir="rtl">
    <div class="header">
        <h1>انجمن علمی مهندسی کامپیوتر</h1>
        <p>درخواست بازنشانی رمز عبور</p>
    </div>
    
    <div class="content">
        <h2>سلام {{ user.get_full_name|default:'' }}!</h2>
        
        <p>ما درخواستی برای بازنشانی رمز عبور حساب کاربری شما دریافت کردیم. اگر شما این درخواست را داده‌اید، روی دکمه زیر کلیک کنید تا رمز عبور خود را بازنشانی کنید:</p>
        
        <div style="text-align: center;">
            <a href="{{ reset_url }}" class="button">بازنشانی رمز عبور</a>
        </div>
        
        <p>اگر دکمه کار نمی‌کند، می‌توانید این لینک را کپی کرده و در مرورگر خود قرار دهید:</p>
        <p class="ltr" style="word-break: break-all; background-color: #e5e7eb; padding: 10px; border-radius: 4px;">{{ reset_url }}</p>
        
        <p>این لینک بازنشانی رمز عبور به دلایل امنیتی پس از ۱ ساعت منقضی خواهد شد.</p>
        
        <p><strong>اگر شما درخواست بازنشانی رمز عبور نداده‌اید، لطفاً این ایمیل را نادیده بگیرید.</strong> رمز عبور شما بدون تغییر باقی خواهد ماند.</p>
        
        <p>با احترام،<br>انجمن علمی مهندسی کامپیوتر دانشکده فنی و مهندسی شرق گیلان</p>
    </div>
    
    <div class="footer">
        <p>&copy; {% now 'Y' %} انجمن علمی مهندسی کامپیوتر شرق گیلان. تمامی حقوق محفوظ است.</p>

        <!-- ایموجی + لینک بدون تصویر -->
        <div style="text-align:center; margin-top:12px; direction:ltr;">
            <a href="https://instagram.com/guilance.ir" target="_blank"
            style="text-decoration:none; color:#6b7280; margin:0 8px; font-size:14px;">
            📷 Instagram
            </a>
            <a href="https://t.me/guilance" target="_blank"
            style="text-decoration:none; color:#6b7280; margin:0 8px; font-size:14px;">
            ✈️ Telegram
            </a>
        </div>

        <p style="margin-top:10px;">این ایمیل به صورت خودکار ارسال شده است. لطفاً به این پیام پاسخ ندهید.</p>
    </div>
</body>
</html>
