{% extends "base.html" %}
{% block title %}Devices — Battery Tracker{% endblock %}

{% block content %}
<h1>Devices</h1>

<div class="card">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Name</th>
          <th>Slots</th>
          <th>Installed</th>
          <th>Brands</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for d in devices %}
        <tr>
          <td><a href="{{ url_for('device_detail', device_id=d.id) }}"><strong>{{ d.name }}</strong></a></td>
          <td>{{ d.battery_slots }}</td>
          <td>
            {{ d.installed_count() }} / {{ d.battery_slots }}
            {% if d.installed_count() >= d.battery_slots %}
              <span class="badge badge-retired">Full</span>
            {% endif %}
          </td>
          <td>
            {% set brands = d.installed_brands() %}
            {% if brands %}
              {{ brands|join(', ') }}
              {% if d.has_mixed_brands() %}
                <span class="badge badge-warning">⚠ mixed</span>
              {% endif %}
            {% else %}
              <span class="text-muted">—</span>
            {% endif %}
          </td>
          <td style="white-space:nowrap;">
            <a class="btn btn-sm btn-secondary" href="{{ url_for('device_detail', device_id=d.id) }}">View</a>
            <form class="inline" method="post" action="{{ url_for('device_delete', device_id=d.id) }}"
                  onsubmit="return confirm('Delete {{ d.name }}? All installed batteries will be unassigned.');">
              <button class="btn btn-sm btn-danger" type="submit">Delete</button>
            </form>
          </td>
        </tr>
        {% else %}
        <tr><td colspan="5" class="text-muted" style="text-align:center;padding:1rem;">No devices yet. <a href="{{ url_for('device_add') }}">Add one.</a></td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<a class="btn btn-primary" href="{{ url_for('device_add') }}">+ Add Device</a>
{% endblock %}