{% extends 'base.html' %}
{% block content %}
<div class="toolbar">
  <div>
    <h1>{{ t('mesh.link.title', 'Change MeshCentral link') }}</h1>
    <p class="muted">{{ t('mesh.link.page_help', 'Select an unassigned MeshCentral device. The node ID is changed immediately; other asset fields are updated only during the next synchronization.') }}</p>
  </div>
  <div class="toolbar-actions">
    <a class="button button-secondary" href="/assets/{{ asset.id }}">← {{ t('common.back', 'Back') }}</a>
  </div>
</div>

<section class="panel">
  <h2>{{ t('mesh.link.asset_comparison', 'Asset and current link') }}</h2>
  <div class="inventory-meta">
    <span><strong>{{ t('common.name', 'Name') }}:</strong> {{ asset.name }}</span>
    <span><strong>{{ t('field.manufacturer', 'Manufacturer') }}:</strong> {{ asset.manufacturer or '–' }}</span>
    <span><strong>{{ t('field.serial_number', 'Serial number') }}:</strong> {{ asset.serial_number or '–' }}</span>
    <span><strong>{{ t('field.mesh_node_id', 'MeshCentral node ID') }}:</strong> <code>{{ asset.mesh_node_id or '–' }}</code></span>
  </div>
  {% if current_device %}
  <p class="muted">
    {{ t('mesh.link.current_device', 'Current MeshCentral device') }}:
    <strong>{{ current_device.name }}</strong>
    {% if current_device.manufacturer %} · {{ current_device.manufacturer }}{% endif %}
    {% if current_device.serial_number %} · {{ current_device.serial_number }}{% endif %}
  </p>
  {% elif asset.mesh_node_id %}
  <p class="notice warning">{{ t('mesh.link.current_missing', 'The currently stored node ID was not found in MeshCentral. You can replace it with one of the available devices below.') }}</p>
  {% endif %}
</section>

<section class="panel">
  <h2>{{ t('mesh.link.available_devices', 'Available MeshCentral devices') }}</h2>
  <p class="muted">{{ t('mesh.link.available_help', 'Only node IDs that are not assigned to another asset are shown.') }}</p>

  {% if available_devices %}
  <form method="post" action="/assets/{{ asset.id }}/mesh-link" onsubmit="return confirm({{ t('mesh.link.change_confirm', 'Assign the selected MeshCentral device to this asset?')|tojson }});">
    <div class="table-scroll management-table-scroll">
      <table class="data-table" data-storage-key="mesh-link-devices">
        <thead>
          <tr>
            <th data-no-sort="1">{{ t('common.select', 'Select') }}</th>
            <th>{{ t('common.name', 'Name') }}</th>
            <th>{{ t('field.manufacturer', 'Manufacturer') }}</th>
            <th>{{ t('field.serial_number', 'Serial number') }}</th>
            <th>{{ t('field.mesh_group', 'MeshCentral group') }}</th>
            <th>{{ t('field.operating_system', 'Operating system') }}</th>
            <th>{{ t('field.mesh_node_id', 'MeshCentral node ID') }}</th>
          </tr>
        </thead>
        <tbody>
        {% for device in available_devices %}
          <tr>
            <td><input type="radio" name="node_id" value="{{ device.node_id|e }}" required aria-label="{{ t('mesh.link.select_device', 'Select device')|e }} {{ device.name|e }}"></td>
            <td><strong>{{ device.name or '–' }}</strong></td>
            <td>{{ device.manufacturer or '–' }}</td>
            <td>{{ device.serial_number or '–' }}</td>
            <td>{{ device.group or '–' }}</td>
            <td>{{ device.operating_system or '–' }}</td>
            <td><code>{{ device.node_id }}</code></td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    <div class="form-actions">
      <button type="submit" class="button button-save">{{ t('mesh.link.save', 'Save link') }}</button>
      <a class="button button-secondary" href="/assets/{{ asset.id }}">{{ t('common.cancel', 'Cancel') }}</a>
    </div>
  </form>
  {% else %}
    <div class="empty-state">{{ t('mesh.link.no_available_devices', 'No unassigned MeshCentral devices are currently available.') }}</div>
  {% endif %}
</section>
{% endblock %}