{% extends 'base.html.twig' %}

{% block title %}باشگاه مشتریان حسابیکس - {{ block('page_title') }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* بهبود نمایش آیکون‌های SVG */
        .icon-svg {
            width: 16px;
            height: 16px;
            margin-left: 5px;
            margin-right: 0;
            display: inline-block;
            vertical-align: middle;
        }
        
        .icon-svg-large {
            width: 48px;
            height: 48px;
            margin: 0 auto 20px;
            display: block;
        }
        
        /* تغییر رنگ آیکون‌های SVG */
        .icon-svg svg,
        .icon-svg-large svg {
            fill: currentColor;
            width: 100%;
            height: 100%;
        }
        
        /* آیکون‌های رنگی */
        .icon-heart svg { fill: #e74c3c; }
        .icon-user svg { fill: #3498db; }
        .icon-calendar svg { fill: #f39c12; }
        .icon-cogs svg { fill: #95a5a6; }
        .icon-key svg { fill: #9b59b6; }
        .icon-home svg { fill: #2ecc71; }
        .icon-sign-out svg { fill: #e74c3c; }
        .icon-exclamation svg { fill: #e74c3c; }
        .icon-sign-in svg { fill: #27ae60; }
        .icon-user-plus svg { fill: #3498db; }
        .icon-check svg { fill: #27ae60; }
        .icon-info svg { fill: #3498db; }
        .icon-lock svg { fill: #95a5a6; }
        .icon-arrow-left svg { fill: #7f8c8d; }
        
        /* آیکون‌های بزرگ */
        .icon-svg-large.icon-heart svg { fill: #e74c3c; }
        .icon-svg-large.icon-key svg { fill: #9b59b6; }
        .icon-svg-large.icon-lock svg { fill: #95a5a6; }
    </style>
{% endblock %}

{% block body %}
    <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-500 via-purple-600 to-indigo-700 py-20 px-4" dir="rtl">
        <div class="w-full max-w-md">
            <div class="bg-white rounded-2xl shadow-2xl overflow-hidden">
                <!-- هدر -->
                <div class="bg-gradient-to-r from-blue-600 to-purple-600 text-white p-8 text-center">
                    <img src="{{ asset('/favicon/favicon.svg') }}" alt="حسابیکس" class="w-16 h-16 mx-auto mb-4">
                    <h1 class="text-2xl font-bold mb-2">باشگاه مشتریان حسابیکس</h1>
                    <p class="text-blue-100">{{ block('page_subtitle') }}</p>
                </div>
                
                <!-- محتوا -->
                <div class="p-8">
                    <!-- پیام‌های فلش -->
                    {% for message in app.flashes('success') %}
                        <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-green-800 text-right" role="alert">
                            <div class="flex items-center">
                                <img src="{{ asset('/img/icons/check-circle.svg') }}" alt="موفقیت" class="icon-svg icon-check ml-2">
                                {{ message }}
                            </div>
                        </div>
                    {% endfor %}
                    
                    {% for message in app.flashes('error') %}
                        <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-red-800 text-right" role="alert">
                            <div class="flex items-center">
                                <img src="{{ asset('/img/icons/exclamation-circle.svg') }}" alt="خطا" class="icon-svg icon-exclamation ml-2">
                                {{ message }}
                            </div>
                        </div>
                    {% endfor %}
                    
                    {% for message in app.flashes('info') %}
                        <div class="mb-6 p-4 bg-blue-50 border border-blue-200 rounded-xl text-blue-800 text-right" role="alert">
                            <div class="flex items-center">
                                <img src="{{ asset('/img/icons/info-circle.svg') }}" alt="اطلاعات" class="icon-svg icon-info ml-2">
                                {{ message }}
                            </div>
                        </div>
                    {% endfor %}
                    
                    {% block auth_content %}{% endblock %}
                </div>
            </div>
        </div>
    </div>
{% endblock %}