{% extends "dashboard_base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="image-container">
    <header>
        <div class="title-block">
            <h1>Reddit Ticker Mentions</h1>
            <h2>{{ subtitle }}</h2>
        </div>

        <div class="header-action">
            <div class="date">{{ date_string }}</div>

            <!-- Only show the icon if we are NOT already in image mode -->
            {% if not is_image_mode %}
            <a href="{{ base_url }}?view={{ view_type }}&image=true" class="icon-link" title="View as Shareable Image">
                <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
                    <circle cx="12" cy="13" r="4"></circle>
                </svg>
            </a>
            {% endif %}
        </div>
    </header>
    <table>
        <thead>
            <tr>
                <th class="rank">Rank</th>
                <th class="ticker">Ticker</th>
                <th class="mentions">Mentions</th>
                <th class="sentiment">Sentiment</th>
                <th class="financials">Mkt Cap</th>
                <th class="financials">Close Price</th>
            </tr>
        </thead>
        <tbody>
            {% for ticker in tickers %}
            <tr>
                <td data-label="Rank" class="rank">{{ loop.index }}</td>
                <td data-label="Ticker" class="ticker">
                    <strong>
                        {% if is_image_mode %}
                            {{ ticker.symbol }}
                        {% else %}
                            <a href="/deep-dive/{{ ticker.symbol }}">{{ ticker.symbol }}</a>
                        {% endif %}
                    </strong>
                </td>
                <td data-label="Mentions" class="mentions">{{ ticker.total_mentions }}</td>
                <td data-label="Sentiment" class="sentiment">
                    {% if ticker.bullish_mentions > ticker.bearish_mentions %}
                        <span class="sentiment-bullish">Bullish</span>
                    {% elif ticker.bearish_mentions > ticker.bearish_mentions %}
                        <span class="sentiment-bearish">Bearish</span>
                    {% else %}
                        <span class="sentiment-neutral">Neutral</span>
                    {% endif %}
                </td>
                <td data-label="Mkt Cap" class="financials">{{ ticker.market_cap | format_mc }}</td>
                <td data-label="Close Price" class="financials">
                    {% if ticker.closing_price %}
                        <a href="https://finance.yahoo.com/quote/{{ ticker.symbol }}" target="_blank" title="View on Yahoo Finance">
                            ${{ "%.2f"|format(ticker.closing_price) }}
                        </a>
                    {% else %}
                        N/A
                    {% endif %}
                </td>
            </tr>
            {% else %}
            <tr>
                <td colspan="6" style="text-align: center; padding: 2rem;">No ticker data found for this period.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    <footer style="margin-top: 3rem; text-align: center;">
        <div class="brand-name">
            <a href="https://www.reddit.com/r/rstat/" target="_blank">
                r/rstat
            </a>
        </div>
        <div class="brand-subtitle">
            <a href="https://www.reddit.com/r/rstat/" target="_blank">
                visit us for more.
            </a>
        </div>
    </footer>
</div>
{% endblock %}