{% extends "base.html" %}
{% block title %}Microsoft devices · SD RMM{% endblock %}
{% block content %}

<style>
  .dev-top { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
  .dev-intro { color:var(--muted); max-width:720px; }
  .orgbar select { background:var(--surface-3); border:1px solid var(--line); border-radius:8px; padding:6px 9px; color:var(--fg); }
  table.dev { width:100%; border-collapse:collapse; font-size:12.5px; }
  table.dev th { text-align:left; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase;
                 letter-spacing:.4px; padding:7px 9px; border-bottom:1px solid var(--line); white-space:nowrap; }
  table.dev td { padding:7px 9px; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
  table.dev tr.preview td { color:var(--muted-2); font-style:italic; }
  .src { display:inline-block; padding:1px 7px; border-radius:999px; font:600 10.5px/1.6 var(--font-sans); }
  .src.intune { background:rgba(96,165,250,.14); color:#93c5fd; }
  .src.entra { background:rgba(167,139,250,.14); color:#c4b5fd; }
  .comp-compliant { color:#4ade80; } .comp-noncompliant { color:#f87171; }
  .banner { border:1px solid rgba(96,165,250,.25); background:rgba(96,165,250,.07); border-radius:var(--r-md);
            padding:11px 14px; font-size:12.5px; margin-bottom:16px; }
  .wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-1); }
</style>

<div class="dev-top">
  <div>
    <h1 class="page-title">Microsoft devices{% if sel %} &mdash; {{ sel.name }}{% endif %}</h1>
    <p class="dev-intro">Entra ID device objects and Intune managed devices, synced read-only from Microsoft Graph.</p>
  </div>
  <div style="display:flex;gap:8px;align-items:center" class="orgbar">
    {% if orgs|length > 1 %}
    <form method="get" style="display:inline">
      <select name="org" onchange="this.form.submit()">
        {% for o in orgs %}<option value="{{ o.id }}" {% if sel and o.id==sel.id %}selected{% endif %}>{{ o.name }}</option>{% endfor %}
      </select>
    </form>
    {% endif %}
    {% if connected %}
    <form method="post" action="/integrations/microsoft/sync" class="inline">
      <input type="hidden" name="org" value="{{ sel.id }}"><button class="btn btn-ghost" type="submit">Sync now</button>
    </form>
    {% endif %}
    <a class="btn btn-ghost" href="/integrations/microsoft{% if sel %}?org={{ sel.id }}{% endif %}">Settings</a>
  </div>
</div>

{% if not connected %}
<div class="banner">
  <strong>Preview mode.</strong> No Microsoft tenant is connected for this organization, so the rows below show the fields that will populate once you
  <a href="/integrations/microsoft{% if sel %}?org={{ sel.id }}{% endif %}">connect a tenant</a>. Intune supplies disk, serial and compliance; Entra supplies the directory device object.
</div>
{% endif %}

<div class="wrap">
<table class="dev">
  <thead><tr>{% for key, label in fields %}<th>{{ label }}</th>{% endfor %}<th>Native agent</th></tr></thead>
  <tbody>
  {% if connected and devices %}
    {% for d in devices %}
    <tr>
      <td>{{ d.display_name or '—' }}</td>
      <td><span class="src {{ d.source }}">{{ d.source }}</span></td>
      <td>{{ d.os or '—' }}</td>
      <td>{{ d.os_version or '—' }}</td>
      <td>{{ d.serial_number or '—' }}</td>
      <td>{{ d.manufacturer or '—' }}</td>
      <td>{{ d.model or '—' }}</td>
      <td class="comp-{{ d.compliance_state }}">{{ d.compliance_state or '—' }}</td>
      <td>{{ d.user_principal_name or '—' }}</td>
      <td>{{ '%.1f'|format(d.free_storage_gb) if d.free_storage_gb is not none else '—' }}</td>
      <td>{{ '%.1f'|format(d.total_storage_gb) if d.total_storage_gb is not none else '—' }}</td>
      <td style="font-family:var(--font-mono);font-size:11px">{{ d.ms_device_id[:18] ~ '…' if d.ms_device_id and d.ms_device_id|length > 18 else (d.ms_device_id or '—') }}</td>
      <td>{{ (d.last_seen[:16] if d.last_seen else '—') }}</td>
      <td>{% if d.linked_agent_id and agent_names.get(d.linked_agent_id) %}<span style="color:#4ade80">&#128279; {{ agent_names.get(d.linked_agent_id) }}</span>{% else %}<span style="color:var(--muted-2)">agentless</span>{% endif %}</td>
    </tr>
    {% endfor %}
  {% elif connected %}
    <tr><td colspan="{{ fields|length + 1 }}" style="text-align:center;color:var(--muted);padding:20px">No devices returned yet. Try <em>Sync now</em>.</td></tr>
  {% else %}
    <tr><td colspan="{{ fields|length + 1 }}" style="text-align:center;color:var(--muted);padding:24px">
      Microsoft 365 isn&rsquo;t connected. <a href="/integrations/microsoft">Connect a tenant</a> to sync Intune/Entra devices.
    </td></tr>
  {% endif %}
  </tbody>
</table>
</div>

{% endblock %}