{% extends "page.html" %}

{% macro bom_row(bom, depth=0, relation_quantity=None, visited=[]) %}
{% set child_id = 'bom-public-children-' ~ bom.id ~ '-' ~ depth %}
{% set can_expand = bom.children and bom.id not in visited %}
<div class="bom-list-row">
    <div class="bom-list-main {{ 'bom-row-part' if bom.is_part_wrapper else 'bom-row-bom' }} bom-level-{{ [depth, 7]|min }} {{ 'is-expandable' if can_expand else '' }}" style="padding-left: {{ 12 + (depth * 22) }}px;" {% if can_expand %}onclick="toggleBomChildrenForRow(event, '{{ child_id }}')"{% endif %}>
        {% if can_expand %}
        <button class="bom-expand-button" type="button" aria-expanded="false" aria-controls="{{ child_id }}" aria-label="{{ _('Expand BOM') }}"></button>
        {% else %}
        <span class="bom-expand-spacer"></span>
        {% endif %}
        <div class="bom-list-name">
            <i class="bi {{ 'bi-box-fill bom-list-icon-part' if bom.is_part_wrapper else 'bi-table' }} bom-list-icon" aria-hidden="true"></i>
            {% if bom.number %}<span class="bom-list-number">{{ bom.number }}</span>{% endif %}
            <span class="fw-semibold">{{ bom.name }}</span>
            <span class="bom-list-meta">{% if bom.is_part_wrapper %}{{ _('Part') }}{% else %}{{ _('BOM') }}{% endif %}</span>
        </div>
        <div class="bom-list-quantity text-end">
            {% if relation_quantity is not none %}{{ relation_quantity.normalize() }}{% else %}-{% endif %}
        </div>
        <div class="bom-list-cost text-end">
            {{ format_bom_cost(bom) }}
        </div>
        <div class="bom-list-actions">
            {% if bom.is_part_wrapper and bom.component %}
            <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('component_view', uuid=bom.component.uuid) }}" onclick="event.stopPropagation()" title="{{ _('Part details') }}" aria-label="{{ _('Part details') }}"><i class="bi bi-eye"></i></a>
            {% elif not bom.is_part_wrapper %}
            <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('bom_view', bom_id=bom.id) }}" onclick="event.stopPropagation()" title="{{ _('BOM details') }}" aria-label="{{ _('BOM details') }}"><i class="bi bi-eye"></i></a>
            {% if depth == 0 %}
            <a class="btn btn-sm btn-outline-secondary" href="{{ url_for('bom_download', bom_id=bom.id) }}" onclick="event.stopPropagation()" title="{{ _('Download') }}" aria-label="{{ _('Download') }}"><i class="bi bi-download"></i></a>
            {% endif %}
            {% endif %}
        </div>
    </div>
    {% if can_expand %}
    <div id="{{ child_id }}" class="bom-child-list">
        {% set next_visited = visited + [bom.id] %}
        {% for item in bom.children|sort(attribute='position') %}
            {{ bom_row(item.child_bom, depth + 1, item.quantity, next_visited) }}
        {% endfor %}
    </div>
    {% endif %}
</div>
{% endmacro %}

{% block style %}
<style>
.bom-list-scroll {
    min-height: 0;
    overflow: auto;
    background: white;
}

.bom-list-header {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
}

.bom-list-table {
    border-top: 1px solid lightgray;
    border-bottom: 1px solid lightgray;
}

.bom-list-row {
    border-top: 1px solid #e2e6ea;
}

.bom-list-table > .bom-list-row:first-of-type {
    border-top: 0;
}

.bom-list-main {
    display: grid;
    grid-template-columns: 34px minmax(260px, 1fr) 120px 150px 180px;
    align-items: center;
    min-height: 36px;
    gap: 8px;
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 4px;
    cursor: default;
}

.bom-list-main.is-expandable {
    cursor: pointer;
}

.bom-level-0 { background: #f8f9fa; }
.bom-level-1 { background: #eef6ff; }
.bom-level-2 { background: #e3f0ff; }
.bom-level-3 { background: #d8eaff; }
.bom-level-4 { background: #cde4ff; }
.bom-level-5 { background: #c2ddfb; }
.bom-level-6 { background: #b7d6f6; }
.bom-level-7 { background: #accff2; }
.bom-row-bom:hover { background: #dbeafe; }

.bom-list-meta {
    color: #6c757d;
    font-size: 0.9rem;
}

.bom-list-name {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bom-list-icon {
    flex: 0 0 auto;
    color: #042c61;
    font-size: 1rem;
    line-height: 1;
}

.bom-list-icon-part {
    color: #0c58c9;
}

.bom-list-number,
.bom-list-quantity {
    color: #5f6b7a;
    font-size: 0.9rem;
}

.bom-list-cost {
    color: #273648;
    font-size: 0.9rem;
}

.bom-list-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.bom-expand-button,
.bom-expand-spacer {
    width: 30px;
    height: 30px;
}

.bom-expand-button {
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #042c61;
    pointer-events: none;
}

.bom-expand-button::before {
    content: "▸";
    display: inline-block;
    transition: transform 120ms ease;
}

.bom-expand-button[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

.bom-child-list {
    display: none;
}

.bom-child-list.is-open {
    display: block;
}

@media (max-width: 767.98px) {
    .bom-list-main {
        grid-template-columns: 34px minmax(0, 1fr) 80px;
    }

    .bom-list-cost,
    .bom-list-actions {
        grid-column: 2 / -1;
        text-align: right !important;
        justify-content: flex-end;
    }
}
</style>
{% endblock style %}

{% block main_view_content %}
<div class="container-fluid p-0 m-0 d-flex flex-column bom-list-scroll">
    <div class="bom-list-header px-3 py-2">
        <h1 class="mb-0 mt-1" style="font-size: x-large;">{{ _('Bill of Materials') }}</h1>
    </div>
    <p class="pb-2 pt-4 m-0 px-3" style="background-color: white;">{{ ngettext('%(num)s BOM was found.', '%(num)s BOMs were found.', boms|length) }}</p>
    <div class="bom-list-table">
        <div class="bom-list-main fw-semibold" style="background: #ffffff;">
            <span></span>
            <span>{{ _('Name') }}</span>
            <span class="text-end">{{ _('Quantity') }}</span>
            <span class="text-end">{{ _('Total cost') }}</span>
            <span class="text-end">{{ _('Actions') }}</span>
        </div>
        {% for bom in boms %}
            {{ bom_row(bom)|safe }}
        {% else %}
        <div class="p-3 text-muted">{{ _('No BOMs have been created yet.') }}</div>
        {% endfor %}
    </div>
</div>
{% endblock main_view_content %}

{% block script %}
<script>
function toggleBomChildren(button) {
    const row = button.closest(".bom-list-main");
    const target = row ? row.nextElementSibling : null;
    if (!target) {
        return;
    }
    const isOpen = target.classList.toggle("is-open");
    button.setAttribute("aria-expanded", isOpen ? "true" : "false");
}

function toggleBomChildrenForRow(event, childrenId) {
    if (event.target.closest("a, button, form, input, select, textarea")) {
        return;
    }
    const button = event.currentTarget.querySelector(".bom-expand-button");
    if (button) {
        toggleBomChildren(button);
    }
}
</script>
{% endblock script %}