{% extends '_base.html' %}
{% block title  %} نمایش نتیجه {% endblock title %}
{% block content %}
                {% if result.response %}
                <div class="w-full max-w-2xl bg-white/5 shadow-lg rounded-2xl p-6 border border-white/10">
                    <!-- عنوان -->
                    <h1 class="text-3xl font-bold text-amber-400 mb-3 text-center">
                        {{ result.recipeName }}
                    </h1>

                    <!-- توضیحات -->
                    <p class="text-gray-300 text-center mb-2">
                        {{ result.description }}
                    </p>

                    <!-- مدت زمان -->
                    <p class="text-sm text-gray-400 text-center mb-6">
                        ⏱ مدت زمان پاسخ‌ دهی: <span class="font-semibold">{{ result.response_duration }}</span> ثانیه
                    </p>

                    <!-- مواد لازم -->
                    <h2 class="text-xl font-semibold text-amber-300 mb-2">🛒 مواد لازم برای {{ result.servings }} نفر
                    </h2>
                    <ul class="list-disc list-inside space-y-1 mb-6 text-gray-200 marker:text-amber-400">
                        {% for item in result.ingredients_list %}
                        <li>{{forloop.counter}}. {{ item }}</li>
                        {% endfor %}
                    </ul>

                    <!-- دستور پخت -->
                    <h2 class="text-xl font-semibold text-amber-300 mb-2">👨‍🍳 مراحل دستور پخت</h2>
                    <ol class="list-decimal list-inside space-y-2 text-gray-200 marker:text-amber-400">
                        {% for item in result.instructions_list %}
                        <li>{{forloop.counter}}. {{ item }}</li>
                        {% endfor %}
                    </ol>
                </div>
                {% else %}

                <div class="w-full max-w-2xl bg-white/5 shadow-lg rounded-2xl p-6 border border-white/10">
                    <div class="flex flex-col items-center justify-center">
                        <div class="loader mb-4" style="border: 4px solid #f3f3f3; border-top: 4px solid #f59e42; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite;"></div>
                        <p>در حال آماده‌سازی دستور پخت <span></span></p>
                    </div>
                    <style>
                    @keyframes spin {
                        0% { transform: rotate(0deg);}
                        100% { transform: rotate(360deg);}
                    }
                    </style>
                    <script>

                        setTimeout(function () {
                            location.reload();
                        }, 10000); // 10000 میلی‌ثانیه = 10 ثانیه
                    </script>

                </div>


                {% endif %}


{% endblock content%}