{% extends "base.html" %}
{% block title %}Devices — AidaIDE Cloud Portal{% endblock %}
{% block content %}

<header class="page-head">
  <h1>Your devices</h1>
  <p class="muted">PCs running AidaIDE that you've enrolled or been invited to.</p>
</header>

<section class="devices-section">
  <header class="devices-section__head">
    <h2>Owned</h2>
    <span class="count-pill">{{ owned|length }}</span>
  </header>
  {% if owned %}
  <div class="device-grid">
    {% for d in owned %}
    <article class="device-card">
      <header class="device-card__head">
        <h3 class="device-card__name">{{ d.hostname }}</h3>
        <span class="pill {{ d.pill_class }}">{{ d.pill_text }}</span>
      </header>
      <div class="device-card__id" title="{{ d.id }}">{{ d.id }}</div>
      <div class="device-card__seen muted small">{{ d.seen_text }}</div>
      <footer class="device-card__actions">
        <a class="btn primary" href="/webportal/d/{{ d.id }}/">Open portal &rarr;</a>
        <a class="btn" href="/webportal/d/{{ d.id }}/remote-desktop">Remote access</a>
        <a class="btn" href="/web/devices/{{ d.id }}/field">Field mode</a>
        <a class="btn ghost" href="/web/devices/{{ d.id }}">Manage</a>
      </footer>
    </article>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state">
    <div class="empty-state__icon">&#x1F5A5;</div>
    <h3>No PCs enrolled yet</h3>
    <p class="muted">Open AidaIDE on a PC and click <strong>Cloud &rarr; Add PC to Cloud&hellip;</strong> to enroll it. The new portal URL will appear here.</p>
  </div>
  {% endif %}
</section>

<section class="devices-section">
  <header class="devices-section__head">
    <h2>Collaborating on</h2>
    <span class="count-pill">{{ collab|length }}</span>
  </header>
  {% if collab %}
  <div class="device-grid">
    {% for d in collab %}
    <article class="device-card">
      <header class="device-card__head">
        <h3 class="device-card__name">{{ d.hostname }}</h3>
        <span class="pill {{ d.pill_class }}">{{ d.pill_text }}</span>
        <span class="pill">{{ d.group_name }}</span>
      </header>
      <div class="device-card__seen muted small">{{ d.seen_text }}</div>
      <footer class="device-card__actions">
        <a class="btn primary" href="/webportal/d/{{ d.id }}/">Open portal &rarr;</a>
        <a class="btn" href="/webportal/d/{{ d.id }}/remote-desktop">Remote access</a>
        <a class="btn" href="/web/devices/{{ d.id }}/field">Field mode</a>
      </footer>
    </article>
    {% endfor %}
  </div>
  {% else %}
  <div class="empty-state empty-state--inline">
    <p class="muted">Nobody has shared a PC with you yet. When someone adds you as a collaborator, their device will appear here.</p>
  </div>
  {% endif %}
</section>

{% endblock %}