{% extends "dashboard_base.html" %}

{% block title %}Deep Dive: {{ symbol }}{% endblock %}

{% block content %}
<!-- This outer div handles the centering -->
<div class="flex flex-col items-center">
    <div class="w-full max-w-3xl bg-slate-800/50 ring-1 ring-slate-700 rounded-2xl p-6 sm:p-10 shadow-2xl">

        <!-- --- THIS IS THE KEY CHANGE --- -->
        <!-- We wrap all the content in an <article> tag with the 'prose' classes -->
        <article class="prose prose-slate prose-invert max-w-none">

            <header class="text-center mb-8">
                <!-- The h1 and p tags will now be beautifully styled by 'prose' -->
                <h1>Deep Dive Analysis: <span class="text-sky-400">{{ symbol }}</span></h1>
                <p>Showing posts that mention {{ symbol }}, sorted by most recent.</p>
            </header>

            <div class="space-y-4 not-prose">
                {% for post in posts %}
                <!-- 'not-prose' is used on the container so we can control styling precisely -->
                <div class="bg-slate-800/50 ring-1 ring-slate-700/50 rounded-lg p-4 text-left not-prose">
                    <h3 class="text-lg font-bold text-slate-200 mb-2">
                        <!-- This link WILL be styled by the parent 'prose' class -->
                        <a href="{{ post.post_url }}" target="_blank">{{ post.title }}</a>
                    </h3>
                    <div class="text-sm text-slate-400 flex flex-col sm:flex-row sm:items-center gap-x-4 gap-y-1">
                        <span class="font-semibold">r/{{ post.subreddit_name }}</span>
                        <span class="hidden sm:inline">|</span>
                        <span>{{ post.comment_count }} comments analyzed</span>
                        <span class="hidden sm:inline">|</span>
                        <span>Avg. Sentiment:
                            {% if post.avg_comment_sentiment > 0.1 %}
                            <span class="font-bold text-green-400">{{ "%.2f"|format(post.avg_comment_sentiment) }}
                                (Bullish)</span>
                            {% elif post.avg_comment_sentiment < -0.1 %} <span class="font-bold text-red-400">{{
                                "%.2f"|format(post.avg_comment_sentiment) }} (Bearish)</span>
                        {% else %}
                        <span class="font-bold text-slate-500">{{ "%.2f"|format(post.avg_comment_sentiment) }}
                            (Neutral)</span>
                        {% endif %}
                        </span>
                    </div>
                </div>
                {% else %}
                <div class="text-center text-slate-500 p-8 not-prose">No analyzed posts found for this ticker.</div>
                {% endfor %}
            </div>

        </article>
    </div>
</div>
{% endblock %}