{% set state = device.current_state %}
{% set controllable = device.is_controllable %}
{% set is_bound = device.board is not none %}

<div class="card border-0 rounded-4 h-100
  {% if controllable and is_bound %}
    {% if state %}border-start border-3 border-{{ device.state_color }}
    {% else %}border-start border-3 border-secondary{% endif %}
  {% elif not is_bound %}border-start border-3 border-warning
  {% else %}border-start border-3 border-primary{% endif %}">

  <div class="card-body p-3">
    <!-- Icon + name row -->
    <div class="d-flex align-items-start gap-3 mb-2">
      <div class="rounded-3 d-flex align-items-center justify-content-center flex-shrink-0"
           style="width:56px;height:56px;background:var(--bs-secondary-bg)">
        <i class="bi {{ device.effective_icon }}"
           style="font-size:1.8rem;
             {% if controllable and is_bound and state %}color:var(--bs-{{ device.state_color }}){% endif %}"></i>
      </div>
      <div class="flex-grow-1 min-w-0">
        <div class="fw-semibold text-truncate">{{ device.name }}</div>
        {% if device.description %}
        <div class="text-secondary small text-truncate">{{ device.description }}</div>
        {% endif %}
        <div class="d-flex flex-wrap gap-1 mt-1">
          {% if device.area %}
          <span class="badge text-bg-secondary" style="font-size:.65rem">
            <i class="bi bi-geo-alt me-1"></i>{{ device.area }}
          </span>
          {% endif %}
          <span class="badge text-bg-secondary" style="font-size:.65rem">
            {{ device.device_class | capitalize }}
          </span>
          {% if is_bound %}
          <span class="badge text-bg-secondary" style="font-size:.65rem">
            <i class="bi bi-motherboard me-1"></i>{{ device.board.name }}
            {% if device.channel_label %}· {{ device.channel_label }}{% endif %}
          </span>
          {% else %}
          <span class="badge text-bg-warning text-dark" style="font-size:.65rem">
            <i class="bi bi-exclamation-circle me-1"></i>Unbound
          </span>
          {% endif %}
          {% if device.app_id %}
          <span class="badge text-bg-dark font-monospace copy-app-id"
                data-appid="{{ device.app_id }}"
                title="App ID: {{ device.app_id }} — click to copy"
                style="font-size:.6rem;cursor:pointer">
            <i class="bi bi-hash"></i>{{ device.app_id }}
          </span>
          {% endif %}
        </div>
      </div>
    </div>

    <!-- State + controls row -->
    <div class="d-flex align-items-center justify-content-between mt-2">
      <span class="badge device-state-badge text-bg-{{ device.state_color }}">
        {% if not is_bound %}Virtual{% else %}{{ device.state_label }}{% endif %}
      </span>
      <div class="d-flex gap-1">
        {% if controllable and is_bound %}
        <button type="button"
                class="btn btn-sm {% if state %}btn-{{ device.state_color }}{% else %}btn-outline-secondary{% endif %}"
                onclick="deviceToggle(this, {{ device.id }})"
                title="Toggle {{ device.name }}">
          <i class="bi bi-power me-1"></i>{% if state %}ON{% else %}OFF{% endif %}
        </button>
        {% endif %}
        {% if current_user.is_admin() %}
        <a href="{{ url_for('devices.edit_device', device_id=device.id) }}"
           class="btn btn-sm btn-outline-secondary" title="Edit / Bind">
          <i class="bi bi-pencil"></i>
        </a>
        <form method="POST"
              action="{{ url_for('devices.delete_device', device_id=device.id) }}"
              onsubmit="return confirm('Delete device \'{{ device.name }}\'?')">
          <button type="submit" class="btn btn-sm btn-outline-danger" title="Delete">
            <i class="bi bi-trash"></i>
          </button>
        </form>
        {% endif %}
      </div>
    </div>
  </div>
</div>