{% extends "dashboard/base.html" %}
{% load static %}

{% block title %}My Questions - PassMCQ{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center">
        <i class="fas fa-question-circle mr-3 text-indigo-500"></i> My Questions
    </h2>

    <div class="space-y-5" id="doubts-container">
        {% for doubt in doubts %}
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-md overflow-hidden border border-gray-100 dark:border-slate-700" 
             x-data="{ 
                 commentOpen: false, 
                 liked: {% if request.user in doubt.likes.all %}true{% else %}false{% endif %}, 
                 bookmarked: {% if request.user in doubt.bookmarks.all %}true{% else %}false{% endif %} 
             }">
            {% include 'dashboard/doubts/doubt_card.html' with doubt=doubt %}
        </div>
        {% empty %}
        <div class="bg-white dark:bg-slate-800 rounded-xl shadow-md p-6 text-center border border-gray-100 dark:border-slate-700">
            <div class="mx-auto h-24 w-24 text-gray-400 dark:text-gray-500 mb-4">
                <i class="fas fa-question-circle text-5xl"></i>
            </div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-1">You haven't posted any questions yet</h3>
            <p class="text-gray-500 dark:text-gray-400">Ask your first question!</p>
            <a href="{% url 'doubts_home' %}" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                <i class="fas fa-plus mr-2"></i> Post a Question
            </a>
        </div>
        {% endfor %}
    </div>

    {% if doubts.has_other_pages %}
    <div class="mt-8 flex justify-center">
        <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
            {% if doubts.has_previous %}
            <a href="?page={{ doubts.previous_page_number }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700">
                <span class="sr-only">Previous</span>
                <i class="fas fa-chevron-left"></i>
            </a>
            {% endif %}

            {% for num in doubts.paginator.page_range %}
            {% if doubts.number == num %}
            <a href="?page={{ num }}" aria-current="page" class="z-10 bg-indigo-50 dark:bg-indigo-900/30 border-indigo-500 text-indigo-600 dark:text-indigo-400 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                {{ num }}
            </a>
            {% else %}
            <a href="?page={{ num }}" class="bg-white dark:bg-slate-800 border-gray-300 dark:border-slate-600 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
                {{ num }}
            </a>
            {% endif %}
            {% endfor %}

            {% if doubts.has_next %}
            <a href="?page={{ doubts.next_page_number }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-slate-600 bg-white dark:bg-slate-800 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-slate-700">
                <span class="sr-only">Next</span>
                <i class="fas fa-chevron-right"></i>
            </a>
            {% endif %}
        </nav>
    </div>
    {% endif %}
</div>
{% endblock %}