{#
  Listing header card for the chat details panel: thumbnail (with category
  badge), title, price and a View Listing link. Expects `listing` in context.
#}
{% from "components/premium_badge.html" import premium_badge %}
{% set cover = listing.images[0] if listing.images else None %}
<div class="ct-listing">
  <a class="ct-listing-media" href="{{ url_for('marketplace.listing_detail', public_id=listing.public_id) }}"
     aria-label="{{ listing.title }}">
    {% if cover %}
      <img src="{{ url_for('marketplace.listing_image', filename=cover.image_path) }}"
           alt="{{ listing.title }}" loading="lazy" decoding="async">
    {% else %}
      <div class="ct-listing-ph"><i class="bi bi-image" aria-hidden="true"></i></div>
    {% endif %}
    <span class="ct-listing-badge">{{ listing.category.name }}</span>
  </a>
  <div class="ct-listing-body">
    <h2 class="ct-listing-title">{{ listing.title }}</h2>
    {# Seller name links to their public profile (trust-system navigation). #}
    <a class="ct-listing-seller" href="{{ url_for('auth.public_profile', public_id=listing.seller.public_id) }}">
      <i class="bi bi-person-circle" aria-hidden="true"></i>
      {{ listing.seller.profile.full_name if listing.seller.profile and listing.seller.profile.full_name else listing.seller.email.split('@')[0] }}
    </a>
    {% if show_premium_badge(listing.seller) %}
      <div class="mb-2">{{ premium_badge(listing.seller, 'Premium Seller', 'sm') }}</div>
    {% endif %}
    <div class="ct-listing-row">
      <span class="ct-listing-price">&#8377;{{ "{:,.2f}".format(listing.price) }}</span>
      <a class="ct-listing-link"
         href="{{ url_for('marketplace.listing_detail', public_id=listing.public_id) }}">View Listing</a>
    </div>
  </div>
</div>