{% import 'macro/form.html' as form %}
{% import 'macro/table.html' as table %}

<div class="table-responsive-sm">
  <table data-table="{% if all %}true{% endif %}" class="table table-striped align-middle {% if not all %}sortable mb-0{% endif %}" {% if all %}id="parts"{% endif %}>
    {{ table.header(color=true, quantity=not no_quantity, sets=all, minifigures=all, checked=not all and not read_only, hamburger_menu=not all and not read_only, accordion_id=accordion_id|default('')) }}
    <tbody>
      {% for item in table_collection %}
      <tr>
        {{ table.image(item.url_for_image(), caption=item.fields.name, alt=item.fields.part, accordion=solo) }}
        <td data-sort="{{ item.fields.name }}">
          <a class="text-reset" href="{{ item.url() }}">{{ item.fields.name }}</a>
          {% if item.fields.spare %}<span class="badge rounded-pill text-bg-warning fw-normal"><i class="ri-loop-left-line"></i> Spare</span>{% endif %}
          {% if all %}
            {{ table.rebrickable(item) }}
            {{ table.bricklink(item) }}
          {% endif %}
        </td>
        <td data-sort="{{ item.fields.color_name }}">
          {% if item.fields.color_rgb %}<span class="color-rgb color-rgb-table {% if item.fields.color == 9999 %}color-any{% endif %} align-middle border border-black" {% if item.fields.color != 9999 %}style="background-color: #{{ item.fields.color_rgb }};"{% endif %}></span>{% endif %}
          <span class="align-middle">{{ item.fields.color_name }}</span>
        </td>
        {% if not no_quantity %}
          {% if all %}
            <td>{{ item.fields.total_quantity }}</td>
          {% else %}
            <td>{% if quantity %}{{ item.fields.quantity * quantity }}{% else %}{{ item.fields.quantity }}{% endif %}</td>
          {% endif %}
        {% endif %}
        {% if not config['HIDE_TABLE_MISSING_PARTS'] %}
          <td data-sort="{{ item.fields.total_missing }}" class="table-td-input">
            {{ form.input('Missing', item.fields.id, item.html_id('missing'), item.url_for_problem('missing'), item.fields.total_missing, all=all, read_only=read_only) }}
          </td>
        {% endif %}
        {% if not config['HIDE_TABLE_DAMAGED_PARTS'] %}
          <td data-sort="{{ item.fields.total_damaged }}" class="table-td-input">
            {{ form.input('Damaged', item.fields.id, item.html_id('damaged'), item.url_for_problem('damaged'), item.fields.total_damaged, all=all, read_only=read_only) }}
          </td>
        {% endif %}
        {% if all %}
          <td>{{ item.fields.total_sets }}</td>
          <td>{{ item.fields.total_minifigures }}</td>
        {% else %}
          {% if not config['HIDE_TABLE_CHECKED_PARTS'] and not read_only %}
            <td data-sort="{{ item.fields.checked | default(0) | int }}" class="table-td-input">
              <center>{{ form.checkbox('', item.fields.id, item.html_id('checked'), item.url_for_checked(), item.fields.checked | default(false), parent='part', delete=read_only) }}</center>
            </td>
          {% endif %}
          {% if g.login.is_authenticated() and not read_only %}
            {% set show_missing_menu = not config['HIDE_TABLE_MISSING_PARTS'] %}
            {% set show_checked_menu = not config['HIDE_TABLE_CHECKED_PARTS'] %}
            {% set show_quick_add = not config['DISABLE_QUICK_ADD_INDIVIDUAL_PARTS'] and not config['HIDE_INDIVIDUAL_PARTS'] %}
            {% if show_missing_menu or show_checked_menu or show_quick_add %}
              <td class="text-end">
                {% if show_quick_add %}
                  <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                      <i class="ri-more-2-fill"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                      <li>
                        <a class="dropdown-item quick-add-individual-part" href="#"
                           data-part="{{ item.fields.part }}"
                           data-color="{{ item.fields.color }}"
                           data-name="{{ item.fields.name }}"
                           data-color-name="{{ item.fields.color_name }}"
                           data-image="{{ item.url_for_image() }}">
                          <i class="ri-add-line me-2"></i>Add to individual parts
                        </a>
                      </li>
                    </ul>
                  </div>
                {% endif %}
              </td>
            {% endif %}
          {% endif %}
        {% endif %}
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
