{% extends 'base.html' %}

{% block content %}
<h1 class="mb-4">Spool Info</h1>
<div class="card mb-3 shadow-sm">
  <div class="card-header fw-bold">
    Spool Details
  </div>
  <div class="card-body">
    <!-- Filament Color Badge and Name -->
    <div class="d-flex align-items-start mb-3">
      <div class="me-3">
                <span class="badge d-inline-block"
                      style="background-color: #{{ current_spool.filament.color_hex }}; width: 40px; height: 40px; border-radius: 5px;">
                </span>
      </div>
      <div>
        <h5 class="card-title mb-0">{{ current_spool.filament.name }} - {{ current_spool.filament.material }}</h5>
        <small class="text-muted">{{ current_spool.filament.vendor.name }}</small>
      </div>
    </div>

    <!-- Filament Details -->
    <div class="row mb-2">
      <div class="col-6">
        <p class="mb-1"><strong>Remaining Weight:</strong> {{ current_spool.remaining_weight|round(2) }}g</p>
        <p class="mb-1"><strong>Remaining Length:</strong> {{ current_spool.remaining_length|round(0) }}mm</p>
      </div>
      <div class="col-6">
        <p class="mb-1"><strong>Nozzle Temp:</strong> {{ current_spool.filament.extra.nozzle_temperature }}</p>
        <p class="mb-1"><a href="{{ SPOOLMAN_BASE_URL }}/spool/show/{{ current_spool.id }}" target="_blank">view in spoolman <i class="bi bi-box-arrow-up-right"></i></a></p>
      </div>
    </div>
  </div>
  <div class="card-footer text-muted">
    <small>Registered: {{ current_spool.registered }} | Last Used: {{ current_spool.last_used }}</small>
  </div>
</div>
<h1 class="mb-4">Pick Tray</h1>
<!-- AMS and External Spool Row -->
<div class="row">
  <!-- External Spool -->
  <div class="col-md-2 mb-4">
    <div class="card shadow-sm">
      <div class="card-header">
        <h5 class="mb-0">External Spool</h5>
      </div>
      <div class="card-body text-center">
        {% with tray_data=vt_tray_data, ams_id=EXTERNAL_SPOOL_AMS_ID, pick_tray=True, tray_id=vt_tray_data.id %} {% include 'fragments/tray.html' %} {% endwith %}
      </div>
    </div>
  </div>
  {% for ams in ams_data %}
  <div class="col-md-4 mb-4">
    <div class="card shadow-sm">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">AMS {{ ams.id }}</h5>
        <span class="text-muted small">Humidity: {{ ams.humidity }}%, Temp: {{ ams.temp }}°C</span>
      </div>
      <div class="card-body">
        <div class="row">
          {% for tray in ams.tray %}
          <div class="col-6 mb-3">
            {% with tray_data=tray, ams_id=ams.id, pick_tray=True, tray_id=tray.id %} {% include 'fragments/tray.html' %} {% endwith %}
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

{% endblock %}