@php
/**
 * WHAT IS LIVE RIGHT NOW, beside the chart that shows when the slots are booked.
 *
 * A running placement is an operational thing: it is out there, and either people are clicking it or
 * they are not. What it cost, when it was paid and for which period are a different question, asked
 * on the billing record — so none of that appears here. The owner reading this wants to know their
 * money is working, not to re-read the receipt.
 *
 * Ordered by clicks, so the placement earning its keep is the one at the top.
 *
 * @var array $active rows from CampaignController: label, headline, ctr, impressions, clicks, ends_at
 */
$active = $active ?? [];
@endphp
<div class="qm-active-ads">
    @php /* THE SAME HEAD EVERY CHART CARD USES — .qm-chart-card-head with a .qm-head-chip in the
             title — so this sits beside the occupancy timeline as a sibling rather than something
             styled on its own terms. No caption: the title says what it is, and the cards beside it
             carry theirs on the chart's own toolbar row, which a list has none of. */
@endphp
    <div class="qm-chart-card-head">
        <h2 class="qm-card-title-ico"><span class="qm-head-chip qm-head-chip--amber"><i class="fas fa-bullhorn" aria-hidden="true"></i></span>{{ t_raw('vendor.campaigns.active_title') }}</h2>
    </div>

    @if ($active)
    <ul class="qm-active-ads-list">
        @foreach ($active as $a)
        <li class="qm-active-ad">
            @php /* The creative itself, so the owner recognises which placement this is at a glance
                     rather than reading a slot name.
                     NOT EVERY PLACEMENT HOLDS A PICTURE. The video slots store an .mp4 in the same
                     column, and an <img> pointed at one renders as a broken image — which is exactly
                     what the feature-box row showed. Anything that is not a still falls back to the
                     same cover placeholder the rest of the product uses, as does an empty value. */
@endphp
            @php
                $shot = (string) ($a['image'] ?? '');
                $ext  = strtolower((string) pathinfo($shot, PATHINFO_EXTENSION));
                if (!in_array($ext, ['jpg', 'jpeg', 'png', 'webp', 'gif', 'avif'], true)) { $shot = ''; }
@endphp
            <img class="qm-active-ad-shot" src="{{ media($shot, 'assets/client/covers/shop-1.png') }}" alt="" loading="lazy" width="56" height="42">
            <div class="qm-active-ad-body">
            <div class="qm-active-ad-top">
                <span class="qm-active-ad-slot">{{ $a['label'] }}</span>
                @php /* The rate, or an honest blank. A placement with no impressions has no
                         click-through rate — printing 0% would read as "nobody clicked" when the
                         truth is that nothing has been served yet. */
@endphp
                @if ($a['ctr'] !== null)
                <span class="qm-active-ad-ctr">{{ number_format((float) $a['ctr'], 2) }}%</span>
                @else
                <span class="qm-active-ad-ctr is-muted">{{ t_raw('vendor.campaigns.active_no_data') }}</span>
                @endif
            </div>
            @if ($a['headline'] !== '')
            <p class="qm-active-ad-headline">{{ $a['headline'] }}</p>
            @endif
            @php /* The two numbers the rate is made of, so it can be trusted rather than taken. */
@endphp
            <p class="qm-active-ad-reach">
                {{ t_raw('vendor.campaigns.active_reach', [
                    ':views'  => number_format((float) $a['impressions']),
                    ':clicks' => number_format((float) $a['clicks']),
                ]) }}
            </p>
            </div>
        </li>
        @endforeach
    </ul>
    @else
    <div class="qm-active-ads-empty">
        <i class="fas fa-bullhorn" aria-hidden="true"></i>
        <p>{{ t_raw('vendor.campaigns.active_empty') }}</p>
    </div>
    @endif
</div>