{% load i18n %}
<div class="bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden">
    <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
        <h3 class="text-sm font-bold text-gray-900 flex items-center gap-2">
            <svg class="w-4 h-4 text-indigo-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
            {% trans "AI Risk Assessment" %}
        </h3>
        <div class="flex items-center gap-2">
            {% if analysis.status == "completed" %}
            <span class="text-[11px] text-gray-400">{{ analysis.generation_time_ms|default:"" }}ms</span>
            {% endif %}
            <button hx-post="{% url 'executive:analyze_insights' %}"
                    hx-include="[name='hospital']"
                    hx-target="#ai-insights-result"
                    hx-swap="innerHTML"
                    hx-indicator="#ai-insights-spinner"
                    class="text-xs px-2.5 py-1 bg-indigo-50 text-indigo-700 rounded-lg hover:bg-indigo-100 transition font-medium">
                {% trans "Regenerate" %}
            </button>
        </div>
    </div>
    <div class="p-5">
        {% if analysis.status == "failed" %}
        <div class="text-center py-4">
            <svg class="w-8 h-8 text-red-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
            <p class="text-sm text-red-600">{% trans "Analysis failed. Try regenerating." %}</p>
        </div>
        {% else %}
        <p class="text-sm text-gray-700 leading-relaxed mb-4">{{ analysis.narrative }}</p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            {% if analysis.highlights %}
            <div>
                <p class="text-xs font-semibold text-green-700 mb-1.5">{% trans "Highlights" %}</p>
                <ul class="space-y-1">
                    {% for h in analysis.highlights %}
                    <li class="text-xs text-gray-600 flex gap-1"><span class="text-green-500 flex-shrink-0">+</span> {{ h|truncatewords:12 }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
            {% if analysis.concerns %}
            <div>
                <p class="text-xs font-semibold text-red-700 mb-1.5">{% trans "Concerns" %}</p>
                <ul class="space-y-1">
                    {% for c in analysis.concerns %}
                    <li class="text-xs text-gray-600 flex gap-1"><span class="text-red-500 flex-shrink-0">!</span> {{ c|truncatewords:12 }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
            {% if analysis.recommendations %}
            <div>
                <p class="text-xs font-semibold text-indigo-700 mb-1.5">{% trans "Recommendations" %}</p>
                <ul class="space-y-1">
                    {% for r in analysis.recommendations %}
                    <li class="text-xs text-gray-600 flex gap-1"><span class="text-indigo-500 flex-shrink-0">→</span> {{ r|truncatewords:12 }}</li>
                    {% endfor %}
                </ul>
            </div>
            {% endif %}
        </div>
        {% endif %}
        <p class="text-[11px] text-gray-400 mt-3">{% trans "Generated just now" %}</p>
    </div>
</div>