{% extends "base.html" %}
{% block title %}Assign {{ battery.label }} — Battery Tracker{% endblock %}

{% block content %}
<h1>Assign {{ battery.label }}</h1>
<p class="text-muted" style="margin-bottom:1rem;">Brand: {{ battery.brand }}</p>

<div class="card">
  {% if devices %}
    <form method="post" action="{{ url_for('battery_assign', battery_id=battery.id) }}">
      <div class="form-group">
        <label>Select Device</label>
        {% for device in devices %}
          {% set mix = device.installed_brands() and battery.brand not in device.installed_brands() %}
          <div class="device-option" style="margin-bottom:0.75rem;padding:0.75rem;border:1px solid #e2e8f0;border-radius:4px;background:#fff;">
            <label style="display:flex;align-items:center;gap:0.6rem;font-weight:normal;min-height:44px;cursor:pointer;">
              <input type="radio" name="device_id" value="{{ device.id }}" style="cursor:pointer;">
              <span>
                <strong>{{ device.name }}</strong>
                <span class="text-muted">({{ device.installed_count() }}/{{ device.battery_slots }} slots used)</span>
              </span>
            </label>
            {% if mix %}
              <p class="text-warning" style="margin-top:0.3rem;margin-left:1.6rem;">
                ⚠ Already has {{ device.installed_brands()|join(', ') }} — mixing brands not recommended.
              </p>
            {% endif %}
          </div>
        {% endfor %}
      </div>

      <div class="form-actions">
        <button class="btn btn-primary" type="submit">Assign Battery</button>
        <a class="btn btn-secondary" href="{{ url_for('battery_detail', battery_id=battery.id) }}">Cancel</a>
      </div>
    </form>
  {% else %}
    <p class="text-muted">No devices with free slots. <a href="{{ url_for('device_add') }}">Add a device</a> or free up slots first.</p>
  {% endif %}
</div>
{% endblock %}