{% extends "indy_hub/base.html" %}
{% load i18n %}
{% load static %}
{% load humanize %}

{% block page_title %}{% trans "Fulfill Copy Requests" %}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'indy_hub/css/page_headers.css' %}">
<link rel="stylesheet" href="{% static 'indy_hub/css/bp_copy_list.css' %}?v=20260413-2335">
<link rel="stylesheet" href="{% static 'indy_hub/css/chat.css' %}?v=20260418-1100">
<link rel="stylesheet" href="{% static 'indy_hub/css/bp_copy_fulfill_page.css' %}?v=20260428-cost-breakdown-r3">
{% endblock %}

{% block content %}
<div class="container-fluid py-4 fulfill-page fulfill-page--requests" data-auto-open-chat="{{ auto_open_chat_id|default:'' }}">
    <div class="page-header mb-4">
        <i class="fas fa-handshake header-bg"></i>
        <div class="d-flex flex-wrap align-items-center justify-content-between gap-3">
            <div>
                <h2 class="h3 mb-1">
                    <i class="fas fa-handshake me-2"></i>
                    {% trans "Fulfill Copy Requests" %}
                </h2>
                <p class="description mb-0">{% trans "Review outstanding requests, respond with offers, and manage deliveries." %}</p>
            </div>
            <div class="d-flex flex-column align-items-end gap-1">
                {% if perms.indy_hub.can_manage_corp_bp_requests %}
                <a href="{% url 'indy_hub:bp_copy_history' %}" class="btn btn-outline-secondary btn-sm">
                    <i class="fas fa-history me-1"></i>{% trans "History" %}
                </a>
                {% endif %}
                <a href="{% url 'indy_hub:index' %}" class="btn btn-outline-light btn-sm">
                    <i class="fas fa-arrow-left me-1"></i>{% trans "Back to Overview" %}
                </a>
            </div>
        </div>
    </div>

    {% if has_requests %}
    <div class="fulfill-reference-shell" data-fulfill-workspace>

        {# ── Sidebar: request queue ─────────────────────────────── #}
        <aside class="fulfill-reference-sidebar">
            <div class="fulfill-reference-sidebar__panel">
                <div class="fulfill-reference-sidebar__topbar">
                    <span class="fulfill-reference-sidebar__title">{% trans "Requests" %}</span>
                    {% if perms.indy_hub.can_manage_corp_bp_requests %}
                    <a href="{% url 'indy_hub:bp_copy_history' %}" class="btn btn-outline-secondary btn-sm">
                        <i class="fas fa-history me-1"></i>{% trans "History" %}
                    </a>
                    {% endif %}
                </div>

                <div class="fulfill-reference-sidebar__search">
                    <label for="fulfill-request-search" class="visually-hidden">{% trans "Search requests" %}</label>
                    <i class="fas fa-search" aria-hidden="true"></i>
                    <input
                        id="fulfill-request-search"
                        type="search"
                        class="form-control"
                        placeholder="{% trans 'Search requests...' %}"
                        data-fulfill-search
                    >
                </div>

                <form method="get" class="fulfill-reference-sidebar__filters">
                    <select id="bp-copy-filter-status" name="status" class="form-select form-select-sm" onchange="this.form.submit()">
                        <option value="all" {% if active_filter == 'all' %}selected{% endif %}>{% trans "All" %}</option>
                        <option value="awaiting_response" {% if active_filter == 'awaiting_response' %}selected{% endif %}>{% trans "Awaiting response" %}</option>
                        <option value="waiting_on_buyer" {% if active_filter == 'waiting_on_buyer' %}selected{% endif %}>{% trans "Waiting on buyer" %}</option>
                        <option value="waiting_on_you" {% if active_filter == 'waiting_on_you' %}selected{% endif %}>{% trans "Waiting on you" %}</option>
                        <option value="ready_to_deliver" {% if active_filter == 'ready_to_deliver' %}selected{% endif %}>{% trans "Ready to deliver" %}</option>
                        <option value="offer_rejected" {% if active_filter == 'offer_rejected' %}selected{% endif %}>{% trans "Offer rejected" %}</option>
                        {% if include_self_requests %}
                        <option value="self_request" {% if active_filter == 'self_request' %}selected{% endif %}>{% trans "My tracked requests" %}</option>
                        {% endif %}
                    </select>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="bp-copy-filter-self" name="include_self" value="1" {% if include_self_requests %}checked{% endif %} onchange="this.form.submit()">
                        <label class="form-check-label" for="bp-copy-filter-self">{% trans "Include my own requests" %}</label>
                    </div>
                </form>

                <div class="fulfill-reference-sidebar__list" data-fulfill-list>
                    {% for req in requests %}
                    <button
                        type="button"
                        class="fulfill-request-item"
                        data-fulfill-request-item
                        data-request-id="{{ req.id }}"
                        data-chat-id="{% if req.chat %}{{ req.chat.id }}{% endif %}"
                        data-search="{{ req.type_name }} {{ req.requester_character|default:req.requester }} {{ req.requester_corporation|default:'' }} {{ req.requester_bp_source_label }} {{ req.status_label }}"
                        aria-pressed="false"
                    >
                        <div class="fulfill-request-item__icon">
                            <img
                                src="{{ req.icon_url }}"
                                alt="{{ req.type_name }}"
                                loading="lazy"
                                onerror="this.onerror=null;this.src='https://images.evetech.net/types/{{ req.type_id }}/icon?size=64'"
                            >
                        </div>
                        <div class="fulfill-request-item__body">
                            <div class="fulfill-request-item__titles">
                                <h3>{{ req.type_name }}</h3>
                                <p class="fulfill-request-item__requester">{{ req.requester_character|default:req.requester }}</p>
                                <p class="fulfill-request-item__summary">{{ req.copies_requested }}× · {{ req.runs_requested }} {% trans "runs" %}</p>
                            </div>
                            <div class="fulfill-request-item__chips">
                                <span class="fulfill-spec fulfill-spec--me">ME {{ req.material_efficiency }}</span>
                                <span class="fulfill-spec fulfill-spec--te">TE {{ req.time_efficiency }}</span>
                            </div>
                            <div class="fulfill-request-item__footer">
                                <span class="fulfill-status {{ req.status_class }}">{{ req.status_label }}</span>
                                <span class="fulfill-request-item__time">{{ req.created_at|naturaltime }}</span>
                            </div>
                            {% if req.chat and req.chat.has_unread %}
                            <div class="fulfill-request-item__unread">
                                <i class="fas fa-circle fa-xs"></i>{% trans "Unread" %}
                            </div>
                            {% endif %}
                        </div>
                    </button>
                    {% empty %}
                    <div class="fulfill-reference-sidebar__empty">
                        <i class="fas fa-filter me-2"></i>{% trans "No requests match this filter." %}
                    </div>
                    {% endfor %}
                </div>

                <div class="fulfill-reference-sidebar__empty d-none" data-fulfill-search-empty>
                    <i class="fas fa-search me-2"></i>{% trans "No requests match your search." %}
                </div>
            </div>
        </aside>

        {# ── Workbench ───────────────────────────────────────────── #}
        <section class="fulfill-reference-workbench">
            {% for req in requests %}
            <article
                class="fulfill-workbench-panel{% if forloop.first %} is-active{% endif %}"
                data-fulfill-panel="{{ req.id }}"
                data-copy-base-time-seconds="{{ req.copy_base_time_seconds|default:0 }}"
                data-copy-runs-requested="{{ req.runs_requested }}"
                data-copy-copies-requested="{{ req.copies_requested }}"
                {% if not forloop.first %}hidden{% endif %}
            >
                {# Identity header strip #}
                <div class="fwp-header">
                    <div class="fwp-header__brand">
                        <div class="fwp-header__icon">
                            <img
                                src="{{ req.icon_url }}"
                                alt="{{ req.type_name }}"
                                loading="lazy"
                                onerror="this.onerror=null;this.src='https://images.evetech.net/types/{{ req.type_id }}/icon?size=64'"
                            >
                        </div>
                        <div class="fwp-header__identity">
                            <h2>{{ req.type_name }}</h2>
                            <div class="fwp-header__chips">
                                <span class="fulfill-spec fulfill-spec--me">ME {{ req.material_efficiency }}</span>
                                <span class="fulfill-spec fulfill-spec--te">TE {{ req.time_efficiency }}</span>
                                <span class="fulfill-status {{ req.status_class }}">{{ req.status_label }}</span>
                                {% if req.chat and req.chat.has_unread %}
                                <span class="fwp-unread-badge"><i class="fas fa-circle fa-xs me-1"></i>{% trans "Unread" %}</span>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <div class="fwp-header__stats">
                        <div class="fwp-stat">
                            <span>{% trans "Buyer" %}</span>
                            <strong>{{ req.requester_character|default:req.requester }}</strong>
                        </div>
                        <div class="fwp-stat">
                            <span>{% trans "Copies" %}</span>
                            <strong>{{ req.copies_requested }}× · {{ req.runs_requested }} {% trans "runs" %}</strong>
                        </div>
                        <div class="fwp-stat">
                            <span>{% trans "Source" %}</span>
                            <strong>{{ req.requester_bp_source_label }}</strong>
                        </div>
                        <div class="fwp-stat">
                            <span>{% trans "Opened" %}</span>
                            <strong>{{ req.created_at|naturaltime }}</strong>
                        </div>
                    </div>
                </div>

                {# Body: chat (left/center) + panel column (right) #}
                <div class="fwp-body">

                    {# Chat column #}
                    <div class="fwp-chat-col">
                        {% if req.chat %}
                        {% with req_id=req.id|stringformat:"s" %}
                        {% with chat_shell_id="bpChatInline-"|add:req_id chat_input_id="bpChatInput-"|add:req_id %}
                        <button
                            type="button"
                            class="d-none bp-chat-trigger"
                            data-chat-autoload-trigger
                            data-chat-target="{{ chat_shell_id }}"
                            data-chat-fetch-url="{{ req.chat.fetch_url }}"
                            data-chat-send-url="{{ req.chat.send_url }}"
                            data-chat-role="seller"
                            data-chat-type-name="{{ req.type_name }}"
                            data-chat-type-id="{{ req.type_id }}"
                            data-chat-id="{{ req.chat.id }}"
                        ></button>
                        <section
                            class="bp-chat-inline bp-chat-shell fwp-chat-shell"
                            id="{{ chat_shell_id }}"
                            data-chat-modal
                            data-chat-inline
                            data-request-id="{{ req.id }}"
                        >
                            <div class="bp-chat-surface bp-chat-surface--inline">
                                <div class="bp-chat-body">
                                    <div class="bp-chat-summary" data-chat-summary></div>

                                    <div class="alert alert-warning d-none bp-chat-status" role="status" data-chat-status></div>

                                    <div class="bp-chat-auto-refresh-note" role="status">
                                        <i class="fas fa-rotate-right" aria-hidden="true"></i>
                                        <span>{% trans "Conversation auto-refreshes every 10 seconds." %}</span>
                                    </div>

                                    <div class="bp-chat-actions d-none" data-chat-actions>
                                        <div class="bp-chat-proposal">
                                            <div class="bp-chat-proposal__summary">
                                                <div class="bp-chat-proposal__intro">
                                                    <div class="small" data-chat-action-status></div>
                                                    <div class="bp-chat-proposal__hint" data-chat-action-hint></div>
                                                </div>
                                                <div class="bp-chat-proposal__current d-none" data-chat-proposal-current>
                                                    <span class="bp-chat-proposal__label">{% trans "Current proposal" %}</span>
                                                    <strong data-chat-proposal-amount></strong>
                                                </div>
                                            </div>
                                            <form class="bp-chat-proposal-form" data-chat-proposal-form>
                                                <label class="visually-hidden" for="{{ chat_input_id }}Proposal">{% trans "Proposal amount" %}</label>
                                                <div class="input-group input-group-sm">
                                                    <input
                                                        id="{{ chat_input_id }}Proposal"
                                                        type="number"
                                                        min="0"
                                                        step="0.01"
                                                        class="form-control"
                                                        inputmode="decimal"
                                                        placeholder="{% trans 'Enter amount in ISK' %}"
                                                        data-chat-proposal-input
                                                    >
                                                    <span class="input-group-text">ISK</span>
                                                    <button type="submit" class="btn btn-primary" data-chat-proposal-submit>
                                                        <i class="fas fa-coins me-1"></i>{% trans "Send proposal" %}
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>

                                    <div class="bp-chat-message-list" data-chat-messages></div>
                                </div>

                                <div class="bp-chat-footer">
                                    <form class="bp-chat-form" data-chat-form>
                                        {% csrf_token %}
                                        <label for="{{ chat_input_id }}" class="visually-hidden">{% trans "Message" %}</label>
                                        <textarea
                                            id="{{ chat_input_id }}"
                                            class="form-control bp-chat-input"
                                            rows="2"
                                            maxlength="2000"
                                            data-chat-input
                                            placeholder="{% trans 'Type your message...' %}"
                                            required
                                        ></textarea>
                                        <button type="submit" class="btn btn-primary bp-chat-send">
                                            <i class="fas fa-paper-plane"></i>
                                            <span class="d-none d-sm-inline ms-1">{% trans "Send" %}</span>
                                        </button>
                                    </form>
                                </div>
                            </div>
                        </section>
                        {% endwith %}
                        {% endwith %}
                        {% else %}
                        <div class="fwp-chat-empty">
                            <div class="fwp-chat-empty__icon">
                                <i class="fas fa-comments"></i>
                            </div>
                            <p class="fwp-section__eyebrow">{% trans "No thread yet" %}</p>
                            <h3>{% trans "No negotiation started" %}</h3>
                            <p>{% trans "Use the Actions panel to send a proposal. The conversation will appear here." %}</p>
                        </div>
                        {% endif %}
                    </div>{# /fwp-chat-col #}

                    {# Panel column: Actions + Estimates + Availability #}
                    <div class="fwp-panel-col">

                        {# Actions #}
                        <div class="fwp-section fwp-section--actions" data-copy-request-actions data-request-id="{{ req.id }}" data-viewer-role="seller">
                            <div class="fwp-section__head">
                                <h3 class="fwp-section__title">{% trans "Actions" %}</h3>
                            </div>
                            {% if req.status_hint %}
                            <p class="fwp-section__hint">{{ req.status_hint }}</p>
                            {% endif %}
                            <div class="fulfill-reference-actions">
                                <div data-request-offer-actions{% if not req.show_offer_actions %} class="d-none"{% endif %}>
                                <form method="post" action="{% url 'indy_hub:bp_offer_copy_request' req.id %}">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="accept">
                                    <input type="hidden" name="source_scope" value="{{ req.default_scope }}" data-scope-input data-request-id="{{ req.id }}" data-scope-default="{{ req.default_scope }}">
                                    <button type="submit" class="fulfill-btn fulfill-btn--accept" {% if req.has_dual_sources %}data-scope-trigger="true" data-scope-required="true" data-request-id="{{ req.id }}" data-scope-script-id="bp-scope-options-{{ req.id }}" data-scope-action="accept" data-scope-action-label="{% trans 'Accept for free' %}"{% endif %}>
                                        <i class="fas fa-check"></i>{% trans "Accept for free" %}
                                    </button>
                                </form>
                                <form method="post" action="{% url 'indy_hub:bp_offer_copy_request' req.id %}">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="conditional">
                                    <input type="hidden" name="source_scope" value="{{ req.default_scope }}" data-scope-input data-request-id="{{ req.id }}" data-scope-default="{{ req.default_scope }}">
                                    <label class="fwp-section__label-sm" for="proposal-amount-{{ req.id }}">{% trans "Propose amount" %}</label>
                                    <div class="fulfill-offer-bar">
                                        <input
                                            id="proposal-amount-{{ req.id }}"
                                            type="number"
                                            name="proposed_amount"
                                            min="0"
                                            step="0.01"
                                            class="form-control form-control-sm"
                                            inputmode="decimal"
                                            placeholder="{% trans 'Amount in ISK' %}"
                                            required
                                        >
                                        <button type="submit" class="fulfill-btn fulfill-btn--condition" {% if req.has_dual_sources %}data-scope-trigger="true" data-scope-required="true" data-request-id="{{ req.id }}" data-scope-script-id="bp-scope-options-{{ req.id }}" data-scope-action="conditional" data-scope-action-label="{% trans 'Send proposal' %}"{% endif %}>
                                            <i class="fas fa-coins"></i>{% trans "Propose" %}
                                        </button>
                                    </div>
                                </form>
                                <form method="post" action="{% url 'indy_hub:bp_offer_copy_request' req.id %}">
                                    {% csrf_token %}
                                    <input type="hidden" name="action" value="reject">
                                    <input type="hidden" name="source_scope" value="{{ req.default_scope }}" data-scope-input data-request-id="{{ req.id }}" data-scope-default="{{ req.default_scope }}">
                                    <button type="submit" class="fulfill-btn fulfill-btn--decline" onclick="return confirm('{% trans 'Decline this request?' %}')" {% if req.has_dual_sources %}data-scope-trigger="true" data-scope-required="true" data-request-id="{{ req.id }}" data-scope-script-id="bp-scope-options-{{ req.id }}" data-scope-action="reject" data-scope-action-label="{% trans 'Decline' %}"{% endif %}>
                                        <i class="fas fa-times"></i>{% trans "Decline" %}
                                    </button>
                                </form>
                                </div>
                                {% if req.chat.decision_url %}
                                <div data-request-negotiation-actions{% if not req.show_negotiation_actions %} class="d-none"{% endif %}>
                                <div class="fulfill-reference-note{% if not req.negotiation_notice %} d-none{% endif %}" data-request-negotiation-note>
                                    <i class="fas fa-info-circle"></i>
                                    <span data-request-negotiation-note-text>{{ req.negotiation_notice }}</span>
                                </div>
                                <form method="post" action="{{ req.chat.decision_url }}" data-request-accept-form{% if not req.negotiation_can_accept %} class="d-none"{% endif %}>
                                    {% csrf_token %}
                                    <input type="hidden" name="decision" value="accept">
                                    <input type="hidden" name="viewer_role" value="seller">
                                    <input type="hidden" name="next" value="{{ request.get_full_path }}">
                                    <button type="submit" class="fulfill-btn fulfill-btn--accept">
                                        <i class="fas fa-check"></i>{% trans "Confirm amount" %}
                                    </button>
                                </form>
                                <form method="post" action="{{ req.chat.decision_url }}" data-request-decline-form{% if not req.negotiation_can_decline %} class="d-none"{% endif %}>
                                    {% csrf_token %}
                                    <input type="hidden" name="decision" value="reject">
                                    <input type="hidden" name="viewer_role" value="seller">
                                    <input type="hidden" name="next" value="{{ request.get_full_path }}">
                                    <button type="submit" class="fulfill-btn fulfill-btn--decline" onclick="return confirm('{% trans 'Decline this negotiation?' %}')" {% if not req.negotiation_can_decline %}disabled{% endif %}>
                                        <i class="fas fa-times"></i>{% trans "Decline negotiation" %}
                                    </button>
                                </form>
                                </div>
                                {% endif %}
                                {% if req.can_mark_delivered %}
                                <form method="post" action="{% url 'indy_hub:bp_mark_copy_delivered' req.id %}">
                                    {% csrf_token %}
                                    <button type="submit" class="fulfill-btn fulfill-btn--deliver" onclick="return confirm('{% trans 'Mark this request as delivered?' %}')">
                                        <i class="fas fa-truck"></i>{% trans "Mark delivered" %}
                                    </button>
                                </form>
                                {% endif %}
                            </div>
                        </div>{# /fwp-section--actions #}

                        {# Estimates & Setup #}
                        {% if req.copy_structure_options or req.copy_producer_options or req.copy_duration or req.copy_base_time_seconds or req.copy_cost %}
                        <div class="fwp-section fwp-section--estimates">
                            <div class="fwp-section__head">
                                <div>
                                    <p class="fwp-section__eyebrow">{% trans "Planning" %}</p>
                                    <h3 class="fwp-section__title">{% trans "Estimate & Setup" %}</h3>
                                </div>
                                <span class="fwp-section__badge"><i class="fas fa-sliders-h"></i>{% trans "Live" %}</span>
                            </div>
                            <div class="fwp-setup-fields">
                                {% if req.copy_structure_options %}
                                <div class="fwp-setup-field">
                                    <label class="fwp-setup-field__label">
                                        <i class="fas fa-industry"></i><span>{% trans "Copy structure" %}</span>
                                    </label>
                                    <select class="form-select form-select-sm" data-copy-structure-select data-request-id="{{ req.id }}">
                                        {% for option in req.copy_structure_options %}
                                        <option
                                            value="{{ option.id }}"
                                            {% if option.id == req.copy_structure_selected_id %}selected{% endif %}
                                            data-structure-name="{{ option.structure_name }}"
                                            data-solar-system-name="{{ option.solar_system_name|default:'' }}"
                                            data-time-bonus-percent="{{ option.structure_time_bonus_percent }}"
                                            data-total-installation-cost="{{ option.total_installation_cost }}"
                                            data-total-installation-cost-alpha="{{ option.total_installation_cost_alpha }}"
                                            data-per-copy-installation-cost="{{ option.per_copy_installation_cost }}"
                                            data-system-cost-index-percent="{{ option.system_cost_index_percent }}"
                                            data-facility-tax-percent="{{ option.facility_tax_percent }}"
                                            data-scc-surcharge-percent="{{ option.scc_surcharge_percent }}"
                                            data-alpha-clone-tax-percent="{{ option.alpha_clone_tax_percent }}"
                                            data-alpha-clone-tax-total="{{ option.alpha_clone_tax_total }}"
                                            data-job-cost-bonus-percent="{{ option.job_cost_bonus_percent }}"
                                            data-estimated-item-value="{{ option.estimated_item_value }}"
                                            data-uses-fallback-structure="{% if option.uses_fallback_structure %}1{% else %}0{% endif %}"
                                        >{{ option.structure_name }}{% if option.solar_system_name %} · {{ option.solar_system_name }}{% endif %}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                {% endif %}
                                {% if req.copy_producer_options %}
                                <div class="fwp-setup-field">
                                    <label class="fwp-setup-field__label">
                                        <i class="fas fa-user-cog"></i><span>{% trans "Producer character" %}</span>
                                    </label>
                                    <select class="form-select form-select-sm" data-copy-producer-select data-request-id="{{ req.id }}">
                                        {% for option in req.copy_producer_options %}
                                        <option
                                            value="{{ option.id }}"
                                            {% if option.id == req.copy_producer_selected_id %}selected{% endif %}
                                            data-character-time-bonus-percent="{{ option.time_bonus_percent }}"
                                            data-is-alpha-clone="{% if option.is_alpha_clone %}1{% else %}0{% endif %}"
                                        >{{ option.name }} · -{{ option.time_bonus_label }}% · {{ option.available_slots }}/{{ option.total_slots }} {% trans "slots" %}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                {% endif %}
                            </div>
                            <div class="fwp-estimate-row">
                                {% if req.copy_duration or req.copy_base_time_seconds %}
                                <div class="fwp-estimate-card fwp-estimate-card--time">
                                    <span class="fwp-estimate-card__icon"><i class="fas fa-clock"></i></span>
                                    <div>
                                        <p class="fwp-section__eyebrow">{% trans "Time estimate" %}</p>
                                        <strong class="fwp-estimate-card__value" data-copy-duration-total>{% if req.copy_duration %}{{ req.copy_duration.total_duration_display }}{% else %}-{% endif %}</strong>
                                        <p class="fwp-section__hint-sm" data-copy-duration-meta>{% if req.copy_duration %}{{ req.copy_duration.meta_label }}{% else %}{% trans "Copy-time estimate is loading or unavailable yet." %}{% endif %}</p>
                                    </div>
                                </div>
                                {% endif %}
                                {% if req.copy_cost %}
                                {% with req_id_str=req.id|stringformat:"s" %}
                                {% with bd_id="copy-cost-breakdown-"|add:req_id_str %}
                                {{ req.copy_cost.breakdown_payload|json_script:bd_id }}
                                {% for option in req.copy_structure_options %}
                                    {% with opt_id_str=option.id|stringformat:"s" %}
                                    {% with opt_bd_id="copy-cost-breakdown-"|add:req_id_str|add:"-"|add:opt_id_str %}
                                    {{ option.breakdown_payload|json_script:opt_bd_id }}
                                    {% endwith %}
                                    {% endwith %}
                                {% endfor %}
                                <button type="button"
                                        class="fwp-estimate-card fwp-estimate-card--cost fwp-estimate-card--clickable"
                                        data-copy-cost-breakdown-trigger
                                        data-copy-cost-breakdown-id="{{ bd_id }}"
                                        data-copy-cost-breakdown-prefix="copy-cost-breakdown-{{ req_id_str }}-"
                                        data-request-id="{{ req.id }}"
                                        aria-label="{% trans "Show installation cost breakdown" %}">
                                    <span class="fwp-estimate-card__icon"><i class="fas fa-wallet"></i></span>
                                    <div>
                                        <p class="fwp-section__eyebrow">{% trans "Install estimate" %}</p>
                                        <strong class="fwp-estimate-card__value" data-copy-estimate-total>{{ req.copy_cost.total_installation_cost|floatformat:0|intcomma }} ISK</strong>
                                        <p class="fwp-section__hint-sm" data-copy-estimate-structure>{{ req.copy_cost.structure_name }}{% if req.copy_cost.solar_system_name %} · {{ req.copy_cost.solar_system_name }}{% endif %}</p>
                                        <p class="fwp-section__hint-sm" data-copy-estimate-meta>{% blocktrans with index=req.copy_cost.system_cost_index_percent|floatformat:2 tax=req.copy_cost.facility_tax_percent|floatformat:2 surcharge=req.copy_cost.scc_surcharge_percent|floatformat:2 %}SCI {{ index }}% · Tax {{ tax }}% · SCC {{ surcharge }}%{% endblocktrans %}</p>
                                        <span class="fwp-estimate-card__hint"><i class="fas fa-circle-info"></i> {% trans "Click for full breakdown" %}</span>
                                    </div>
                                </button>
                                {% endwith %}
                                {% endwith %}
                                {% endif %}
                            </div>
                        </div>{# /fwp-section--estimates #}
                        {% endif %}

                        {# Availability #}
                        <div class="fwp-section fwp-section--availability">
                            <h3 class="fwp-section__title">{% trans "Availability" %}</h3>
                            <div class="fwp-detail-list">
                                <div class="fwp-detail-row">
                                    <span>{% trans "BP source" %}</span>
                                    <strong>
                                        {% if req.personal_blueprints and req.corporate_blueprints %}{% trans "BP user + BP corp" %}
                                        {% elif req.corporate_blueprints %}{% trans "BP corp" %}
                                        {% else %}{% trans "BP user" %}{% endif %}
                                    </strong>
                                </div>
                                <div class="fwp-detail-row">
                                    <span>{% trans "Available" %}</span>
                                    <strong>{{ req.available_blueprints }}/{{ req.owned_blueprints }} {% trans "originals" %}</strong>
                                </div>
                                <div class="fwp-detail-row">
                                    <span>{% trans "Blocking jobs" %}</span>
                                    <strong>{{ req.active_copy_jobs }}</strong>
                                </div>
                                {% if req.busy_until %}
                                <div class="fwp-detail-row">
                                    <span>{% trans "Busy until" %}</span>
                                    <strong>{{ req.busy_until|date:"Y-m-d H:i" }}</strong>
                                </div>
                                {% endif %}
                            </div>
                            <div class="fwp-tags">
                                {% if req.personal_blueprints %}<span class="fulfill-owner fulfill-owner--personal">{% trans "BP user" %}: {{ req.personal_blueprints }}</span>{% endif %}
                                {% if req.corporate_blueprints %}<span class="fulfill-owner fulfill-owner--corp">{% trans "BP corp" %}: {{ req.corporate_blueprints }}</span>{% endif %}
                            </div>
                            {% if req.personal_source_names or req.corporation_names %}
                            <div class="fwp-tags">
                                {% for name in req.personal_source_names %}<span class="fulfill-owner">{{ name }}</span>{% endfor %}
                                {% for name in req.corporation_names %}<span class="fulfill-owner fulfill-owner--corp">{{ name }}</span>{% endfor %}
                            </div>
                            {% endif %}
                        </div>{# /fwp-section--availability #}

                    </div>{# /fwp-panel-col #}

                </div>{# /fwp-body #}

                {% if req.has_dual_sources %}
                {% with req_id=req.id|stringformat:"s" %}
                {% with scope_script_id="bp-scope-options-"|add:req_id %}
                {{ req.scope_modal_payload|json_script:scope_script_id }}
                {% endwith %}
                {% endwith %}
                {% endif %}

            </article>
            {% empty %}
            <div class="fulfill-reference-empty">
                <i class="fas fa-filter fa-lg mb-2"></i>
                <h3>{% trans "No requests match this filter." %}</h3>
                <p>{% trans "Adjust the selected state or include your own requests to expand the board." %}</p>
            </div>
            {% endfor %}
        </section>{# /fulfill-reference-workbench #}

    </div>{# /fulfill-reference-shell #}
    {% else %}
    <div class="fwp-empty-state">
        <div class="fwp-empty-state__icon"><i class="fas fa-inbox"></i></div>
        <h3>{% trans "No copy requests" %}</h3>
        <p>{% trans "Check back soon for new requests to fulfill." %}</p>
    </div>
    {% endif %}
<div class="modal fade" id="bpScopeSelectModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" data-scope-title data-default-title="{% trans "Select fulfilment source" %}">
                    {% trans "Select fulfilment source" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans "Close" %}"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted mb-3" data-scope-helper data-default-helper="{% trans "Choose whether to fulfil with your character or a corporation blueprint." %}">
                    {% trans "Choose whether to fulfil with your character or a corporation blueprint." %}
                </p>
                <div class="alert alert-warning d-none" data-scope-warning></div>
                <div
                    data-scope-options
                    data-label-character="{% trans "Character" %}"
                    data-label-corporation="{% trans "Corporation" %}"
                    data-badge-you="{% trans "You" %}"
                    data-badge-access="{% trans "Your access" %}"
                    data-warning-message="{% trans "Please select a source before continuing." %}"
                    data-heading-characters="{% trans "Characters" %}"
                    data-heading-corporations="{% trans "Corporations" %}"
                ></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-scope-cancel data-bs-dismiss="modal">
                    {% trans "Cancel" %}
                </button>
                <button type="button" class="btn btn-primary" data-scope-confirm disabled>
                    {% trans "Confirm" %}
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="bpCopyCostBreakdownModal" tabindex="-1" aria-hidden="true"
    data-label-eiv="{% trans "Estimated items value (EIV)" %}"
    data-label-jcb="{% trans "Job cost base (JCB)" %}"
    data-label-sci="{% trans "System cost index" %}"
    data-label-gross-section="{% trans "JOB GROSS COST" %}"
    data-label-gross="{% trans "Total job gross cost" %}"
    data-label-taxes-section="{% trans "TAXES" %}"
    data-label-structure-bonus="{% trans "Structure role bonus" %}"
    data-label-rig-bonus="{% trans "Rig bonus" %}"
    data-label-adjusted="{% trans "Adjusted job cost" %}"
    data-label-facility-tax="{% trans "Facility tax" %}"
    data-label-scc="{% trans "SCC surcharge" %}"
    data-label-alpha-tax="{% trans "Alpha clone tax" %}"
    data-label-total-taxes="{% trans "Total taxes" %}"
    data-label-total-job="{% trans "Total job cost (per copy)" %}"
    data-label-grand-total="{% trans "Total install cost" %}"
    data-label-copy-singular="{% trans "copy" %}"
    data-label-copy-plural="{% trans "copies" %}"
    data-label-runs="{% trans "Runs per copy" %}"
    data-label-copies="{% trans "Copies requested" %}"
    data-label-isk="ISK">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-calculator me-2"></i>{% trans "Installation cost breakdown" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans "Close" %}"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted small mb-2" data-cost-bd-structure></p>
                <p class="text-muted small mb-3" data-cost-bd-context></p>
                <table class="table table-sm fwp-cost-breakdown-table mb-0">
                    <tbody data-cost-bd-rows></tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
                    {% trans "Close" %}
                </button>
            </div>
        </div>
    </div>
</div>
</div>
{% endblock %}

{% block extra_javascript %}
{{ block.super }}
<script>
    window.indyChatDefaults = Object.assign({}, window.indyChatDefaults || {}, {
        viewerRole: 'seller',
        labels: {
            buyer: '{% trans "Buyer" %}',
            seller: '{% trans "Builder" %}',
            system: '{% trans "System" %}',
            you: '{% trans "You" %}'
        }
    });
</script>
<script src="{% static 'indy_hub/js/bp_copy_chat.js' %}?v=20260412-1915"></script>
<script src="{% static 'indy_hub/js/bp_copy_fulfill.js' %}?v=20260428-cost-breakdown-r11"></script>
{% endblock %}