{% extends "base.html" %}

{% block title %}Proof of play · LibreSignage{% endblock %}

{% block content %}
  <div class="d-flex flex-wrap justify-content-between align-items-start gap-3 mb-4">
    <div>
      <h1 class="mb-1">Proof of play</h1>
      <p class="text-body-secondary mb-0">
        Client-reported playback history. Date filters use {{ filters.timezone }}.
      </p>
    </div>
    <a
      class="btn btn-outline-primary"
      href="{{ url_for('dashboard.proof_of_play_csv',
        started_from=filters.local_from.replace(tzinfo=None).isoformat(timespec='minutes'),
        started_to=filters.local_to.replace(tzinfo=None).isoformat(timespec='minutes'),
        screen_id=filters.screen_id or '', content=filters.content_query,
        outcome=filters.outcome, zone=filters.zone_key) }}"
    >Export CSV</a>
  </div>

  <form class="card card-body mb-4" method="get">
    <div class="row g-3 align-items-end">
      <div class="col-md-3">
        <label class="form-label" for="proof-from">From</label>
        <input class="form-control" id="proof-from" name="started_from" type="datetime-local"
          value="{{ filters.local_from.replace(tzinfo=None).isoformat(timespec='minutes') }}">
      </div>
      <div class="col-md-3">
        <label class="form-label" for="proof-to">To</label>
        <input class="form-control" id="proof-to" name="started_to" type="datetime-local"
          value="{{ filters.local_to.replace(tzinfo=None).isoformat(timespec='minutes') }}">
      </div>
      <div class="col-md-3">
        <label class="form-label" for="proof-screen">Screen</label>
        <select class="form-select" id="proof-screen" name="screen_id">
          <option value="">All accessible screens</option>
          {% for screen in screens %}
            <option value="{{ screen.id }}"{% if filters.screen_id == screen.id %} selected{% endif %}>
              {{ screen.name }}
            </option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="proof-content">Asset</label>
        <input class="form-control" id="proof-content" name="content"
          value="{{ filters.content_query }}" placeholder="Title or asset ID">
      </div>
      <div class="col-md-3">
        <label class="form-label" for="proof-outcome">Outcome</label>
        <select class="form-select" id="proof-outcome" name="outcome">
          <option value="">All outcomes</option>
          {% for value in ('played', 'skipped', 'error') %}
            <option value="{{ value }}"{% if filters.outcome == value %} selected{% endif %}>{{ value|capitalize }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-3">
        <label class="form-label" for="proof-zone">Zone</label>
        <input class="form-control" id="proof-zone" name="zone"
          value="{{ filters.zone_key }}" placeholder="For example: main">
      </div>
      <div class="col-md-3 d-flex gap-2">
        <button class="btn btn-primary" type="submit">Apply filters</button>
        <a class="btn btn-outline-secondary" href="{{ url_for('dashboard.proof_of_play') }}">Reset</a>
      </div>
    </div>
  </form>

  <div class="row g-3 mb-4">
    {% for label, value, style in (
      ('Played', totals.played, 'success'),
      ('Skipped', totals.skipped, 'warning'),
      ('Errors', totals.error, 'danger')
    ) %}
      <div class="col-sm-4">
        <div class="card card-body border-{{ style }}">
          <span class="text-body-secondary">{{ label }}</span>
          <strong class="fs-3">{{ value }}</strong>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="card">
    <div class="card-header">{{ total }} matching event{% if total != 1 %}s{% endif %}</div>
    <div class="table-responsive">
      <table class="table table-striped align-middle mb-0">
        <thead>
          <tr>
            <th scope="col">Started (UTC)</th>
            <th scope="col">Screen</th>
            <th scope="col">Asset</th>
            <th scope="col">Zone</th>
            <th scope="col">Revision</th>
            <th scope="col">Duration</th>
            <th scope="col">Outcome</th>
            <th scope="col">Detail</th>
          </tr>
        </thead>
        <tbody>
          {% for event in events %}
            <tr>
              <td class="text-nowrap">{{ event.started_at }}</td>
              <td>{{ event.screen_name }}</td>
              <td>{{ event.content_title }} <span class="text-body-secondary">#{{ event.content_item_id }}</span></td>
              <td>{{ event.zone_key or 'Single' }}</td>
              <td>r{{ event.revision }}</td>
              <td>{{ '%.1f'|format(event.duration_seconds) }}s</td>
              <td><span class="badge text-bg-{{ 'success' if event.outcome == 'played' else 'warning' if event.outcome == 'skipped' else 'danger' }}">{{ event.outcome }}</span></td>
              <td>{{ event.detail or '—' }}</td>
            </tr>
          {% else %}
            <tr><td class="text-center py-4" colspan="8">No playback events match these filters.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% if filters.page > 1 or total > filters.page * per_page %}
    <nav class="d-flex justify-content-between mt-3" aria-label="Proof-of-play pages">
      {% if filters.page > 1 %}
        <a class="btn btn-outline-secondary" href="{{ url_for('dashboard.proof_of_play',
          started_from=filters.local_from.replace(tzinfo=None).isoformat(timespec='minutes'),
          started_to=filters.local_to.replace(tzinfo=None).isoformat(timespec='minutes'),
          screen_id=filters.screen_id or '', content=filters.content_query,
          outcome=filters.outcome, zone=filters.zone_key, page=filters.page - 1) }}">Previous</a>
      {% else %}<span></span>{% endif %}
      {% if total > filters.page * per_page %}
        <a class="btn btn-outline-secondary" href="{{ url_for('dashboard.proof_of_play',
          started_from=filters.local_from.replace(tzinfo=None).isoformat(timespec='minutes'),
          started_to=filters.local_to.replace(tzinfo=None).isoformat(timespec='minutes'),
          screen_id=filters.screen_id or '', content=filters.content_query,
          outcome=filters.outcome, zone=filters.zone_key, page=filters.page + 1) }}">Next</a>
      {% endif %}
    </nav>
  {% endif %}
{% endblock %}