{% extends "pretixcontrol/event/base.html" %}
{% load i18n %}
{% block title %}{% trans "Ad pixels" %}{% endblock %}
{% block content %}
<h1>{% trans "Ad pixels" %}
  <a class="btn btn-primary pull-right" href="new">{% trans "Add a pixel" %}</a>
</h1>
<p class="text-muted">{% blocktrans %}Manage every ad pixel on this event — Meta, TikTok, Google and Spotify — client-side and server-side (Conversions API). All firing is consent-gated: no marketing consent, no pixel loads and no conversion is sent.{% endblocktrans %}</p>

{% if rows %}
<table class="table">
  <thead><tr>
    <th>{% trans "Platform" %}</th><th>{% trans "Label / ID" %}</th>
    <th>{% trans "Client" %}</th><th>{% trans "Server (CAPI)" %}</th>
    <th>{% trans "Fires on" %}</th>
    <th class="text-right">{% trans "Sent 30d" %}</th>
    <th class="text-right">{% trans "Skipped" %}</th>
    <th class="text-right">{% trans "Failed" %}</th>
    <th></th>
  </tr></thead>
  <tbody>
  {% for r in rows %}
    <tr {% if not r.p.enabled %}class="text-muted"{% endif %}>
      <td><strong>{{ r.p.get_platform_display }}</strong></td>
      <td>{{ r.p.label|default:"—" }}<br><code>{{ r.p.pixel_id|default:"(no id)" }}</code></td>
      <td>{% if r.p.client_enabled %}<span class="label label-success">{% trans "on" %}</span>{% else %}<span class="label label-default">{% trans "off" %}</span>{% endif %}</td>
      <td>{% if r.p.server_enabled and r.p.capi_token %}<span class="label label-success">{% trans "on" %}</span>{% elif r.p.server_enabled %}<span class="label label-warning">{% trans "no token" %}</span>{% else %}<span class="label label-default">{% trans "off" %}</span>{% endif %}</td>
      <td><small>{{ r.p.fire_on }}</small></td>
      <td class="text-right">{{ r.sent }}</td>
      <td class="text-right text-muted">{{ r.skipped }}</td>
      <td class="text-right {% if r.failed %}text-danger{% endif %}">{{ r.failed }}</td>
      <td class="text-right">
        <a class="btn btn-xs btn-default" href="{{ r.p.pk }}/edit">{% trans "Edit" %}</a>
        <form method="post" action="{{ r.p.pk }}/delete" style="display:inline" onsubmit="return confirm('{% trans "Remove this pixel?" %}')">{% csrf_token %}
          <button class="btn btn-xs btn-danger">×</button></form>
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% else %}
<div class="well">{% trans "No pixels yet. Add your first Meta / TikTok / Google / Spotify pixel." %}</div>
{% endif %}

<h3>{% trans "Consent" %}</h3>
<form method="post" class="form-horizontal" style="margin-bottom:2em">{% csrf_token %}
  <div class="checkbox"><label>
    <input type="checkbox" name="consent_banner" value="1" {% if banner_on %}checked{% endif %}>
    {% trans "Show the built-in consent banner (use only if you don't already have a cookie/consent manager)" %}
  </label></div>
  <div class="form-group">
    <input class="form-control" name="consent_text" style="max-width:640px"
           placeholder="{% trans 'We use cookies to measure our ads. Allow marketing cookies?' %}">
  </div>
  <button class="btn btn-default">{% trans "Save consent settings" %}</button>
  <p class="help-block">{% blocktrans %}However consent is captured, pixels only fire once the cookie <code>fc_consent_marketing=1</code> is set and the <code>fc-consent-granted</code> event has fired.{% endblocktrans %}</p>
</form>

{% if recent %}
<h3>{% trans "Recent server-side dispatches" %}</h3>
<table class="table table-condensed">
  <thead><tr><th>{% trans "When" %}</th><th>{% trans "Pixel" %}</th><th>{% trans "Event" %}</th><th>{% trans "Outcome" %}</th><th>{% trans "Order" %}</th><th>{% trans "Detail" %}</th></tr></thead>
  <tbody>
  {% for d in recent %}
    <tr>
      <td><small>{{ d.created|date:"d M H:i" }}</small></td>
      <td>{{ d.pixel.get_platform_display }}</td>
      <td>{{ d.fire_event }}</td>
      <td>{% if d.outcome == "sent" %}<span class="label label-success">sent</span>{% elif d.outcome == "failed" %}<span class="label label-danger">failed {{ d.status_code }}</span>{% else %}<span class="label label-default">{{ d.detail }}</span>{% endif %}</td>
      <td><code>{{ d.order_code }}</code></td>
      <td><small class="text-muted">{{ d.detail|truncatechars:60 }}</small></td>
    </tr>
  {% endfor %}
  </tbody>
</table>
{% endif %}
{% endblock %}