{% extends "admin/_admin_base.html" %}
{% from "components/pagination.html" import render_pagination %}

{% block title %}Advertisements · Admin · CampusCart{% endblock %}

{% block admin_header %}
<header class="ad-hero">
  <div class="ad-hero-left">
    <span class="ad-hero-ico" aria-hidden="true"><i class="bi bi-megaphone-fill"></i></span>
    <div class="ad-hero-copy">
      <h1 class="ad-hero-title">Advertisements</h1>
      <p class="ad-hero-sub">Monitor campaign performance, rewarded advertisements, placements, and engagement across Student Bazaar.</p>
    </div>
  </div>
  <div class="ad-hero-actions">
    <div class="dropdown">
      <button class="btn btn-outline-primary ad-hero-btn dropdown-toggle" type="button"
              data-bs-toggle="dropdown" aria-expanded="false" data-export-menu>
        <i class="bi bi-download me-1"></i> Export Report
      </button>
      <ul class="dropdown-menu dropdown-menu-end shadow-sm">
        <li><button type="button" class="dropdown-item" data-export="csv"><i class="bi bi-filetype-csv me-2"></i>CSV</button></li>
        <li><button type="button" class="dropdown-item" data-export="excel"><i class="bi bi-file-earmark-spreadsheet me-2"></i>Excel</button></li>
        <li><button type="button" class="dropdown-item disabled" tabindex="-1" aria-disabled="true">
          <i class="bi bi-file-earmark-pdf me-2"></i>PDF <span class="ad-soon">Coming soon</span></button></li>
      </ul>
    </div>
    <a class="btn btn-primary ad-hero-btn" href="{{ url_for('admin.ad_create') }}">
      <i class="bi bi-plus-lg me-1"></i> New Advertisement
    </a>
  </div>
</header>
{% endblock admin_header %}

{% block admin_content %}
{% set has_filters = q or placement or ad_type or media_type or status or priority or date_from or date_to %}
{% set rewarded = (placement_summary | selectattr('value', 'equalto', 'chat') | list | first) %}
{% set has_data = overview and overview.total > 0 %}

<!-- KPI cards (always shown; placeholders keep the layout balanced with no data) -->
<div class="ad-kpis">
  {% set dash = '—' %}
  {% set kpis = [
    ('Total Campaigns', overview.total, 'bi-megaphone', 'blue'),
    ('Active Campaigns', overview.status_counts.active, 'bi-play-circle', 'green'),
    ('Total Impressions', ('{:,}'.format(overview.total_impressions) if has_data else dash), 'bi-eye', 'blue'),
    ('Total Clicks', ('{:,}'.format(overview.total_clicks) if has_data else dash), 'bi-hand-index-thumb', 'violet'),
    ('Average CTR', (('0%' if overview.average_ctr == 0 else '%.1f%%'|format(overview.average_ctr)) if has_data else dash), 'bi-graph-up-arrow', 'amber'),
    ('Rewarded Views', ('{:,}'.format(rewarded.impressions) if has_data and rewarded else dash), 'bi-gift', 'green'),
  ] %}
  {% for label, value, icon, tone in kpis %}
    <div class="ad-kpi ad-kpi--{{ tone }}">
      <span class="ad-kpi-ico"><i class="bi {{ icon }}"></i></span>
      <div class="ad-kpi-body">
        <div class="ad-kpi-value">{{ value }}</div>
        <div class="ad-kpi-label">{{ label }}</div>
        <div class="ad-kpi-trend"><i class="bi bi-dash" aria-hidden="true"></i> No prior period</div>
      </div>
    </div>
  {% endfor %}
</div>

<!-- Storage summary (Phase 4) — cached, no per-load filesystem scan -->
{% if storage %}
<div class="row g-3 mb-4">
  {% set scards = [
    ('Total storage', storage.total_human, 'bi-hdd-stack', 'primary'),
    ('Advertisements', storage.ad_count, 'bi-collection', 'info'),
    ('Average media', storage.average_human, 'bi-bar-chart', 'success'),
    ('Largest video', storage.largest_video_human, 'bi-film', 'warning'),
    ('Unused files', storage.unused_files, 'bi-trash3', 'secondary'),
  ] %}
  {% for label, value, icon, color in scards %}
    <div class="col-6 col-md-4 col-xl">
      <div class="card admin-metric-card h-100 border-0 shadow-sm">
        <div class="card-body">
          <span class="admin-metric-icon text-bg-{{ color }}-subtle text-{{ color }}"><i class="bi {{ icon }}"></i></span>
          <div class="admin-metric-value">{{ value }}</div>
          <div class="admin-metric-label">{{ label }}</div>
        </div>
      </div>
    </div>
  {% endfor %}
</div>
{% endif %}

<!-- Performance charts -->
<div class="ad-charts">
  {% if has_data %}
  <div class="admin-card ad-chart-card ad-chart-card--wide">
    <div class="ad-chart-head">
      <div><h3>Impressions vs Clicks</h3><span>Top campaigns by reach</span></div>
      <select class="ad-period" aria-label="Period (display only)">
        <option>Last 7 days</option><option selected>Last 30 days</option><option>Last 90 days</option>
      </select>
    </div>
    <div class="chart-container ad-chart-box">
      <canvas id="chartTopAds" role="img"
              aria-label="Bar chart comparing impressions and clicks for the top campaigns by reach."></canvas>
    </div>
    <p class="visually-hidden">Across all advertisements there are {{ '{:,}'.format(overview.total_impressions) }} impressions and {{ '{:,}'.format(overview.total_clicks) }} clicks.</p>
  </div>
  <div class="admin-card ad-chart-card">
    <div class="ad-chart-head">
      <div><h3>Placement mix</h3><span>Campaigns by placement</span></div>
    </div>
    <div class="chart-container ad-chart-box">
      <canvas id="chartPlacement" role="img" aria-label="Doughnut chart of campaign counts by placement."></canvas>
    </div>
    <p class="visually-hidden">Campaigns by placement: {% for p in placement_summary %}{{ p.label }} {{ p.count }}{{ ', ' if not loop.last }}{% endfor %}.</p>
  </div>
  <div class="admin-card ad-chart-card ad-chart-card--wide">
    <div class="ad-chart-head">
      <div><h3>New campaigns</h3><span>Advertisements created over time</span></div>
      <select class="ad-period" aria-label="Period (display only)">
        <option>Last 7 days</option><option selected>Last 30 days</option><option>Last 90 days</option>
      </select>
    </div>
    <div class="chart-container ad-chart-box ad-chart-box--short">
      <canvas id="chartCreated" role="img" aria-label="Line chart of new advertisements created over the last 30 days."></canvas>
    </div>
  </div>
  {% else %}
  {% for title, desc in [('Impressions vs Clicks', 'Top campaigns by reach'), ('Placement mix', 'Campaigns by placement'), ('New campaigns', 'Advertisements created over time')] %}
    <div class="admin-card ad-chart-card{{ ' ad-chart-card--wide' if not loop.index == 2 }}">
      <div class="ad-chart-head"><div><h3>{{ title }}</h3><span>{{ desc }}</span></div></div>
      <div class="ad-chart-empty"><i class="bi bi-bar-chart-line"></i><p>No data yet</p></div>
    </div>
  {% endfor %}
  {% endif %}
</div>

<!-- Placement summary -->
<div class="ad-placements">
  {% for p in placement_summary %}
    <div class="ad-place ad-place--{{ p.value }}">
      <div class="ad-place-head">
        <span class="ad-place-ico">
          {% if p.value == 'chat' %}<i class="bi bi-gift-fill"></i>
          {% elif p.value == 'landing' %}<i class="bi bi-house-door-fill"></i>
          {% elif p.value == 'marketplace' %}<i class="bi bi-grid-1x2-fill"></i>
          {% elif p.value == 'sidebar' %}<i class="bi bi-layout-sidebar-inset"></i>
          {% else %}<i class="bi bi-chat-square-dots-fill"></i>{% endif %}
        </span>
        <span class="ad-place-name">{{ p.label }}</span>
        <span class="ad-place-count">{{ p.count }}</span>
      </div>
      <div class="ad-place-stats">
        <div><strong>{{ '{:,}'.format(p.impressions) }}</strong><span>Impressions</span></div>
        <div><strong>{{ '{:,}'.format(p.clicks) }}</strong><span>Clicks</span></div>
        <div><strong>{{ '0%' if p.ctr == 0 else '%.1f%%'|format(p.ctr) }}</strong><span>CTR</span></div>
      </div>
    </div>
  {% endfor %}
</div>

<!-- Filters -->
<div class="card admin-card admin-filter-card mb-4">
  <div class="card-body">
    <form method="get" role="search" class="ad-filter-form">
      <div class="ad-filter-field ad-filter-field--search">
        <label class="form-label" for="f-q">Search</label>
        <div class="ad-search-field">
          <i class="bi bi-search" aria-hidden="true"></i>
          <input id="f-q" class="form-control" type="search" name="q" value="{{ q }}"
                 placeholder="Search advertisements…">
        </div>
      </div>

      <div class="ad-filter-grid">
        <div class="ad-filter-field">
          <label class="form-label" for="f-placement">Placement</label>
          <select id="f-placement" class="form-select" name="placement">
            <option value="">All placements</option>
            {% for value, label in placement_options %}
              <option value="{{ value }}" {{ 'selected' if placement == value }}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="ad-filter-field">
          <label class="form-label" for="f-type">Type</label>
          <select id="f-type" class="form-select" name="type">
            <option value="">All types</option>
            {% for value, label in type_options %}
              <option value="{{ value }}" {{ 'selected' if ad_type == value }}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="ad-filter-field">
          <label class="form-label" for="f-media">Media</label>
          <select id="f-media" class="form-select" name="media_type">
            <option value="">All media</option>
            {% for value, label in media_type_options %}
              <option value="{{ value }}" {{ 'selected' if media_type == value }}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="ad-filter-field">
          <label class="form-label" for="f-status">Status</label>
          <select id="f-status" class="form-select" name="status">
            <option value="">All statuses</option>
            {% for value, label in status_options %}
              <option value="{{ value }}" {{ 'selected' if status == value }}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="ad-filter-field">
          <label class="form-label" for="f-priority">Display Weight</label>
          <input id="f-priority" class="form-control" type="number" min="0" max="1000" name="priority"
                 value="{{ priority }}" placeholder="Any">
        </div>
      </div>

      <div class="ad-filter-grid ad-filter-grid--trio">
        <div class="ad-filter-field">
          <label class="form-label" for="f-from">Created from</label>
          <input id="f-from" class="form-control" type="date" name="date_from" value="{{ date_from }}">
        </div>
        <div class="ad-filter-field">
          <label class="form-label" for="f-to">Created to</label>
          <input id="f-to" class="form-control" type="date" name="date_to" value="{{ date_to }}">
        </div>
        <div class="ad-filter-field">
          <label class="form-label" for="f-sort">Sort</label>
          <select id="f-sort" class="form-select" name="sort">
            {% for value, label in sort_options %}
              <option value="{{ value }}" {{ 'selected' if sort == value }}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>

      <div class="ad-filter-actions">
        <a class="btn btn-outline-secondary" href="{{ url_for('admin.ad_list') }}">Clear</a>
        <button class="btn btn-primary" type="submit"><i class="bi bi-funnel me-1"></i> Apply filters</button>
      </div>
    </form>
  </div>
</div>

{% if rows %}
{# Hidden carrier form: the row checkboxes and every bulk control associate with
   it via form="bulkForm", so the visible sticky bar can live outside the form and
   share a tall containing block with the table (needed for sticky to hold while
   the table scrolls). #}
{# NB: no data-bulk-form here — that hook belongs to the listings page's global
   initBulkSelect() (which would blindly preventDefault this form's submit). This
   page manages its own bulk UX below, targeting the form by id. #}
<form id="bulkForm" method="post" action="{{ url_for('admin.ad_bulk') }}" hidden>
  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
</form>

<div class="ad-bulk-region">
  <!-- Sticky bulk action bar: only revealed once a row is selected -->
  <div class="ad-bulkbar card admin-card d-none" data-bulk-bar role="region" aria-label="Bulk actions">
    <div class="ad-bulkbar-inner">
      <span class="ad-bulkbar-count">
        <i class="bi bi-check-square-fill" aria-hidden="true"></i>
        <span data-selected-count>0</span> <span data-selected-noun>advertisements</span> selected
      </span>
      <div class="ad-bulkbar-controls">
        <select class="form-select" name="action" form="bulkForm" data-bulk-action aria-label="Bulk action">
          <option value="">Bulk action…</option>
          <option value="placement">Change placement</option>
          <option value="priority">Change Display Weight</option>
          <option value="enable">Activate</option>
          <option value="disable">Deactivate</option>
          <option value="duplicate">Duplicate</option>
          <option value="delete">Delete</option>
        </select>
        <select class="form-select d-none" name="bulk_placement" form="bulkForm" data-bulk-placement aria-label="New placement">
          <option value="">Select placement…</option>
          {% for value, label in placement_options %}
            <option value="{{ value }}">{{ label }}</option>
          {% endfor %}
        </select>
        <input class="form-control d-none" type="number" min="0" max="1000" name="bulk_priority" form="bulkForm"
               placeholder="Weight" data-bulk-priority aria-label="New display weight">
        <button class="btn btn-primary" type="submit" form="bulkForm" data-bulk-apply disabled>Apply</button>
      </div>
      <button type="button" class="ad-bulkbar-clear" data-bulk-clear>
        <i class="bi bi-x-lg" aria-hidden="true"></i> Clear selection
      </button>
    </div>
  </div>

  <div class="card admin-card">
    <div class="table-responsive">
      <table class="table admin-table align-middle mb-0">
      <thead>
        <tr>
          <th style="width:2.5rem;"><input class="form-check-input" type="checkbox" data-select-all aria-label="Select all"></th>
          <th>Preview</th>
          <th>Title</th>
          <th>Type</th>
          <th>Placement</th>
          <th class="text-center">
            <span title="Higher weight increases the probability of selection. Advertisements are still selected randomly.">
              Weight <i class="bi bi-info-circle text-muted" aria-hidden="true"></i>
            </span>
          </th>
          <th>Status</th>
          <th>Start</th>
          <th>End</th>
          <th class="text-end">Impr.</th>
          <th class="text-end">Clicks</th>
          <th class="text-end">CTR</th>
          <th class="text-center">Active</th>
          <th class="text-end">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for row in rows %}
          {% set ad = row.ad %}
          {% set pr = ad.priority %}
          {% set ctr_txt = '0%' if row.ctr == 0 else '%.1f%%'|format(row.ctr) %}
          <tr data-ad-row
              data-title="{{ ad.title }}"
              data-desc="{{ ad.description or '' }}"
              data-placement="{{ ad.placement.display_name }}"
              data-placement-key="{{ ad.placement.value }}"
              data-priority="{{ pr }}"
              data-status="{{ row.status }}"
              data-created="{{ ad.created_at.strftime('%d %b %Y') if ad.created_at else '—' }}"
              data-start="{{ ad.start_at.strftime('%d %b %Y') if ad.start_at else '—' }}"
              data-end="{{ ad.end_at.strftime('%d %b %Y') if ad.end_at else '—' }}"
              data-url="{{ ad.redirect_url or '' }}"
              data-impressions="{{ '{:,}'.format(ad.impression_count) }}"
              data-clicks="{{ '{:,}'.format(ad.click_count) }}"
              data-ctr="{{ ctr_txt }}"
              data-image="{{ ad.image_path or '' }}"
              data-icon="{{ ad.icon or 'bi-stars' }}"
              data-media-type="{{ ad.media_type.value }}"
              data-video="{{ ad.media_url if ad.is_video else '' }}"
              data-duration="{{ ad.resolved_video_duration if ad.is_video else '' }}"
              data-edit="{{ url_for('admin.ad_edit', public_id=ad.public_id) }}"
              data-preview="{{ url_for('admin.ad_preview', public_id=ad.public_id) }}"
              data-stats="{{ url_for('admin.ad_stats', public_id=ad.public_id) }}"
              data-del="{{ url_for('admin.ad_delete', public_id=ad.public_id) }}">
            <td><input class="form-check-input" type="checkbox" name="ad_ids" value="{{ ad.id }}"
                       form="bulkForm" data-row-check aria-label="Select {{ ad.title }}"></td>
            <td>
              {# Media preview — image opens enlarged, video opens the player; icon-only ads are static. #}
              <button type="button" class="admin-thumb admin-thumb--lg ad-thumb-btn{{ ' ad-thumb-btn--video' if ad.is_video }}"
                    data-thumb-preview
                    {% if ad.is_video %}
                      {% if ad.image_path %}data-thumb-src="{{ ad.image_path }}"{% else %}data-thumb-icon="bi-camera-video-fill"{% endif %}
                      data-media-open data-media-type="video" data-media-src="{{ ad.media_url }}"
                      {% if ad.image_path %}data-media-poster="{{ ad.image_path }}"{% endif %} data-media-title="{{ ad.title }}"
                    {% elif ad.image_path %}
                      data-thumb-src="{{ ad.image_path }}"
                      data-media-open data-media-type="image" data-media-src="{{ ad.image_path }}" data-media-title="{{ ad.title }}"
                    {% else %}
                      data-thumb-icon="{{ ad.icon or 'bi-stars' }}" disabled
                    {% endif %}
                    aria-label="Preview {{ ad.title }}">
                {% if ad.is_video %}
                  {% if ad.image_path %}<img src="{{ ad.image_path }}" alt="" loading="lazy">{% else %}<i class="bi bi-camera-video-fill"></i>{% endif %}
                  <span class="ad-thumb-play" aria-hidden="true"><i class="bi bi-play-fill"></i></span>
                  <span class="ad-thumb-dur">{{ ad.resolved_video_duration }}s</span>
                {% elif ad.image_path %}
                  <img src="{{ ad.image_path }}" alt="" loading="lazy">
                {% else %}
                  <i class="bi {{ ad.icon or 'bi-stars' }}"></i>
                {% endif %}
              </button>
            </td>
            <td class="admin-title-cell">
              <button type="button" class="ad-title-name" data-drawer-trigger>{{ ad.title }}</button>
              {% if ad.redirect_url %}<div class="ad-title-url">{{ ad.redirect_url }}</div>{% endif %}
              <div class="ad-title-metrics">
                <span title="Impressions"><i class="bi bi-eye" aria-hidden="true"></i> {{ '{:,}'.format(ad.impression_count) }}</span>
                <span title="Clicks"><i class="bi bi-hand-index" aria-hidden="true"></i> {{ '{:,}'.format(ad.click_count) }}</span>
                <span title="Click-through rate">CTR {{ ctr_txt }}</span>
                {% if ad.placement.value == 'chat' and row.rewarded and row.rewarded.has_activity %}
                  <span class="ad-rw-chip" title="Completion rate"><i class="bi bi-check2-circle" aria-hidden="true"></i> {{ '%.0f%%'|format(row.rewarded.completion_rate) }}</span>
                  <span class="ad-rw-chip" title="Rewards granted"><i class="bi bi-gift" aria-hidden="true"></i> {{ row.rewarded.rewards_granted }}</span>
                  {% if row.rewarded.rejections %}<span class="ad-rw-chip ad-rw-chip--warn" title="Rejected claims"><i class="bi bi-shield-exclamation" aria-hidden="true"></i> {{ row.rewarded.rejections }}</span>{% endif %}
                {% endif %}
              </div>
            </td>
            <td>
              <span class="ad-tag ad-tag--{{ ad.advertisement_type.value }}">{{ ad.advertisement_type.value|title }}</span>
              <span class="ad-media-badge ad-media-badge--{{ ad.media_type.value }}" title="{{ 'Video' if ad.is_video else 'Image' }} advertisement">
                <i class="bi {{ 'bi-camera-video' if ad.is_video else 'bi-image' }}" aria-hidden="true"></i> {{ 'Video' if ad.is_video else 'Image' }}
              </span>
            </td>
            <td>
              <span class="ad-tag ad-tag--{{ ad.placement.value }}">
                {% if ad.placement.value == 'chat' %}<i class="bi bi-gift-fill me-1" aria-hidden="true"></i>{% endif %}{{ ad.placement.display_name }}
              </span>
            </td>
            <td class="text-center">
              <span class="ad-prio ad-prio--{{ 'high' if pr >= 8 else ('med' if pr >= 4 else 'low') }}">
                {{ 'High' if pr >= 8 else ('Medium' if pr >= 4 else 'Low') }} · {{ pr }}
              </span>
            </td>
            <td>{% with status = row.status %}{% include "admin/advertisements/_status_badge.html" %}{% endwith %}</td>
            <td class="small text-muted">{{ ad.start_at.strftime('%d %b %Y') if ad.start_at else '—' }}</td>
            <td class="small text-muted">{{ ad.end_at.strftime('%d %b %Y') if ad.end_at else '—' }}</td>
            <td class="text-end">{{ '{:,}'.format(ad.impression_count) }}</td>
            <td class="text-end">{{ '{:,}'.format(ad.click_count) }}</td>
            <td>
              <div class="ad-ctr">
                <div class="ad-ctr-bar"><span style="width: {{ [row.ctr, 100]|min }}%;"></span></div>
                <span class="ad-ctr-val">{{ ctr_txt }}</span>
              </div>
            </td>
            <td class="text-center">
              {% if ad.is_active %}
                <span class="ad-tag ad-tag--on">On</span>
              {% else %}
                <span class="ad-tag ad-tag--off">Off</span>
              {% endif %}
            </td>
            <td class="text-end">
              <div class="dropdown">
                <button class="ad-action-btn" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Actions">
                  <i class="bi bi-three-dots"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm">
                  <li><a class="dropdown-item" href="{{ url_for('admin.ad_preview', public_id=ad.public_id) }}"><i class="bi bi-eye me-2"></i>View</a></li>
                  <li><a class="dropdown-item" href="{{ url_for('admin.ad_stats', public_id=ad.public_id) }}"><i class="bi bi-graph-up me-2"></i>Analytics</a></li>
                  <li><a class="dropdown-item" href="{{ url_for('admin.ad_edit', public_id=ad.public_id) }}"><i class="bi bi-pencil me-2"></i>Edit</a></li>
                  <li>
                    <form method="post" action="{{ url_for('admin.ad_duplicate', public_id=ad.public_id) }}" class="m-0">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                      <button type="submit" class="dropdown-item"><i class="bi bi-files me-2"></i>Duplicate</button>
                    </form>
                  </li>
                  <li>
                    {% if ad.is_active %}
                      <form method="post" action="{{ url_for('admin.ad_disable', public_id=ad.public_id) }}" class="m-0">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="dropdown-item"><i class="bi bi-pause-circle me-2"></i>Disable</button>
                      </form>
                    {% else %}
                      <form method="post" action="{{ url_for('admin.ad_enable', public_id=ad.public_id) }}" class="m-0">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                        <button type="submit" class="dropdown-item"><i class="bi bi-play-circle me-2"></i>Enable</button>
                      </form>
                    {% endif %}
                  </li>
                  <li><hr class="dropdown-divider"></li>
                  <li>
                    <button type="button" class="dropdown-item text-danger" data-bs-toggle="modal" data-bs-target="#deleteAdModal"
                            data-del-url="{{ url_for('admin.ad_delete', public_id=ad.public_id) }}" data-del-title="{{ ad.title }}">
                      <i class="bi bi-trash me-2"></i>Delete
                    </button>
                  </li>
                </ul>
              </div>
            </td>
          </tr>
        {% endfor %}
      </tbody>
      </table>
    </div>
  </div>
</div>

<div class="mt-4">
  {{ render_pagination(pagination, 'admin.ad_list', filter_args) }}
</div>

<!-- Delete confirmation modal (shared; action set per row via JS) -->
<div class="modal fade" id="deleteAdModal" tabindex="-1" aria-hidden="true" aria-labelledby="deleteAdLabel">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <form method="post" id="deleteAdForm">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="modal-header">
          <h2 class="modal-title h5" id="deleteAdLabel">Delete this advertisement?</h2>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <p class="mb-0">You are about to delete <strong id="deleteAdTitle">this advertisement</strong>.
            This action cannot be undone.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-danger"><i class="bi bi-trash me-1"></i> Delete</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Media preview modal (Phase 1/6) — image enlarge / video player. Admin-only:
     a plain <video src>, never the rewarded endpoints, so it records NO analytics. -->
<div class="modal fade" id="mediaPreviewModal" tabindex="-1" aria-hidden="true" aria-labelledby="mediaPreviewLabel">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content ad-media-modal">
      <div class="modal-header">
        <h2 class="modal-title h6" id="mediaPreviewLabel" data-media-title>Media preview</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body p-0">
        <div class="ad-media-frame">
          <img class="ad-media-img d-none" data-media-img alt="" decoding="async">
          <video class="ad-media-video d-none" data-media-video controls playsinline muted preload="metadata"></video>
        </div>
      </div>
      <div class="modal-footer">
        <span class="small text-muted me-auto"><i class="bi bi-info-circle me-1" aria-hidden="true"></i>Admin preview only — not counted as an advertisement impression.</span>
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Campaign details drawer (populated from the clicked row; no navigation) -->
<div class="ad-drawer" data-ad-drawer aria-hidden="true">
  <div class="ad-drawer-scrim" data-drawer-close></div>
  <aside class="ad-drawer-panel" role="dialog" aria-modal="true" aria-labelledby="adDrawerTitle" tabindex="-1">
    <header class="ad-drawer-head">
      <span class="ad-drawer-eyebrow">Campaign details</span>
      <button type="button" class="ad-drawer-x" data-drawer-close aria-label="Close details"><i class="bi bi-x-lg"></i></button>
    </header>
    <div class="ad-drawer-banner" data-drawer-banner></div>
    <div class="ad-drawer-body">
      <h2 class="ad-drawer-title" id="adDrawerTitle" data-drawer="title"></h2>
      <p class="ad-drawer-desc" data-drawer="desc"></p>
      <div class="ad-drawer-badges" data-drawer="badges"></div>

      <div class="ad-drawer-metrics">
        <div class="ad-drawer-metric"><span data-drawer="impressions">0</span><small>Impressions</small></div>
        <div class="ad-drawer-metric"><span data-drawer="clicks">0</span><small>Clicks</small></div>
        <div class="ad-drawer-metric"><span data-drawer="ctr">0%</span><small>CTR</small></div>
      </div>

      <dl class="ad-drawer-meta">
        <div><dt>Placement</dt><dd data-drawer="placement">—</dd></div>
        <div><dt>Display Weight</dt><dd data-drawer="priority">—</dd></div>
        <div><dt>Status</dt><dd data-drawer="status">—</dd></div>
        <div><dt>Schedule</dt><dd data-drawer="schedule">—</dd></div>
        <div class="ad-drawer-meta-full"><dt>Landing URL</dt><dd><a data-drawer="url" target="_blank" rel="noopener">—</a></dd></div>
      </dl>

      <div class="ad-drawer-timeline">
        <h3 class="ad-drawer-subhead">Lifecycle</h3>
        <ol class="ad-timeline" data-drawer="timeline">
          <li data-stage="created"><span class="ad-timeline-dot"></span><div><strong>Created</strong><small data-tl="created">—</small></div></li>
          <li data-stage="scheduled"><span class="ad-timeline-dot"></span><div><strong>Scheduled</strong><small data-tl="start">—</small></div></li>
          <li data-stage="running"><span class="ad-timeline-dot"></span><div><strong>Running</strong><small data-tl="statusnote">—</small></div></li>
          <li data-stage="expired"><span class="ad-timeline-dot"></span><div><strong>Expires</strong><small data-tl="end">—</small></div></li>
        </ol>
      </div>
    </div>
    <footer class="ad-drawer-actions">
      <a class="btn btn-primary" data-drawer="edit"><i class="bi bi-pencil me-1"></i> Edit</a>
      <a class="btn btn-outline-secondary" data-drawer="preview"><i class="bi bi-eye me-1"></i> View</a>
      <button type="button" class="btn btn-outline-danger" data-drawer="delete"
              data-bs-toggle="modal" data-bs-target="#deleteAdModal"><i class="bi bi-trash me-1"></i> Delete</button>
    </footer>
  </aside>
</div>

{% else %}
<!-- Empty state — context-aware to what the admin was looking for -->
{% if not has_filters %}
  {% set es_icon, es_title, es_body = 'bi-megaphone', 'No advertisements yet', 'No advertisements have been created. Create your first promotion to start reaching students across CampusCart.' %}
{% elif q %}
  {% set es_icon, es_title, es_body = 'bi-search', 'No advertisements match your search', 'No advertisements match “' ~ q ~ '”. Try a different term or clear the search.' %}
{% elif media_type == 'video' %}
  {% set es_icon, es_title, es_body = 'bi-camera-video', 'No video advertisements found', 'No video advertisements match your current filters.' %}
{% elif media_type == 'image' %}
  {% set es_icon, es_title, es_body = 'bi-image', 'No image advertisements found', 'No image advertisements match your current filters.' %}
{% elif placement == 'chat' or ad_type == 'rewarded' %}
  {% set es_icon, es_title, es_body = 'bi-gift', 'No rewarded advertisements match your current filters', 'Adjust the filters, or create a rewarded advertisement to appear in the chat watch-to-unlock flow.' %}
{% else %}
  {% set es_icon, es_title, es_body = 'bi-funnel', 'No advertisements match your filters', 'Try clearing some filters to see more results.' %}
{% endif %}
<div class="card admin-card ad-empty" role="status" data-ad-empty>
  <div class="empty-state-icon" aria-hidden="true"><i class="bi {{ es_icon }}"></i></div>
  <h2 class="h4 fw-bold mb-2">{{ es_title }}</h2>
  <p class="text-muted mb-4">{{ es_body }}</p>
  {% if has_filters %}
    <a class="btn btn-outline-primary btn-lg" href="{{ url_for('admin.ad_list') }}"><i class="bi bi-x-circle me-2" aria-hidden="true"></i>Clear filters</a>
  {% else %}
    <a class="btn btn-primary btn-lg" href="{{ url_for('admin.ad_create') }}"><i class="bi bi-plus-lg me-2" aria-hidden="true"></i>Create advertisement</a>
  {% endif %}
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
  // ---- Media preview modal (image enlarge / video player) -----------------
  // Reuses the Bootstrap modal pattern. The <video> uses a plain src and never
  // touches the rewarded endpoints, so opening a preview records NO analytics.
  (function () {
    var modalEl = document.getElementById('mediaPreviewModal');
    if (!modalEl || !window.bootstrap) return;
    var modal = window.bootstrap.Modal.getOrCreateInstance(modalEl);
    var img = modalEl.querySelector('[data-media-img]');
    var video = modalEl.querySelector('[data-media-video]');
    var titleEl = modalEl.querySelector('[data-media-title]');

    function open(trigger) {
      var type = trigger.getAttribute('data-media-type');
      var src = trigger.getAttribute('data-media-src');
      if (!src) return;
      if (titleEl) titleEl.textContent = trigger.getAttribute('data-media-title') || 'Media preview';
      img.classList.add('d-none');
      video.classList.add('d-none');
      try { video.pause(); } catch (e) {}
      if (type === 'video') {
        var poster = trigger.getAttribute('data-media-poster');
        if (poster) video.setAttribute('poster', poster); else video.removeAttribute('poster');
        video.src = src;
        video.classList.remove('d-none');
        video.muted = true;                 // controls are allowed inside the preview
        var p = video.play();
        if (p && p.catch) p.catch(function () {});
      } else {
        img.src = src;
        img.classList.remove('d-none');
      }
      modal.show();
    }

    document.querySelectorAll('[data-media-open]').forEach(function (t) {
      t.addEventListener('click', function () { open(t); });
    });
    // Stop and release the video when the modal closes.
    modalEl.addEventListener('hidden.bs.modal', function () {
      try { video.pause(); } catch (e) {}
      video.removeAttribute('src'); video.removeAttribute('poster');
      try { video.load(); } catch (e) {}
      img.removeAttribute('src');
    });
  })();

  (function () {
    var selectAll = document.querySelector('[data-select-all]');
    var rowChecks = Array.prototype.slice.call(document.querySelectorAll('[data-row-check]'));
    var rows = Array.prototype.slice.call(document.querySelectorAll('[data-ad-row]'));
    var bar = document.querySelector('[data-bulk-bar]');
    var countEl = document.querySelector('[data-selected-count]');
    var nounEl = document.querySelector('[data-selected-noun]');
    var applyBtn = document.querySelector('[data-bulk-apply]');
    var actionSel = document.querySelector('[data-bulk-action]');
    var priorityIn = document.querySelector('[data-bulk-priority]');
    var placementIn = document.querySelector('[data-bulk-placement]');
    var clearBtn = document.querySelector('[data-bulk-clear]');
    if (!actionSel) return;

    function selectedCount() {
      return rowChecks.filter(function (c) { return c.checked; }).length;
    }

    // Show only the secondary input the chosen action needs.
    function syncActionInputs() {
      var a = actionSel.value;
      placementIn.classList.toggle('d-none', a !== 'placement');
      priorityIn.classList.toggle('d-none', a !== 'priority');
      // Recolour / relabel Apply for the destructive action.
      if (a === 'delete') {
        applyBtn.textContent = 'Delete';
        applyBtn.classList.remove('btn-primary');
        applyBtn.classList.add('btn-danger');
      } else {
        applyBtn.textContent = 'Apply';
        applyBtn.classList.remove('btn-danger');
        applyBtn.classList.add('btn-primary');
      }
    }

    // Apply is valid only with a selection, an action, and any required input.
    function isValid() {
      if (selectedCount() === 0 || !actionSel.value) return false;
      if (actionSel.value === 'placement') return !!placementIn.value;
      if (actionSel.value === 'priority') {
        var p = parseInt(priorityIn.value, 10);
        return !isNaN(p) && p >= 0 && p <= 1000;
      }
      return true;
    }

    function refresh() {
      var n = selectedCount();
      if (countEl) countEl.textContent = n;
      if (nounEl) nounEl.textContent = n === 1 ? 'advertisement' : 'advertisements';
      if (selectAll) selectAll.checked = n > 0 && n === rowChecks.length;
      rows.forEach(function (tr) {
        var cb = tr.querySelector('[data-row-check]');
        tr.classList.toggle('is-selected', !!(cb && cb.checked));
      });
      if (bar) bar.classList.toggle('d-none', n === 0);
      if (applyBtn) applyBtn.disabled = !isValid();
    }

    if (selectAll) {
      selectAll.addEventListener('change', function () {
        rowChecks.forEach(function (c) { c.checked = selectAll.checked; });
        refresh();
      });
    }
    rowChecks.forEach(function (c) { c.addEventListener('change', refresh); });
    actionSel.addEventListener('change', function () { syncActionInputs(); refresh(); });
    placementIn.addEventListener('change', refresh);
    priorityIn.addEventListener('input', refresh);

    // Clear selection: uncheck everything, reset the action, hide the bar.
    if (clearBtn) {
      clearBtn.addEventListener('click', function () {
        rowChecks.forEach(function (c) { c.checked = false; });
        if (selectAll) selectAll.checked = false;
        actionSel.value = '';
        priorityIn.value = '';
        placementIn.value = '';
        syncActionInputs();
        refresh();
      });
    }

    // Confirm the destructive bulk delete before submitting.
    var bulkForm = document.getElementById('bulkForm');
    if (bulkForm) {
      bulkForm.addEventListener('submit', function (e) {
        if (!isValid()) { e.preventDefault(); return; }
        if (actionSel.value === 'delete' &&
            !window.confirm('Delete the selected advertisements? This cannot be undone.')) {
          e.preventDefault();
        }
      });
    }

    // Delete modal (single-row): inject the row's delete URL + title.
    var delModal = document.getElementById('deleteAdModal');
    if (delModal) {
      delModal.addEventListener('show.bs.modal', function (event) {
        var btn = event.relatedTarget;
        document.getElementById('deleteAdForm').action = btn.getAttribute('data-del-url');
        document.getElementById('deleteAdTitle').textContent = btn.getAttribute('data-del-title');
      });
    }

    syncActionInputs();
    refresh();
  })();

  // ---- Campaign details drawer (populated from the clicked row) -----------
  (function () {
    var drawer = document.querySelector('[data-ad-drawer]');
    if (!drawer) return;
    var field = function (name) { return drawer.querySelector('[data-drawer="' + name + '"]'); };
    var panel = drawer.querySelector('.ad-drawer-panel');
    var delBtn = field('delete');

    function set(name, text) { var el = field(name); if (el) el.textContent = text; }

    function chip(label, cls) { return '<span class="ad-tag ' + cls + '">' + label + '</span>'; }

    function open(tr) {
      if (!tr) return;
      var d = tr.dataset;
      set('title', d.title);
      var desc = field('desc');
      if (desc) { desc.textContent = d.desc || 'No description provided.'; desc.classList.toggle('is-muted', !d.desc); }
      set('impressions', d.impressions);
      set('clicks', d.clicks);
      set('ctr', d.ctr);
      set('placement', d.placement);
      set('priority', d.priority);
      set('status', d.status ? d.status.charAt(0).toUpperCase() + d.status.slice(1) : '—');
      set('schedule', d.start + '  →  ' + d.end);

      var url = field('url');
      if (url) {
        if (d.url) { url.textContent = d.url; url.setAttribute('href', d.url); url.classList.remove('is-muted'); }
        else { url.textContent = 'Not set'; url.removeAttribute('href'); url.classList.add('is-muted'); }
      }

      var badges = field('badges');
      if (badges) {
        var giftIco = d.placementKey === 'chat' ? '<i class="bi bi-gift-fill me-1"></i>' : '';
        badges.innerHTML =
          chip(giftIco + d.placement, 'ad-tag--' + d.placementKey) +
          '<span class="ad-status-badge ad-status-' + d.status + '">' + (d.status || '').toUpperCase() + '</span>';
      }

      var banner = field('banner');
      if (banner) {
        banner.innerHTML = d.image
          ? '<img src="' + d.image + '" alt="">'
          : '<span class="ad-drawer-banner-ico"><i class="bi ' + (d.icon || 'bi-stars') + '"></i></span>';
      }

      // Lifecycle timeline: highlight the stage matching the derived status.
      var tl = field('timeline');
      if (tl) {
        var order = ['created', 'scheduled', 'running', 'expired'];
        var stageByStatus = { active: 'running', scheduled: 'scheduled', expired: 'expired', disabled: 'created' };
        var curIdx = order.indexOf(stageByStatus[d.status] || 'created');
        tl.querySelectorAll('li').forEach(function (li, i) {
          li.classList.remove('is-done', 'is-current');
          if (i < curIdx) li.classList.add('is-done');
          else if (i === curIdx) li.classList.add('is-current');
        });
        var setTl = function (k, v) { var e = tl.querySelector('[data-tl="' + k + '"]'); if (e) e.textContent = v; };
        setTl('created', d.created || '—');
        setTl('start', d.start || '—');
        setTl('end', d.end || '—');
        setTl('statusnote', d.status === 'active' ? 'Active now' : (d.status ? d.status.charAt(0).toUpperCase() + d.status.slice(1) : '—'));
      }

      var edit = field('edit'); if (edit) edit.setAttribute('href', d.edit);
      var preview = field('preview'); if (preview) { preview.setAttribute('href', d.preview); preview.setAttribute('target', '_blank'); }
      if (delBtn) { delBtn.setAttribute('data-del-url', d.del); delBtn.setAttribute('data-del-title', d.title); }

      lastFocus = document.activeElement;   // restore on close
      drawer.classList.add('is-open');
      drawer.setAttribute('aria-hidden', 'false');
      document.body.classList.add('ad-drawer-lock');
      document.addEventListener('keydown', onKeydown);
      if (panel) panel.focus();
    }

    function close() {
      if (!drawer.classList.contains('is-open')) return;
      drawer.classList.remove('is-open');
      drawer.setAttribute('aria-hidden', 'true');
      document.body.classList.remove('ad-drawer-lock');
      document.removeEventListener('keydown', onKeydown);
      if (lastFocus && typeof lastFocus.focus === 'function') lastFocus.focus();
    }

    // Focus trap: keep Tab within the panel; Escape closes.
    function onKeydown(e) {
      if (e.key === 'Escape') { close(); return; }
      if (e.key !== 'Tab' || !panel) return;
      var f = Array.prototype.filter.call(
        panel.querySelectorAll('a[href],button:not([disabled]),input,select,textarea,[tabindex]:not([tabindex="-1"])'),
        function (el) { return el.offsetParent !== null; });
      if (!f.length) return;
      var first = f[0], last = f[f.length - 1];
      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); }
      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); }
    }

    var lastFocus = null;
    document.querySelectorAll('[data-drawer-trigger]').forEach(function (t) {
      t.addEventListener('click', function () { open(t.closest('[data-ad-row]')); });
    });
    drawer.querySelectorAll('[data-drawer-close]').forEach(function (b) { b.addEventListener('click', close); });
    // Delete jumps to the shared modal — close the drawer so it doesn't overlap.
    if (delBtn) delBtn.addEventListener('click', close);
  })();

  // ---- Thumbnail hover preview (image card, or short muted video preview) ---
  // Video previews: ~300ms hover delay, metadata-only preload, play the first few
  // seconds muted with no controls, one at a time, gated by IntersectionObserver so
  // off-screen media never loads. Uses the uploaded file directly — no rewarded
  // routes, no analytics. Falls back to the static card if autoplay is blocked or
  // the device is touch-only.
  (function () {
    var thumbs = Array.prototype.slice.call(document.querySelectorAll('[data-thumb-preview]'));
    if (!thumbs.length) return;
    var canHover = !window.matchMedia || window.matchMedia('(hover: hover) and (pointer: fine)').matches;
    var reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    var PREVIEW_SECS = 4, DELAY = 300;

    var pop = document.createElement('div');
    pop.className = 'ad-thumb-pop';
    pop.setAttribute('aria-hidden', 'true');
    document.body.appendChild(pop);

    var hideT, startT, activeVideo = null;
    var visible = ('IntersectionObserver' in window) ? new WeakSet() : null;
    var io = visible ? new IntersectionObserver(function (entries) {
      entries.forEach(function (e) { if (e.isIntersecting) visible.add(e.target); else visible.delete(e.target); });
    }, { rootMargin: '0px' }) : null;
    if (io) thumbs.forEach(function (t) { io.observe(t); });

    function stopVideo() {
      if (!activeVideo) return;
      try { activeVideo.pause(); activeVideo.currentTime = 0; } catch (e) {}
      activeVideo.removeAttribute('src');
      try { activeVideo.load(); } catch (e) {}
      activeVideo = null;
    }
    function position(thumb) {
      var r = thumb.getBoundingClientRect();
      var W = 240, left = r.right + 12;
      if (left + W > window.innerWidth - 8) left = r.left - W - 12;
      pop.style.top = (r.top + r.height / 2) + 'px';
      pop.style.left = Math.max(8, left) + 'px';
    }
    function showStatic(thumb) {
      stopVideo();
      var src = thumb.getAttribute('data-thumb-src');
      var icon = thumb.getAttribute('data-thumb-icon');
      pop.innerHTML = src ? '<img src="' + src + '" alt="">'
        : '<span class="ad-thumb-pop-ico"><i class="bi ' + (icon || 'bi-stars') + '"></i></span>';
      position(thumb); pop.classList.add('is-show');
    }
    function showVideo(thumb) {
      var vsrc = thumb.getAttribute('data-media-src');
      var poster = thumb.getAttribute('data-media-poster') || thumb.getAttribute('data-thumb-src') || '';
      var v = document.createElement('video');
      v.className = 'ad-thumb-pop-vid';
      v.muted = true; v.playsInline = true; v.setAttribute('preload', 'metadata');
      if (poster) v.setAttribute('poster', poster);
      v.addEventListener('timeupdate', function () { if (v.currentTime >= PREVIEW_SECS) { try { v.pause(); } catch (e) {} } });
      pop.innerHTML = ''; pop.appendChild(v);
      activeVideo = v;
      v.src = vsrc;
      position(thumb); pop.classList.add('is-show');
      var p = v.play();
      if (p && p.catch) p.catch(function () { showStatic(thumb); });  // autoplay blocked → static
    }
    function begin(thumb) {
      clearTimeout(hideT); clearTimeout(startT);
      if (visible && !visible.has(thumb)) return;   // off-screen → never load
      stopVideo();
      if (canHover && !reduceMotion && thumb.getAttribute('data-media-type') === 'video' && thumb.getAttribute('data-media-src')) {
        startT = setTimeout(function () { showVideo(thumb); }, DELAY);
      } else {
        showStatic(thumb);
      }
    }
    function end() {
      clearTimeout(startT);
      stopVideo();                                   // never keep playing in the background
      hideT = setTimeout(function () { pop.classList.remove('is-show'); }, 60);
    }
    thumbs.forEach(function (t) {
      t.addEventListener('mouseenter', function () { begin(t); });
      t.addEventListener('mouseleave', end);
      t.addEventListener('blur', end);
    });
  })();

  // ---- Export (client-side, current filtered page — no backend/query) -----
  (function () {
    if (!document.querySelector('[data-export-menu]')) return;
    function collect() {
      var out = [['Campaign', 'Placement', 'Display Weight', 'Status', 'Impressions', 'Clicks', 'CTR', 'Start', 'End', 'Landing URL']];
      document.querySelectorAll('[data-ad-row]').forEach(function (tr) {
        var d = tr.dataset;
        out.push([d.title, d.placement, d.priority, d.status,
          (d.impressions || '').replace(/,/g, ''), (d.clicks || '').replace(/,/g, ''),
          d.ctr, d.start, d.end, d.url || '']);
      });
      return out;
    }
    function toCsv(rows) {
      return rows.map(function (r) {
        return r.map(function (c) {
          c = (c == null ? '' : String(c));
          return /[",\n]/.test(c) ? '"' + c.replace(/"/g, '""') + '"' : c;
        }).join(',');
      }).join('\r\n');
    }
    function download(name, text) {
      var blob = new Blob(['' + text], { type: 'text/csv;charset=utf-8;' });
      var url = URL.createObjectURL(blob);
      var a = document.createElement('a');
      a.href = url; a.download = name;
      document.body.appendChild(a); a.click();
      document.body.removeChild(a); URL.revokeObjectURL(url);
    }
    document.querySelectorAll('[data-export]').forEach(function (btn) {
      btn.addEventListener('click', function () {
        var kind = btn.getAttribute('data-export');
        download('advertisements-export.' + (kind === 'excel' ? 'xls' : 'csv'), toCsv(collect()));
      });
    });
  })();
</script>

{% if overview and overview.total > 0 %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
  (function () {
    if (!window.Chart) return;
    var C = {
      labels: {{ charts.labels|tojson }},
      impressions: {{ charts.impressions|tojson }},
      clicks: {{ charts.clicks|tojson }},
      placementLabels: {{ charts.placement_labels|tojson }},
      placementCounts: {{ charts.placement_counts|tojson }},
      createdLabels: {{ charts.created_labels|tojson }},
      createdSeries: {{ charts.created_series|tojson }}
    };
    var BLUE = '#2563eb', GREEN = '#22c55e', AMBER = '#f59e0b', VIOLET = '#8b5cf6', SLATE = '#94a3b8';
    // Typography, colours, animation, legend, tooltip and grid come from the
    // shared CampusChart standard (main.js); this only sets per-chart extras.
    var base = { plugins: { legend: { display: false } } };

    window.createChart('chartTopAds', {
      type: 'bar',
      data: { labels: C.labels, datasets: [
        { label: 'Impressions', data: C.impressions, backgroundColor: BLUE, borderRadius: 6 },
        { label: 'Clicks', data: C.clicks, backgroundColor: GREEN, borderRadius: 6 }
      ] },
      options: Object.assign({}, base, { indexAxis: 'y',
        plugins: { legend: { display: true, position: 'bottom' } },
        scales: { x: { grid: { color: '#eef2f7' } }, y: { grid: { display: false } } } })
    });

    window.createChart('chartPlacement', {
      type: 'doughnut',
      data: { labels: C.placementLabels, datasets: [{ data: C.placementCounts,
        backgroundColor: [BLUE, GREEN, AMBER, SLATE, VIOLET], borderWidth: 0 }] },
      options: Object.assign({}, base, { cutout: '62%',
        plugins: { legend: { display: true, position: 'bottom' } } })
    });

    window.createChart('chartCreated', {
      type: 'line',
      data: { labels: C.createdLabels, datasets: [{ data: C.createdSeries, borderColor: BLUE,
        backgroundColor: 'rgba(37,99,235,0.10)', fill: true, tension: 0.35, pointRadius: 2, borderWidth: 2 }] },
      options: Object.assign({}, base, { scales: { y: { beginAtZero: true, grid: { color: '#eef2f7' } },
        x: { grid: { display: false } } } })
    });

    document.querySelectorAll('.ad-chart-box').forEach(function (b) { b.classList.add('is-ready'); });
  })();
</script>
{% endif %}
{% endblock %}