{% extends "dashboard/base_dashboard.html" %}

{% block title %}As Minhas Avaliações — Dra. Mariela Moreno Autie{% endblock %}
{% block panel_title %}As Minhas Avaliações{% endblock %}

{% block panel_content %}
<div class="max-w-3xl">
    {% if valoraciones %}
    <div class="space-y-4">
        {% for v in valoraciones %}
        <div class="bg-white rounded-xl p-6 border border-gray-100 shadow-sm">
            <div class="flex items-start justify-between gap-4 mb-3">
                <div>
                    <p class="text-dark font-semibold">{{ v.cita.servicio.nombre }}</p>
                    <p class="text-gray-400 text-xs">{{ v.cita.fecha_hora|date:"d/m/Y H:i" }}</p>
                </div>
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium
                    {% if v.estado == 'aprobada' %}bg-green-50 text-green-700
                    {% elif v.estado == 'rechazada' %}bg-red-50 text-red-700
                    {% else %}bg-amber-50 text-amber-700{% endif %}">
                    {{ v.get_estado_display }}
                </span>
            </div>
            <!-- Estrellas -->
            <div class="flex gap-0.5 mb-2">
                {% for i in "12345" %}
                <svg class="w-4 h-4 {% if forloop.counter <= v.estrellas %}text-dorado{% else %}text-gray-200{% endif %}" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
                {% endfor %}
            </div>
            {% if v.comentario %}
            <p class="text-gray-500 text-sm mb-3">{{ v.comentario }}</p>
            {% endif %}
            {% if v.respuesta_doctora %}
            <div class="mt-3 pl-4 border-l-2 border-rosa/30">
                <p class="text-xs text-rosa font-medium mb-1">Resposta da Dra. Mariela:</p>
                <p class="text-gray-500 text-sm">{{ v.respuesta_doctora }}</p>
            </div>
            {% endif %}
            {% if v.puede_editar %}
            <div class="mt-4">
                <a href="{% url 'ratings:editar_valoracion' v.id %}"
                   class="text-rosa text-sm font-medium hover:underline">Editar avaliação →</a>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-white rounded-xl p-8 border border-gray-100 shadow-sm text-center">
        <svg class="w-16 h-16 mx-auto text-gray-200 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
        <p class="text-gray-400 text-sm">Ainda não tem avaliações.</p>
        <p class="text-gray-300 text-xs mt-1">Poderá avaliar as suas consultas quando concluídas.</p>
    </div>
    {% endif %}

    <div class="mt-6">
        <a href="{% url 'users:panel_paciente' %}" class="text-rosa text-sm font-medium hover:underline">← Voltar ao painel</a>
    </div>
</div>
{% endblock %}