{% extends "industry_reforged/base.html" %}
{% load i18n humanize %}
{% load industry_tags %}

{% block details %}
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'industry_reforged:index' %}">{% trans "Dashboard" %}</a></li>
                    <li class="breadcrumb-item"><a href="{% url 'industry_reforged:director_dashboard' %}">{% trans "Director Control Panel" %}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% trans "Director Configurations" %}</li>
                </ol>
            </nav>
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="mb-0">{% trans "Director Configurations" %}</h2>
                <a href="{% url 'industry_reforged:director_dashboard' %}" class="btn btn-primary"><i class="fas fa-arrow-left"></i> {% trans "Back" %}</a>
            </div>
            <p class="text-muted mt-2">{% trans "Set corporate rules for production, material efficiency, and pricing overrides." %}</p>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-12 text-end">
            <a href="{% url 'industry_reforged:add_corporate_token' %}" class="btn btn-outline-primary me-2"><i class="fas fa-key"></i> {% trans "Grant Corp Token" %}</a>
        </div>
    </div>

    <!-- Nav tabs -->
    <ul class="nav nav-tabs mb-4" id="configTabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="items-tab" data-bs-toggle="tab" data-bs-target="#items" type="button" role="tab" aria-controls="items" aria-selected="true">
                <i class="fas fa-cubes"></i> {% trans "Item Configurations" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="pricing-tab" data-bs-toggle="tab" data-bs-target="#pricing" type="button" role="tab" aria-controls="pricing" aria-selected="false">
                <i class="fas fa-tags"></i> {% trans "Global Pricing" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="discounts-tab" data-bs-toggle="tab" data-bs-target="#discounts" type="button" role="tab" aria-controls="discounts" aria-selected="false">
                <i class="fas fa-percent"></i> {% trans "Type Discounts" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="health-tab" data-bs-toggle="tab" data-bs-target="#health" type="button" role="tab" aria-controls="health" aria-selected="false">
                <i class="fas fa-heartbeat"></i> {% trans "System Health" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="facilities-tab" data-bs-toggle="tab" data-bs-target="#facilities" type="button" role="tab" aria-controls="facilities" aria-selected="false">
                <i class="fas fa-industry"></i> {% trans "Production Facilities" %}
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="locations-tab" data-bs-toggle="tab" data-bs-target="#locations" type="button" role="tab" aria-controls="locations" aria-selected="false">
                <i class="fas fa-map-marker-alt"></i> {% trans "Output Locations" %}
            </button>
        </li>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content" id="configTabsContent">

        <!-- ITEM CONFIGS TAB -->
        <div class="tab-pane fade show active" id="items" role="tabpanel" aria-labelledby="items-tab">
            <div class="card border-0 mb-4 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center bg-light">
                    <h5 class="card-title mb-0"><i class="fas fa-cogs text-primary"></i> {% trans "Specific Item Rules" %}</h5>
                    <a href="{% url 'industry_reforged:director_config_item_add' %}" class="btn btn-sm btn-primary"><i class="fas fa-plus"></i> {% trans "Add Item Rule" %}</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 align-middle" id="itemConfigTable">
                            <thead class="table-dark">
                                <tr>
                                    <th>Corporation</th>
                                    <th>{% translate "Item" %}</th>
                                    <th>BOM Strategy</th>
                                    <th class="text-end">ME/TE</th>
                                    <th class="text-end">Price Override</th>
                                    <th class="text-end">Threshold</th>
                                    <th class="text-center">Auto Produce</th>
                                    <th class="text-center">Excluded?</th>
                                    <th class="text-end">{% translate "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for config in configs %}
                                <tr>
                                    <td class="fw-bold">{{ config.corporation.corporation_name }}</td>
                                    <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/{{ config.item_type.id }}/bp?size=32';" src="https://images.evetech.net/types/{{ config.item_type.id }}/icon?size=32" alt="{{ config.item_type.name }}" width="32" height="32" class="me-3 rounded bg-dark">
                                            <span class="fw-bold">{{ config.item_type.name }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="badge {% if config.build_or_buy == 'BUILD' %}bg-primary{% else %}bg-secondary{% endif %}">
                                            {{ config.get_build_or_buy_display }}
                                        </span>
                                    </td>
                                    <td class="text-end numeric">
                                        {% if config.has_blueprint %}
                                            ME: {{ config.manual_me }}<br>TE: {{ config.manual_te }}<br>Runs: {% if config.max_runs == 0 %}BPO{% else %}{{ config.max_runs }}{% endif %}
                                        {% else %}
                                            <span class="text-muted fst-italic">N/A</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end numeric text-warning fw-bold">{% if config.manual_price %}{{ config.manual_price|eve_isk }}{% else %}<span class="text-muted fw-normal"><em>Auto (ESI Market)</em></span>{% endif %}</td>
                                    <td class="text-end numeric">{{ config.target_threshold|intcomma }}</td>
                                    <td class="text-center">{% if config.auto_produce %}<i class="fas fa-check text-success"></i>{% else %}<i class="fas fa-times text-danger"></i>{% endif %}</td>
                                    <td class="text-center">
                                        {% if config.exclude_from_orders %}
                                        <span class="badge bg-danger" {% if config.exclude_warning_message %}data-bs-toggle="tooltip" title="{{ config.exclude_warning_message }}"{% endif %}>
                                            <i class="fas fa-ban"></i> Excluded
                                        </span>
                                        {% else %}
                                        <span class="text-muted">-</span>
                                        {% endif %}
                                    </td>
                                    <td class="text-end">
                                        <a href="{% url 'industry_reforged:director_config_item_edit' config.id %}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i></a>
                                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal" data-bs-delete-url="{% url 'industry_reforged:director_config_item_delete' config.id %}"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- GLOBAL PRICING TAB -->
        <div class="tab-pane fade" id="pricing" role="tabpanel" aria-labelledby="pricing-tab">

            <div class="card border-0 mb-4 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center bg-light">
                    <h5 class="card-title mb-0"><i class="fas fa-tags text-primary"></i> {% trans "Corporate Pricing Configurations" %}</h5>
                    <a href="{% url 'industry_reforged:director_config_pricing_add' %}" class="btn btn-sm btn-success"><i class="fas fa-plus"></i> {% trans "Add Pricing Config" %}</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 align-middle">
                            <thead class="table-dark">
                                <tr>
                                    <th>{% trans "Corporation" %}</th>
                                    <th class="text-end">{% trans "Default Discount" %}</th>
                                    <th class="text-end">{% trans "Builder Reward" %}</th>
                                    <th class="text-end">{% trans "ME (T1 / T2)" %}</th>
                                    <th class="text-end">{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for p in pricing_configs %}
                                <tr>
                                    <td class="fw-bold">{{ p.corporation.corporation_name }}</td>
                                    <td class="text-end text-success fw-bold">{% if p.default_discount_percent > 0 %}{{ p.default_discount_percent }}% OFF{% else %}0%{% endif %}</td>
                                    <td class="text-end text-warning fw-bold">{{ p.builder_reward_percent }}%</td>
                                    <td class="text-end">{{ p.default_t1_me }} / {{ p.default_t2_me }}</td>
                                    <td class="text-end">
                                        <a href="{% url 'industry_reforged:director_config_pricing_edit' p.id %}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i></a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center text-muted">{% trans "No corporate pricing configurations found." %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- PRICING METHOD AND MARGIN -->
            <div class="card border-0 mb-4 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center bg-light">
                    <h5 class="card-title mb-0"><i class="fas fa-money-bill-wave text-success"></i> {% trans "Pricing Method & Margin" %}</h5>
                    <a href="{% url 'industry_reforged:director_config_pricing_method_add' %}" class="btn btn-sm btn-success"><i class="fas fa-plus"></i> {% trans "Configure Method" %}</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 align-middle">
                            <thead class="table-dark">
                                <tr>
                                    <th>{% trans "Corporation" %}</th>
                                    <th>{% trans "Valuation Method" %}</th>
                                    <th class="text-end">{% trans "Minimum Margin Floor" %}</th>
                                    <th class="text-end">{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for p in corp_pricing_configs %}
                                <tr>
                                    <td class="fw-bold">{{ p.corporation.corporation_name }}</td>
                                    <td><span class="badge bg-secondary">{{ p.get_material_valuation_method_display }}</span></td>
                                    <td class="text-end text-success fw-bold">{{ p.minimum_margin_floor }}%</td>
                                    <td class="text-end">
                                        <a href="{% url 'industry_reforged:director_config_pricing_method_edit' p.id %}" class="btn btn-sm btn-outline-primary" title="{% trans 'Edit' %}"><i class="fas fa-edit"></i></a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center text-muted">{% trans "No pricing method configurations found." %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card border-0 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center bg-light">
                    <h5 class="card-title mb-0"><i class="fas fa-file-invoice-dollar text-primary"></i> {% trans "System Taxes & Fees" %}</h5>
                    <a href="{% url 'industry_reforged:director_config_tax_add' %}" class="btn btn-sm btn-success"><i class="fas fa-plus"></i> {% trans "Add Tax Config" %}</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 align-middle">
                            <thead class="table-dark">
                                <tr>
                                    <th>{% trans "Corporation" %}</th>
                                    <th class="text-end">{% trans "Industry Tax Rate" %}</th>
                                    <th class="text-end">{% trans "Broker Fee Rate" %}</th>
                                    <th class="text-end">{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for t in tax_configs %}
                                <tr>
                                    <td class="fw-bold">{{ t.corporation.corporation_name }}</td>
                                    <td class="text-end">{{ t.industry_tax_rate }}%</td>
                                    <td class="text-end">{{ t.broker_fee_rate }}%</td>
                                    <td class="text-end">
                                        <a href="{% url 'industry_reforged:director_config_tax_edit' t.id %}" class="btn btn-sm btn-outline-primary"><i class="fas fa-edit"></i></a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr><td colspan="4" class="text-center text-muted p-4">{% trans "No tax configurations found." %}</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- TYPE DISCOUNTS TAB -->
        <div class="tab-pane fade" id="discounts" role="tabpanel" aria-labelledby="discounts-tab">
            <div class="card border-0 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center bg-light">
                    <h5 class="card-title mb-0"><i class="fas fa-percent text-success"></i> {% trans "Type Discounts" %}</h5>
                    <a href="{% url 'industry_reforged:director_config_discount_add' %}" class="btn btn-sm btn-success"><i class="fas fa-plus"></i> {% trans "Add Discount" %}</a>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0">
                            <thead>
                                <tr>
                                    <th>{% trans "Corporation" %}</th>
                                    <th>{% trans "Type / Group" %}</th>
                                    <th>{% trans "Rule Type" %}</th>
                                    <th class="text-end">{% trans "Discount %" %}</th>
                                    <th class="text-end">{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for d in type_discounts %}
                                <tr>
                                    <td class="fw-bold">{{ d.config.corporation.corporation_name }}</td>
                                    <td>
                                        {% if d.eve_type %}
                                        <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/{{ d.eve_type.id }}/bp?size=32';" src="https://images.evetech.net/types/{{ d.eve_type.id }}/icon?size=32" alt="{{ d.eve_type.name }}" width="24" height="24" class="me-2 rounded bg-dark">
                                            <span>{{ d.eve_type.name }}</span>
                                        </div>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <span class="badge bg-primary">Specific Type</span>
                                    </td>
                                    <td class="text-end numeric text-success">-{{ d.discount_percent }}%</td>
                                    <td class="text-end">
                                        <a href="{% url 'industry_reforged:director_config_discount_edit' d.id %}" class="btn btn-sm btn-secondary"><i class="fas fa-edit"></i></a>
                                        <button type="button" class="btn btn-sm btn-outline-danger ms-1" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal" data-bs-delete-url="{% url 'industry_reforged:director_config_discount_delete' d.id %}"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center text-muted py-3">{% trans "No specific discounts configured. Everyone pays full price (or markup)." %}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>


        <!-- SYSTEM HEALTH TAB -->
        <div class="tab-pane fade" id="health" role="tabpanel" aria-labelledby="health-tab">
            <div class="card border-0 shadow-sm">
                <div class="card-header bg-light">
                    <h5 class="card-title mb-0"><i class="fas fa-heartbeat text-danger"></i> {% trans "Background Task Logs" %}</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 align-middle">
                            <thead class="table-dark">
                                <tr>
                                    <th>{% trans "Task Name" %}</th>
                                    <th>{% trans "Status" %}</th>
                                    <th>{% trans "Last Run" %}</th>
                                    <th class="text-end">{% trans "Duration" %}</th>
                                    <th>{% trans "Message" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for log in task_logs %}
                                <tr>
                                    <td class="fw-bold">{{ log.task_name }}</td>
                                    <td>
                                        {% if log.status == 'SUCCESS' %}
                                            <span class="badge bg-success">Success</span>
                                        {% elif log.status == 'FAILED' %}
                                            <span class="badge bg-danger">Failed</span>
                                        {% else %}
                                            <span class="badge bg-warning text-dark">{% translate "Running" %}</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ log.last_run|naturaltime }}</td>
                                    <td class="text-end numeric">{{ log.duration_seconds|floatformat:2 }}s</td>
                                    <td>
                                        {% if log.status == 'FAILED' and log.message %}
                                            <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#errorModal{{ log.id }}">
                                                <i class="fas fa-exclamation-triangle"></i> View Error
                                            </button>

                                            <!-- Error Modal -->
                                            <div class="modal fade text-start" id="errorModal{{ log.id }}" tabindex="-1" aria-hidden="true">
                                                <div class="modal-dialog modal-lg modal-dialog-centered">
                                                    <div class="modal-content">
                                                        <div class="modal-header bg-danger text-white">
                                                            <h5 class="modal-title"><i class="fas fa-exclamation-triangle"></i> {% trans "Error Details" %}: {{ log.task_name }}</h5>
                                                            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
                                                        </div>
                                                        <div class="modal-body">
                                                            <pre class="bg-dark text-light p-3 rounded" style="white-space: pre-wrap; word-break: break-all; font-size: 0.85rem;">{{ log.message }}</pre>
                                                        </div>
                                                        <div class="modal-footer">
                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Close" %}</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        {% else %}
                                            <span class="text-muted small">{{ log.message|truncatechars:50 }}</span>
                                        {% endif %}
                                    </td>
                                </tr>
                                {% empty %}
                                <tr><td colspan="5" class="text-center text-muted p-4">{% trans "No tasks have run yet." %}</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- FACILITIES TAB -->
        <div class="tab-pane fade" id="facilities" role="tabpanel" aria-labelledby="facilities-tab">
            <div class="card border-0 mb-4 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center bg-light">
                    <h5 class="card-title mb-0"><i class="fas fa-industry text-primary"></i> {% trans "Production Facilities" %}</h5>
                    <div class="d-flex gap-2">
                        <form method="post" action="{% url 'industry_reforged:director_config_sync_rigs' %}">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-sm btn-outline-primary"><i class="fas fa-sync"></i> {% trans "Sync Rigs from SDE" %}</button>
                        </form>
                        <a href="{% url 'industry_reforged:add_facility' %}" class="btn btn-sm btn-success"><i class="fas fa-plus"></i> {% trans "Add Facility" %}</a>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 align-middle">
                            <thead class="table-dark">
                                <tr>
                                    <th>{% trans "Facility ID" %}</th>
                                    <th>{% trans "Name" %}</th>
                                    <th>{% trans "Type" %}</th>
                                    <th>{% trans "System ID" %}</th>
                                    <th>{% trans "Security Space" %}</th>
                                    <th class="text-center">{% trans "Sync Inventory" %}</th>
                                    <th>{% trans "Rigs Installed" %}</th>
                                    <th class="text-end">{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for facility in facilities %}
                                <tr>
                                    <td><code>{{ facility.facility_id }}</code></td>
                                    <td>
                                        {{ facility.name }}
                                        {% if facility.is_default %}
                                            <span class="badge bg-warning text-dark ms-2" title="{% trans 'Default Facility' %}"><i class="fas fa-star"></i> Default</span>
                                        {% endif %}
                                        {% if facility.is_default_reaction %}
                                            <span class="badge bg-info text-dark ms-1" title="{% trans 'Default Reaction Facility' %}"><i class="fas fa-vial"></i> Reactions</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if facility.type_id %}
                                            <img onerror="this.onerror=null; this.src='https://images.evetech.net/types/35825/icon?size=32';" src="https://images.evetech.net/types/{{ facility.type_id }}/icon?size=32" alt="Type {{ facility.type_id }}" width="24" height="24" class="me-1 rounded bg-dark">
                                            {{ facility.type_name }}
                                        {% else %}
                                            -
                                        {% endif %}
                                    </td>
                                    <td>{{ facility.solar_system_id|default:"-" }}</td>
                                    <td><span class="badge bg-secondary">{{ facility.get_security_space_display }}</span></td>
                                    <td class="text-center">
                                        <form method="post" action="{% url 'industry_reforged:director_config_structure_toggle' facility.facility_id %}" class="d-inline">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm {% if facility.sync_inventory %}btn-success{% else %}btn-outline-secondary{% endif %}" data-bs-toggle="tooltip" title="{% if facility.sync_inventory %}Inventory synced automatically. Click to disable.{% else %}Inventory not synced. Click to enable.{% endif %}">
                                                <i class="fas fa-boxes"></i> {% if facility.sync_inventory %}Enabled{% else %}Disabled{% endif %}
                                            </button>
                                        </form>
                                    </td>
                                    <td>
                                        {% for r in facility.rigs.all %}
                                            <span class="badge bg-info mb-1 text-dark">{{ r.rig.name }}</span><br>
                                        {% empty %}
                                            <span class="text-muted small">None</span>
                                        {% endfor %}
                                    </td>
                                    <td class="text-end">
                                        <a href="{% url 'industry_reforged:edit_facility' facility.facility_id %}" class="btn btn-sm btn-outline-info"><i class="fas fa-edit"></i></a>
                                        <form method="post" action="{% url 'industry_reforged:delete_facility' facility.facility_id %}" class="d-inline require-confirmation" data-action-msg="Are you sure you want to delete {{ facility.name }}?" data-btn-class="btn-danger">
                                            {% csrf_token %}
                                            <button type="submit" class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button>
                                        </form>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr><td colspan="8" class="text-center text-muted p-4">{% trans "No facilities configured." %}</td></tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- LOCATIONS TAB -->
        <div class="tab-pane fade" id="locations" role="tabpanel" aria-labelledby="locations-tab">
            <div class="card border-0 mb-4 shadow-sm">
                <div class="card-header d-flex justify-content-between align-items-center bg-light">
                    <h5 class="card-title mb-0"><i class="fas fa-map-marker-alt text-primary"></i> {% trans "Output Locations" %}</h5>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped table-hover m-0 align-middle">
                            <thead class="table-dark">
                                <tr>
                                    <th>{% trans "Name" %}</th>
                                    <th class="text-end">{% trans "Actions" %}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for loc in output_locations %}
                                <tr>
                                    <td class="fw-bold">{{ loc.name }}</td>
                                    <td class="text-end">
                                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal" data-bs-target="#deleteConfirmModal" data-bs-delete-url="{% url 'industry_reforged:director_config_delete_output_location' loc.id %}"><i class="fas fa-trash"></i></button>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="2" class="text-center text-muted py-3">
                                        {% trans "No output locations configured. You can add them while quoting orders." %}
                                    </td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>

<!-- Generic Delete Confirmation Modal -->
<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title" id="deleteConfirmModalLabel">{% trans "Confirm Deletion" %}</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body">
                {% trans "Are you sure you want to delete this rule? This action cannot be undone." %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
                <a href="#" id="deleteConfirmBtn" class="btn btn-danger">{% trans "Delete" %}</a>
            </div>
        </div>
    </div>
</div>

{% endblock %}


{% block extra_javascript %}
{{ block.super }}
<script>
    document.addEventListener("DOMContentLoaded", function() {
        var deleteModal = document.getElementById('deleteConfirmModal');
        if (deleteModal) {
            deleteModal.addEventListener('show.bs.modal', function (event) {
                var button = event.relatedTarget;
                var deleteUrl = button.getAttribute('data-bs-delete-url');
                var confirmBtn = deleteModal.querySelector('#deleteConfirmBtn');
                confirmBtn.href = deleteUrl;
            });
        }

        // Update the URL hash when a tab is shown
        var tabEls = document.querySelectorAll('button[data-bs-toggle="tab"]');
        tabEls.forEach(function(el) {
            el.addEventListener('shown.bs.tab', function(event) {
                var target = event.target.getAttribute('data-bs-target');
                if(window.history.replaceState) {
                    window.history.replaceState(null, null, target);
                } else {
                    window.location.hash = target;
                }
                sessionStorage.setItem('directorConfigTab', target);
            });
        });

        var hash = window.location.hash || sessionStorage.getItem('directorConfigTab');
        if (hash) {
            var triggerEl = document.querySelector('button[data-bs-target="' + hash + '"]');
            if (triggerEl) {
                triggerEl.click();
            }
        }
        {% if has_failed_tasks %}
        else {
            var triggerEl = document.querySelector('button[data-bs-target="#health"]');
            if (triggerEl) {
                triggerEl.click();
            }
        }
        {% endif %}

        // Initialize DataTables
        $('#itemConfigTable').DataTable({
            "order": [[0, "asc"]],
            "pageLength": 25,
            "columnDefs": [
                { "orderable": false, "targets": [8] }
            ],
            "language": {
                "emptyTable": "{% trans 'No item rules configured. Global defaults apply.' %}"
            }
        });

        // Initialize Tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl)
        });

        // Initialize Popovers
        var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
        var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
            return new bootstrap.Popover(popoverTriggerEl)
        });
    });
</script>
{% endblock %}