{% extends "base.html" %}

{% block title %}{{ device.name }} · 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><a class="small" href="{{ url_for('dashboard.devices') }}">← Devices</a><h1 class="mb-1 mt-2">{{ device.name }}</h1><p class="text-body-secondary mb-0">{{ device.platform or 'Platform not reported' }} · {{ device.client_version or 'Version not reported' }}</p></div>
    <div class="page-header-actions">
      {% if device.revoked_at %}<span class="badge text-bg-secondary">Revoked</span>{% elif online %}<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>
  </header>

  {% if enrollment and enrollment.device_id == device.id %}
    <div class="alert alert-warning" role="alert"><strong>Copy this one-time code now.</strong><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="row g-4">
    <section class="col-xl-8" aria-labelledby="monitors-heading">
      <div class="section-heading"><div><h2 class="h4 mb-1" id="monitors-heading">Physical monitors</h2><p class="small text-body-secondary mb-0">Each monitor maps to one independent LibreSignage screen.</p></div></div>
      <div class="vstack gap-3">
        {% for monitor in monitors %}
          <article class="card card-body">
            <div class="d-flex flex-wrap align-items-start justify-content-between gap-3 mb-3">
              <div><h3 class="h5 mb-1">{{ monitor.label }}{% if monitor.is_primary %} <span class="badge text-bg-secondary">Primary</span>{% endif %} {% if not monitor.connected %}<span class="badge text-bg-danger">Missing</span>{% elif monitor.match_state == 'unresolved' %}<span class="badge text-bg-warning">Unresolved</span>{% endif %}</h3><p class="small text-body-secondary mb-0">{{ monitor.width }}×{{ monitor.height }} at {{ monitor.x }},{{ monitor.y }} · {{ monitor.scale }}x · {{ monitor.match_state }}</p></div>
              {% if monitor.screen_id %}<a class="btn btn-sm btn-outline-primary" href="{{ url_for('dashboard.screen_detail', screen_id=monitor.screen_id) }}">{{ monitor.screen_name }}</a>{% else %}<span class="badge text-bg-warning">Waiting for assignment</span>{% endif %}
            </div>
            {% if monitor.screen_id %}
              <form method="post" action="{{ url_for('dashboard.unassign_device_monitor_route', device_id=device.id, monitor_id=monitor.id) }}" data-confirm="Unassign {{ monitor.label }}? Its screen credential will rotate immediately."><button class="btn btn-sm btn-outline-warning" type="submit">Unassign screen</button></form>
            {% elif not device.revoked_at %}
              <form method="post" action="{{ url_for('dashboard.assign_device_monitor_route', device_id=device.id, monitor_id=monitor.id) }}" class="row g-2 align-items-end" data-confirm="Assign this monitor? The selected screen credential will rotate and any standalone client using it will disconnect.">
                <div class="col-md-5"><label class="form-label" for="screen-{{ monitor.id }}">Existing unbound screen</label><select class="form-select" id="screen-{{ monitor.id }}" name="screen_id"><option value="">Choose a screen</option>{% for screen in screens %}<option value="{{ screen.id }}">{{ screen.name }}</option>{% endfor %}</select></div>
                <div class="col-md-5"><label class="form-label" for="new-screen-{{ monitor.id }}">Or create a new screen</label><input class="form-control" id="new-screen-{{ monitor.id }}" name="new_screen_name" placeholder="{{ device.name }} — {{ monitor.label }}"></div>
                <div class="col-md-2"><button class="btn btn-primary w-100" type="submit">Assign</button></div>
              </form>
            {% endif %}
          </article>
        {% else %}
          <div class="content-empty text-center border p-5"><h3 class="h5">No monitors reported</h3><p class="text-body-secondary mb-0">Enroll and start the client to inventory this PC's displays.</p></div>
        {% endfor %}
      </div>
    </section>

    <aside class="col-xl-4">
      <section class="card card-body mb-4"><h2 class="h5">Device access</h2><dl class="row small mb-3"><dt class="col-5">Enrolled</dt><dd class="col-7">{{ device.enrolled_at or 'Not yet' }}</dd><dt class="col-5">Last contact</dt><dd class="col-7">{{ device.last_seen_at or 'Never' }}</dd><dt class="col-5">Remote reboot</dt><dd class="col-7">{{ 'Enabled locally' if device.allow_os_reboot else 'Disabled locally' }}</dd></dl>{% if not device.revoked_at %}<form method="post" action="{{ url_for('dashboard.issue_device_code_route', device_id=device.id) }}" class="mb-2"><button class="btn btn-outline-primary w-100" type="submit">Issue enrollment code</button></form><form method="post" action="{{ url_for('dashboard.revoke_device_route', device_id=device.id) }}" data-confirm="Revoke {{ device.name }}? All monitor mappings will be removed and their screen credentials rotated."><button class="btn btn-outline-danger w-100" type="submit">Revoke device</button></form>{% endif %}</section>

      <section class="card card-body"><h2 class="h5">Device commands</h2><p class="small text-body-secondary">Reboot affects this PC and every monitor connected to it.</p>{% if not device.revoked_at %}<form method="post" action="{{ url_for('dashboard.queue_device_command_route', device_id=device.id) }}" data-confirm="Reboot {{ device.name }}? Playback on every connected monitor will stop during restart."><input type="hidden" name="action" value="reboot_os"><button class="btn btn-outline-warning w-100" type="submit" {% if not device.allow_os_reboot %}disabled{% endif %}>Reboot operating system</button></form>{% endif %}{% if commands %}<hr><div class="vstack gap-2">{% for command in commands %}<div class="small"><strong>{{ command.action }}</strong> <span class="badge text-bg-secondary">{{ command.status }}</span><div class="text-body-secondary">{{ command.result or command.created_at }}</div></div>{% endfor %}</div>{% endif %}</section>
    </aside>
  </div>
{% endblock %}