{% load i18n humanize %}
{% load industry_tags %}

    <!-- TAB 2: BOM -->
    {% if perms.industry_reforged.industrialist_access or perms.industry_reforged.corp_access %}
    <div class="tab-pane fade" id="bom-pane" role="tabpanel" aria-labelledby="bom-tab" tabindex="0">
        <div class="row">
            <div class="col-12 mb-4">
                <div class="card border-0 h-100">
                    <div class="card-header border-bottom border-secondary bg-dark text-white">
                        <h3 class="card-title mb-0"><i class="fas fa-boxes text-warning me-2"></i> {% trans "Required Raw Materials" %}</h3>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-striped m-0">
                                <thead>
                                    <tr>
                                        <th>{% trans "Material" %}</th>
                                        <th class="text-end">{% trans "Required" %}</th>
                                        <th class="text-end">{% trans "Unit Cost" %}</th>
                                        <th class="text-end">{% trans "Total Cost" %}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for mat in bom_materials %}
                                    <tr>
                                        <td>
                                            <div class="d-flex align-items-center">
                                                <img onerror="this.onerror=function(){this.onerror=null; this.src='https://images.evetech.net/types/3514/icon?size=32';}; this.src='https://images.evetech.net/types/{{ mat.type_id }}/bp?size=32';" src="https://images.evetech.net/types/{{ mat.type_id }}/icon?size=32" alt="{{ mat.name }}" width="24" height="24" class="me-2 rounded">
                                                <span>{{ mat.name }}</span>
                                            </div>
                                        </td>
                                        <td class="text-end numeric fw-bold">{{ mat.quantity|intcomma }}</td>
                                        <td class="text-end numeric">{{ mat.price_per_unit|eve_isk }}</td>
                                        <td class="text-end numeric text-warning">{{ mat.total_price|eve_isk }}</td>
                                    </tr>
                                    {% empty %}
                                    <tr><td colspan="4" class="text-center">No materials required or failed to load SDE data.</td></tr>
                                    {% endfor %}
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <th colspan="3" class="text-end fs-5">{% trans "Estimated Total Materials Cost:" %}</th>
                                        <th class="text-end fs-5 text-warning numeric">{{ total_bom_price|eve_isk }}</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div> <!-- End Row -->
    </div> <!-- End Tab 2 -->
    {% endif %}

    <!-- TAB 3: TREE -->
    {% if perms.industry_reforged.industrialist_access or perms.industry_reforged.corp_access %}
    <div class="tab-pane fade" id="tree-pane" role="tabpanel" aria-labelledby="tree-tab" tabindex="0">
        <div class="row">
            <div class="col-12 mb-4">
                <div class="card border-0 h-100 bg-dark">
                    <div class="card-header border-bottom border-secondary d-flex justify-content-between align-items-center flex-wrap gap-2">
                        <h3 class="card-title text-white mb-0"><i class="fas fa-sitemap me-2 text-info"></i> {% trans "Recursive Production Tree" %}</h3>
                        <div class="d-flex align-items-center gap-2">
                            <input type="text" id="treeSearchInput" class="form-control form-control-sm bg-dark text-white border-secondary" placeholder="{% trans 'Search tree...' %}" onkeyup="filterTreeDelay()" style="width: 200px;">
                            <button class="btn btn-sm btn-outline-light text-nowrap" onclick="toggleAllDrilldowns(this)" data-expanded="false"><i class="fas fa-expand-arrows-alt"></i> {% trans "Expand All" %}</button>
                        </div>
                    </div>
                    <div class="card-body p-4 position-relative" style="max-height: 800px; overflow-y: auto;">
                        <div id="treeLoadingOverlay" class="position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-center align-items-center bg-dark" style="z-index: 10; opacity: 0.9; display: none !important;">
                            <div class="spinner-border text-light mb-2" role="status" style="width: 3rem; height: 3rem;"></div>
                            <h5 class="text-light">{% trans "Processing Tree..." %}</h5>
                        </div>
                        {% if recursive_bom_tree %}
                            {% for root_node in recursive_bom_tree %}
                                <div class="mb-4">
                                    {% include "industry_reforged/partials/bom_tree_node.html" with node=root_node prefix=forloop.counter|stringformat:"s" %}
                                </div>
                            {% endfor %}
                        {% else %}
                            <p class="text-muted">{% trans "No production tree available." %}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}