{% extends 'base.html' %}

{% block content %}
<!-- Page Title -->
<h1 class="mb-4 text-center">Assign NFC Tag to Spool</h1>

<!-- Empty State -->
{% if spools|length == 0 or not spools %}
<div class="alert alert-info text-center" role="alert">
  No spools available to tag at the moment.
</div>
{% else %}

<!-- Spool List -->
<div class="list-group">
  {% for spool in spools %}
  {% if not spool.extra.get("tag") or spool.extra.get("tag") == "null" %}
  <!-- Individual Spool Item -->
  <a href="{{ url_for('write_tag', spool_id=spool.id) }}"
     class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">

    <!-- Left: Filament Color Badge -->
    <div class="me-3">
        <span class="badge d-inline-block"
              style="background-color: #{{ spool.filament.color_hex }}; width: 20px; height: 50px;">
        </span>
    </div>

    <!-- Middle: Filament Details -->
    <div class="flex-grow-1">
      <!-- Vendor Name and Material (Row 1) -->
      <h6 class="mb-0">{{ spool.filament.vendor.name }} - {{ spool.filament.material }}</h6>
      <!-- Filament Name (Row 2) -->
      <small class="text-muted">{{ spool.filament.name }}</small>
    </div>

    <!-- Action Icon -->
    <span class="badge bg-primary rounded-pill">
                <i class="bi bi-plus-circle"></i> Assign
            </span>
  </a>
  {% endif %}
  {% endfor %}
  {% for spool in spools %}
  {% if spool.extra.get("tag") %}
  <!-- Individual Spool Item -->
  <a href="{{ url_for('write_tag', spool_id=spool.id) }}"
     class="list-group-item list-group-item-action d-flex justify-content-between align-items-center">
    <!-- Left: Filament Color Badge -->
    <div class="me-3">
        <span class="badge d-inline-block"
              style="background-color: #{{ spool.filament.color_hex }}; width: 20px; height: 50px;">
        </span>
    </div>

    <!-- Middle: Filament Details -->
    <div class="flex-grow-1">
      <!-- Vendor Name and Material (Row 1) -->
      <h6 class="mb-0">{{ spool.filament.vendor.name }} - {{ spool.filament.material }}</h6>
      <!-- Filament Name (Row 2) -->
      <small class="text-muted">{{ spool.filament.name }}</small>
    </div>
    <!-- Action Icon -->
    <span class="badge bg-secondary rounded-pill">
                <i class="bi bi-plus-circle"></i> Reassign
            </span>
  </a>
  {% endif %}
  {% endfor %}
</div>
{% endif %}
{% endblock %}