{% load intelligence_extras %}
{% with video=result.video niche=result.niche %}
<div>
    {% comment %} Hero, video identity. Channel title + raw counts +
       publish date below the headline. {% endcomment %}
    <div class="mb-4">
        <div class="text-base font-semibold text-stone-900">{{ video.title }}</div>
        <div class="mt-1 text-xs text-stone-500">
            {{ video.channel_title }}
            {% if video.published_at %}
            · {{ video.published_at|parse_iso_datetime|date:"M j, Y" }}
            {% endif %}
        </div>
        <div class="mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-stone-600">
            <span><span class="font-semibold text-stone-900 tabular-nums">{{ video.view_count|humanize_count }}</span> views</span>
            {% if video.like_count is not None %}
            <span><span class="font-semibold text-stone-900 tabular-nums">{{ video.like_count|humanize_count }}</span> likes</span>
            {% endif %}
            {% if video.comment_count is not None %}
            <span><span class="font-semibold text-stone-900 tabular-nums">{{ video.comment_count|humanize_count }}</span> comments</span>
            {% endif %}
        </div>
    </div>

    {% comment %} Overall percentile + niche identity {% endcomment %}
    <div class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-1 items-start mt-2 pt-4 border-t border-stone-100">
        <div>
            <div class="flex items-center">
                <div class="text-xs uppercase tracking-wide text-stone-500">Overall percentile</div>
                <span class="intel-tooltip-trigger" tabindex="0" aria-describedby="bv-overall-tooltip">
                    <span class="intel-tooltip-icon" aria-hidden="true">?</span>
                    <span id="bv-overall-tooltip" role="tooltip" class="intel-tooltip" data-align="left">
                        Composite rank of this video's engagement vs recent
                        videos in the same niche. <strong>50</strong> is the
                        median; <strong>80+</strong> is top-tier; below 30
                        means most niche videos outperform this one on the
                        per-row metrics below.
                    </span>
                </span>
            </div>
            <div class="mt-1 text-6xl font-bold tabular-nums leading-none" style="color: var(--primary);">
                {{ video.engagement_percentiles.overall }}
            </div>
        </div>
        <div class="text-right">
            <div class="text-xs uppercase tracking-wide text-stone-500">Niche</div>
            <div class="mt-1 text-sm font-medium text-stone-900">{{ niche.name }}</div>
            <div class="mt-1 flex items-center gap-2 justify-end flex-wrap">
                <span class="text-[11px] font-mono px-1.5 py-0.5 rounded bg-stone-100 text-stone-500">{{ niche.slug }}</span>
                {% if niche.match_strength or niche.match_score %}
                <span class="inline-flex items-center gap-1.5 text-[11px] px-2 py-0.5 rounded-full tabular-nums
                             {% if niche.match_strength == 'strong' %}bg-green-50 text-green-700
                             {% elif niche.match_strength == 'moderate' %}bg-amber-50 text-amber-700
                             {% else %}bg-stone-100 text-stone-600{% endif %}">
                    {% if niche.match_strength %}
                    <span class="uppercase tracking-wide font-semibold">{{ niche.match_strength }}</span>
                    {% endif %}
                    {% if niche.match_strength and niche.match_score %}<span class="opacity-50">·</span>{% endif %}
                    {% if niche.match_score %}{{ niche.match_score|pretty_percent:0 }}{% endif %}
                </span>
                {% endif %}
            </div>
        </div>
    </div>

    {% comment %}
      Engagement breakdown, 3 rows showing the video's raw ratio,
      where it sits in the niche percentile distribution, and the
      niche median for context.
    {% endcomment %}
    {% if video.engagement_percentiles %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="flex items-center mb-3">
            <div class="text-xs uppercase tracking-wide text-stone-500">Engagement vs niche distribution</div>
            <span class="intel-tooltip-trigger" tabindex="0" aria-describedby="bv-engagement-tooltip">
                <span class="intel-tooltip-icon" aria-hidden="true">?</span>
                <span id="bv-engagement-tooltip" role="tooltip" class="intel-tooltip" data-align="left">
                    Each row compares this video's engagement ratio against
                    the niche distribution. <strong>Views / sub</strong> is
                    views divided by the channel's subscriber count;
                    <strong>Likes / view</strong> and
                    <strong>Comments / view</strong> are the per-video
                    engagement rates.
                    <br><br>
                    <strong>Niche p50</strong> is the median niche video on
                    that ratio. The <strong>pNN</strong> readout on the right
                    is this video's percentile rank: <strong>p50</strong> is
                    exactly median, <strong>p80</strong> means it
                    outperforms 80% of niche videos, <strong>p20</strong>
                    means 80% of niche videos outperform it.
                </span>
            </span>
        </div>
        <div class="space-y-3">
            {% with eng=video.engagement engp=video.engagement_percentiles nichep=niche.engagement %}

            <div class="grid grid-cols-[120px_1fr_60px] items-center gap-3">
                <div class="text-xs font-medium text-stone-700">Views / sub</div>
                <div>
                    <div class="h-1.5 rounded-full bg-stone-100 overflow-hidden">
                        <div class="h-full rounded-full" style="width: {{ engp.view_to_sub_ratio|default:0 }}%; background: var(--primary);"></div>
                    </div>
                    <div class="flex justify-between mt-1 text-[11px] text-stone-500 tabular-nums">
                        <span>This video: <span class="text-stone-900 font-medium">{{ eng.view_to_sub_ratio|pretty_percent }}</span></span>
                        <span>Niche p50: {{ nichep.view_to_sub_ratio.p50|pretty_percent }}</span>
                    </div>
                </div>
                <div class="text-xs font-mono tabular-nums text-stone-900 text-right">p{{ engp.view_to_sub_ratio }}</div>
            </div>

            <div class="grid grid-cols-[120px_1fr_60px] items-center gap-3">
                <div class="text-xs font-medium text-stone-700">Likes / view</div>
                <div>
                    <div class="h-1.5 rounded-full bg-stone-100 overflow-hidden">
                        <div class="h-full rounded-full" style="width: {{ engp.like_to_view_ratio|default:0 }}%; background: var(--primary);"></div>
                    </div>
                    <div class="flex justify-between mt-1 text-[11px] text-stone-500 tabular-nums">
                        <span>This video: <span class="text-stone-900 font-medium">{{ eng.like_to_view_ratio|pretty_percent:2 }}</span></span>
                        <span>Niche p50: {{ nichep.like_to_view_ratio.p50|pretty_percent:2 }}</span>
                    </div>
                </div>
                <div class="text-xs font-mono tabular-nums text-stone-900 text-right">p{{ engp.like_to_view_ratio }}</div>
            </div>

            <div class="grid grid-cols-[120px_1fr_60px] items-center gap-3">
                <div class="text-xs font-medium text-stone-700">Comments / view</div>
                <div>
                    <div class="h-1.5 rounded-full bg-stone-100 overflow-hidden">
                        <div class="h-full rounded-full" style="width: {{ engp.comment_to_view_ratio|default:0 }}%; background: var(--primary);"></div>
                    </div>
                    <div class="flex justify-between mt-1 text-[11px] text-stone-500 tabular-nums">
                        <span>This video: <span class="text-stone-900 font-medium">{{ eng.comment_to_view_ratio|pretty_percent:2 }}</span></span>
                        <span>Niche p50: {{ nichep.comment_to_view_ratio.p50|pretty_percent:2 }}</span>
                    </div>
                </div>
                <div class="text-xs font-mono tabular-nums text-stone-900 text-right">p{{ engp.comment_to_view_ratio }}</div>
            </div>

            {% endwith %}
        </div>
    </div>
    {% endif %}

    {% comment %}
      Title patterns, single-video form. Each pattern is a boolean
      (or a single number) FOR THIS video, compared against the niche
      aggregate (a 0–1 share, except length which is an average).
      Render as a checklist so the user sees at-a-glance which
      conventions this title follows.
    {% endcomment %}
    {% if video.title_patterns and niche.title_patterns %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="flex items-center mb-3">
            <div class="text-xs uppercase tracking-wide text-stone-500">Title patterns</div>
            <span class="intel-tooltip-trigger" tabindex="0" aria-describedby="bv-title-tooltip">
                <span class="intel-tooltip-icon" aria-hidden="true">?</span>
                <span id="bv-title-tooltip" role="tooltip" class="intel-tooltip" data-align="left">
                    Checks for niche-typical title conventions. The <strong>Niche</strong>
                    column is the share of niche videos that follow each
                    convention, so "Has a number · Niche 16%" means 16% of
                    niche titles include a digit. The <strong>fits niche patterns</strong>
                    flag at the bottom is the model's holistic verdict.
                </span>
            </span>
        </div>
        <div class="grid grid-cols-[1fr_auto_auto] gap-x-6 gap-y-2 text-xs">
            <div></div>
            <div class="text-stone-500 font-medium uppercase tracking-wide text-right">This video</div>
            <div class="text-stone-500 font-medium uppercase tracking-wide text-right">Niche</div>

            {% with v=video.title_patterns nc=niche.title_patterns %}
            <div class="text-stone-700">Title length</div>
            <div class="text-right text-stone-900 font-medium tabular-nums">{{ v.length_chars|default:"," }} characters</div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.mean_length_chars|floatformat:0 }} characters avg</div>

            <div class="text-stone-700">Has a question mark</div>
            <div class="text-right tabular-nums">
                {% if v.has_question %}
                <span class="inline-flex items-center gap-1 text-green-700"><svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Yes</span>
                {% else %}
                <span class="text-stone-400">No</span>
                {% endif %}
            </div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.share_with_question_mark|pretty_percent:0 }}</div>

            <div class="text-stone-700">Has a number</div>
            <div class="text-right tabular-nums">
                {% if v.has_number %}
                <span class="inline-flex items-center gap-1 text-green-700"><svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Yes</span>
                {% else %}
                <span class="text-stone-400">No</span>
                {% endif %}
            </div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.share_with_number|pretty_percent:0 }}</div>

            <div class="text-stone-700">Has an emoji</div>
            <div class="text-right tabular-nums">
                {% if v.has_emoji %}
                <span class="inline-flex items-center gap-1 text-green-700"><svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Yes</span>
                {% else %}
                <span class="text-stone-400">No</span>
                {% endif %}
            </div>
            <div class="text-right text-stone-500 tabular-nums">{{ nc.share_with_emoji|pretty_percent:0 }}</div>

            <div class="text-stone-700">Fits niche patterns</div>
            <div class="text-right tabular-nums col-span-2">
                {% if v.fits_niche_patterns %}
                <span class="inline-flex items-center gap-1 text-green-700 font-medium"><svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg> Yes, follows niche conventions</span>
                {% else %}
                <span class="inline-flex items-center gap-1 text-amber-700"><svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg> No, diverges from niche norms</span>
                {% endif %}
            </div>
            {% endwith %}
        </div>
    </div>
    {% endif %}

    {% comment %}
      Common niche phrases. Same treatment as the channel benchmark,
      pills with frequencies; phrases the channel uses get the
      orange-tinted highlight + check mark.
    {% endcomment %}
    {% if niche.title_patterns.common_niche_phrases %}
    <div class="mt-6 pt-5 border-t border-stone-100">
        <div class="text-xs uppercase tracking-wide text-stone-500 mb-3">Common phrases in niche</div>
        <div class="flex flex-wrap gap-1.5">
            {% for ph in niche.title_patterns.common_niche_phrases|slice:":12" %}
            <span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-md text-[11px]
                         {% if ph.used_by_channel %}font-medium{% else %}text-stone-700{% endif %}"
                  style="{% if ph.used_by_channel %}background: var(--primary-soft); color: var(--primary); border: 1px solid var(--primary-muted);{% else %}background: var(--color-stone-100); border: 1px solid var(--color-stone-200);{% endif %}">
                {% if ph.used_by_channel %}
                <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
                {% endif %}
                <span>{{ ph.phrase }}</span>
                <span class="opacity-60 tabular-nums">{{ ph.frequency|pretty_percent:0 }}</span>
            </span>
            {% endfor %}
        </div>
        {% if niche.title_patterns.common_niche_phrases|length > 12 %}
        <div class="mt-2 text-[11px] text-stone-400">
            + {{ niche.title_patterns.common_niche_phrases|length|add:"-12" }} more
        </div>
        {% endif %}
    </div>
    {% endif %}
</div>
{% endwith %}