{% extends "base.html" %}

{% block title %}Devices · LibreSignage{% endblock %}
{% block head %}<link rel="stylesheet" href="{{ url_for('dashboard.static', filename='css/dashboard.css') }}">{% endblock %}

{% block content %}
  <header class="page-header">
    <div><h1 class="mb-1">Devices</h1><p class="text-body-secondary mb-0">Enroll computers that drive one independent LibreSignage screen per monitor.</p></div>
    <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#add-device" aria-expanded="false" aria-controls="add-device">Add device</button>
  </header>

  {% if enrollment %}
    <div class="alert alert-warning" role="alert">
      <strong>Save this one-time enrollment code now.</strong> It expires after 15 minutes and is shown only once.
      <code class="d-block text-wrap user-select-all mt-2">libresignage-client enroll --server-url {{ request.url_root.rstrip('/') }} --code {{ enrollment.code }}</code>
    </div>
  {% endif %}

  <div class="collapse mb-4" id="add-device">
    <form method="post" action="{{ url_for('dashboard.create_device_route') }}" class="card card-body">
      <div class="row g-3 align-items-end">
        <div class="col-md-8"><label class="form-label" for="device-name">Device name</label><input class="form-control" id="device-name" name="name" placeholder="Lobby player PC" maxlength="120" required></div>
        <div class="col-md-4"><button class="btn btn-primary w-100" type="submit">Create enrollment</button></div>
      </div>
    </form>
  </div>

  <div class="vstack gap-3">
    {% for device in devices %}
      <article class="card card-body">
        <div class="d-flex flex-wrap align-items-start justify-content-between gap-3">
          <div>
            <div class="d-flex flex-wrap align-items-center gap-2 mb-2">
              <h2 class="h5 mb-0"><a href="{{ url_for('dashboard.device_detail', device_id=device.id) }}">{{ device.name }}</a></h2>
              {% if device.revoked_at %}<span class="badge text-bg-secondary">Revoked</span>{% elif online[device.id] %}<span class="badge text-bg-success">Online</span>{% elif device.enrolled_at %}<span class="badge text-bg-danger">Offline</span>{% else %}<span class="badge text-bg-warning">Awaiting enrollment</span>{% endif %}
            </div>
            <p class="small text-body-secondary mb-0">{{ monitors[device.id]|length }} {{ 'monitor' if monitors[device.id]|length == 1 else 'monitors' }} · {{ device.platform or 'Platform not reported' }} · {{ device.client_version or 'Version not reported' }}</p>
          </div>
          <a class="btn btn-sm btn-outline-primary" href="{{ url_for('dashboard.device_detail', device_id=device.id) }}">Manage <span aria-hidden="true">→</span></a>
        </div>
      </article>
    {% else %}
      <div class="content-empty text-center border p-5"><h2 class="h5">No devices enrolled</h2><p class="text-body-secondary mb-0">Create a device, then enter its one-time code on the player PC.</p></div>
    {% endfor %}
  </div>
{% endblock %}