{% import 'macro/accordion.html' as accordion %}
{% import 'macro/badge.html' as badge %}
{% import 'macro/card.html' as card %}
{% import 'macro/form.html' as form %}

<div class="card mb-3 flex-fill {% if solo %}card-solo{% endif %}">
  <div class="card-header d-flex justify-content-between align-items-center">
    <h5 class="mb-0">
      <i class="ri-shopping-cart-line"></i>
      {% if item.fields.name %}
        {{ item.fields.name }}
      {% else %}
        Individual Part Lot
      {% endif %}
    </h5>
    {% if not solo %}
      <a href="{{ item.url() }}" class="btn btn-sm btn-primary">
        <i class="ri-eye-line"></i> View
      </a>
    {% else %}
      <a href="{{ url_for('individual_part.list_lots') }}" class="btn btn-sm btn-secondary">
        <i class="ri-arrow-left-line"></i> Back
      </a>
    {% endif %}
  </div>

  <!-- Part preview grid (2x2 grid of top 4 parts) -->
  <div class="row g-0 border-bottom">
    {% set lot_parts = item.parts() %}
    {% for part in lot_parts[:4] %}
    <div class="col-6">
      <div class="{% if solo %}p-3{% else %}p-1{% endif %}" style="{% if solo %}height: 200px{% else %}height: 100px{% endif %}; background-image: url('{{ part.url_for_image() }}'); background-size: contain; background-repeat: no-repeat; background-position: center;">
        <img src="{{ part.url_for_image() }}" alt="{{ part.fields.name }}" class="d-none" loading="lazy">
      </div>
    </div>
    {% endfor %}
    {% if lot_parts|length > 4 %}
    <div class="col-12 text-center p-1 bg-light">
      <small class="text-muted">+{{ lot_parts|length - 4 }} more parts</small>
    </div>
    {% endif %}
  </div>

  <div class="card-body border-bottom-0 {% if not solo %}p-1{% endif %}">
    {# Always show unique parts count and total quantity first for part lots #}
    <span class="badge text-bg-secondary fw-normal mb-1 {% if solo %}fs-6{% endif %}"><i class="ri-shapes-line"></i> {{ item.parts()|length }} unique parts</span>
    {{ badge.quantity(item.total_quantity(), solo=solo, last=false) }}
    {# Render remaining badges in configured order #}
    {{ badge.render_ordered_badges(item, brickset_tags, brickset_owners, brickset_storages, brickset_purchase_locations, solo=solo, last=false, context='detail' if solo else 'grid') }}
  </div>

  {% if solo %}
    <div class="accordion accordion-flush border-top" id="lot-details">
      {{ accordion.table(item.parts(), 'Parts', 'parts-inventory', 'lot-details', 'part/lot_table.html', icon='shapes-line', hamburger_menu=g.login.is_authenticated(), read_only=writes_disabled)}}
      {% set management_read_only = writes_disabled %}{% include 'individual_part/management.html' %}
      {% if g.login.is_authenticated() and not writes_disabled %}
        {{ accordion.header('Danger zone', 'danger-zone', 'lot-details', danger=true, class='text-end') }}
          <a href="{{ url_for('individual_part.delete_lot', lot_id=item.fields.id) }}" class="btn btn-danger" role="button" data-bs-toggle="modal" data-bs-target="#deleteModal">
            <i class="ri-delete-bin-line"></i> Delete entire lot and all parts
          </a>
        {{ accordion.footer() }}
      {% endif %}
    </div>
  {% endif %}

  <div class="card-footer"></div>
</div>

{% if solo and g.login.is_authenticated() and not writes_disabled %}
<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">Confirm Delete</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Are you sure you want to delete this entire lot and all {{ item.parts()|length }} parts in it? This action cannot be undone.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <form method="POST" action="{{ url_for('individual_part.delete_lot', lot_id=item.fields.id) }}">
          <button type="submit" class="btn btn-danger">Delete Lot</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endif %}