{% 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") == "\"\"" %} <!-- 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") and 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 %}