{% load static i18n %}


<!-- dashboard/doubts/doubt_item.html -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-6">
    <!-- Doubt Header -->
    <div class="p-4 border-b">
        <div class="flex items-center gap-3">
            <img src="{% if doubt.user.profile_pic %}{{ doubt.user.profile_pic.url }}{% else %}{% static 'img/default-profile.png' %}{% endif %}" 
                 alt="{{ doubt.user.username }}" class="w-10 h-10 rounded-full object-cover flex-shrink-0">
            <div>
                <h3 class="font-semibold">{{ doubt.user.get_full_name|default:doubt.user.username }}</h3>
                <p class="text-xs text-gray-500">
                    <span>{{ doubt.created_at|date:"d F, Y h:i A" }}</span>
                    <span class="mx-1">•</span>
                    <span>
                        {% if doubt.doubt_type == 'text' %}
                            {% trans "টেক্সট" %}
                        {% elif doubt.doubt_type == 'image' %}
                            {% trans "ইমেজ" %}
                        {% elif doubt.doubt_type == 'code' %}
                            {% trans "কোড" %}
                        {% endif %}
                    </span>
                    {% if doubt.class_level %}
                    <span class="mx-1">•</span>
                    <span>{{ doubt.class_level.name }}</span>
                    {% endif %}
                </p>
            </div>
        </div>
    </div>
    
    <!-- Doubt Content -->
    <div class="p-4">
        {% if doubt.doubt_type == 'text' %}
            <p class="whitespace-pre-line text-sm">{{ doubt.content }}</p>
        {% elif doubt.doubt_type == 'image' %}
            <img src="{{ doubt.image.url }}" alt="{% trans 'প্রশ্নের ইমেজ' %}" class="max-w-full h-auto rounded-lg mb-3">
            {% if doubt.content %}
                <p class="whitespace-pre-line text-sm">{{ doubt.content }}</p>
            {% endif %}
        {% elif doubt.doubt_type == 'code' %}
            <div class="mb-3">
                <span class="inline-block bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded">
                    {% if doubt.language == 'python' %}Python
                    {% elif doubt.language == 'javascript' %}JavaScript
                    {% elif doubt.language == 'java' %}Java
                    {% elif doubt.language == 'cpp' %}C++
                    {% elif doubt.language == 'c' %}C
                    {% elif doubt.language == 'html' %}HTML
                    {% elif doubt.language == 'css' %}CSS
                    {% else %}{% trans "অন্যান্য" %}
                    {% endif %}
                </span>
            </div>
            <pre class="bg-gray-50 p-3 rounded-lg overflow-x-auto text-xs"><code>{{ doubt.content }}</code></pre>
        {% endif %}
    </div>
    
    <!-- Doubt Actions -->
    <div class="px-4 py-2 border-t bg-gray-50">
        <div class="flex items-center gap-4">
            <button class="flex items-center text-gray-500 hover:text-red-500 like-btn" data-doubt-id="{{ doubt.id }}">
                <i class="{% if request.user in doubt.likes.all %}fas text-red-500{% else %}far{% endif %} fa-heart mr-1"></i>
                <span class="like-count text-sm">{{ doubt.likes.count }}</span>
            </button>
            <button @click="openCommentSection('{{ doubt.id }}')" class="flex items-center text-gray-500 hover:text-blue-500">
                <i class="far fa-comment mr-1"></i>
                <span id="comment-count-{{ doubt.id }}" class="text-sm">{{ doubt.comments.count }}</span>
            </button>
            <button class="flex items-center text-gray-500 hover:text-green-500">
                <i class="fas fa-share-alt mr-1"></i>
            </button>
        </div>
    </div>
    
    <!-- Comments Section -->
    <div x-show="openComments === '{{ doubt.id }}'" x-transition class="border-t bg-gray-50 p-4">
        <div id="comments-container-{{ doubt.id }}" class="mb-4 space-y-3 max-h-64 overflow-y-auto">
            {% for comment in doubt.comments.all|slice:":3" %}
            <div class="flex gap-3">
                <img src="{% if comment.user.profile_pic %}{{ comment.user.profile_pic.url }}{% else %}{% static 'img/default-profile.png' %}{% endif %}" 
                     alt="{{ comment.user.username }}" class="w-8 h-8 rounded-full object-cover flex-shrink-0">
                <div class="flex-1 bg-gray-50 p-3 rounded-lg">
                    <div class="flex justify-between items-start">
                        <span class="font-semibold text-sm">{{ comment.user.get_full_name|default:comment.user.username }}</span>
                        <span class="text-xs text-gray-500">{{ comment.created_at|timesince }} {% trans "আগে" %}</span>
                    </div>
                    <p class="text-sm mt-1">{{ comment.content }}</p>
                </div>
            </div>
            {% endfor %}
        </div>
        
        <!-- Comment Form -->
        <div class="flex gap-3">
            <img src="{% if request.user.profile_pic %}{{ request.user.profile_pic.url }}{% else %}{% static 'img/default-profile.png' %}{% endif %}" 
                 alt="{{ request.user.username }}" class="w-8 h-8 rounded-full object-cover flex-shrink-0">
            <div class="flex-1 flex items-center gap-2">
                <input type="text" id="comment-input-{{ doubt.id }}" 
                       placeholder="{% trans 'মন্তব্য লিখুন...' %}" 
                       class="flex-1 border-0 border-b border-gray-300 focus:border-blue-500 focus:ring-0 px-0 py-1 text-sm">
                <button @click="postComment('{{ doubt.id }}')" 
                        class="text-blue-600 font-medium text-sm px-3 py-1 rounded hover:bg-blue-50">
                    {% trans "পোস্ট" %}
                </button>
            </div>
        </div>
    </div>
</div>