{% load i18n %}
{% load humanize %}
{% load tz %}

        {% if assets_refreshing %}
        <div id="sellAssetsLoadingState" class="d-flex flex-column align-items-center justify-content-center py-5">
            <svg width="56" height="56" viewBox="0 0 24 24" aria-hidden="true" class="text-info">
                <g stroke="currentColor" fill="none" stroke-width="1" stroke-linecap="round">
                    <circle cx="12" cy="12" r="10">
                        <animate attributeName="stroke-dasharray" dur="1.5s" calcMode="spline" values="0 150;42 150;42 150;42 150" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite" />
                        <animate attributeName="stroke-dashoffset" dur="1.5s" calcMode="spline" values="0;-16;-59;-59" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite" />
                    </circle>
                    <animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite" />
                </g>
            </svg>
            <div class="mt-3 text-muted">{% trans "Loading your asset inventory." %}</div>
        </div>
        {% endif %}

        <div class="{% if assets_refreshing %}d-none{% endif %}">
            <div class="me-info-bar" role="status">
                <i class="fas fa-clock" aria-hidden="true"></i>
                <div class="me-info-bar-body">
                    <div class="me-info-bar-title">
                        <div class="me-info-bar-title-main">
                            {% trans "Last update" %}:
                            {% if sell_last_update %}
                                {% with sell_utc=sell_last_update|timezone:"UTC" %}
                                    {{ sell_utc|date:"Y-m-d H:i" }} EVE
                                    <span class="text-muted">
                                        / <span class="js-local-time" data-utc="{{ sell_utc|date:'c' }}">{{ sell_utc|date:"Y-m-d H:i" }}</span> {% trans "Local" %}
                                    </span>
                                {% endwith %}
                            {% else %}
                                {% trans "Never" %}
                            {% endif %}
                            {% if sell_assets_stale or sell_assets_version_refresh %}
                                <span class="badge rounded-pill text-bg-warning ms-2">{% trans "Update recommended" %}</span>
                            {% else %}
                                <span class="badge rounded-pill text-bg-success ms-2">{% trans "Up to date" %}</span>
                            {% endif %}
                        </div>
                        <button
                            type="button"
                            class="btn {% if assets_refreshing or sell_assets_refresh_blocked %}btn-warning text-white{% else %}btn-success text-white{% endif %} btn-sm d-inline-flex align-items-center gap-1 me-info-bar-refresh-btn"
                            id="sellAssetsRefreshButton"
                            data-refresh-blocked="{% if sell_assets_refresh_blocked %}1{% else %}0{% endif %}"
                            data-cooldown-seconds="{{ sell_assets_refresh_cooldown_seconds|default:0 }}"
                            data-label-default="{% trans 'Assets update' %}"
                            data-label-cooldown-prefix="{% trans 'Assets update in' %}"
                            data-class-blocked="btn-warning"
                            data-class-available="btn-success"
                            data-text-blocked="text-white"
                            data-text-available="text-white"
                            {% if assets_refreshing or sell_assets_refresh_blocked %}disabled{% endif %}>
                            <i id="sellAssetsRefreshButtonIcon" class="fas fa-sync-alt{% if assets_refreshing %} fa-spin{% endif %} text-white" aria-hidden="true"></i>
                            <span id="sellAssetsRefreshButtonLabel">
                                {% if sell_assets_refresh_blocked and sell_assets_refresh_cooldown_minutes %}
                                    {% blocktrans with minutes=sell_assets_refresh_cooldown_minutes %}Assets update in {{ minutes }} min{% endblocktrans %}
                                {% else %}
                                    {% trans "Assets update" %}
                                {% endif %}
                            </span>
                        </button>
                    </div>
                    <div class="me-info-bar-sub">
                        {% if sell_assets_stale and sell_last_update %}
                            {% trans "Asset data is older than 60 minutes. A manual update is recommended before relying on character-owned quantities." %}
                        {% elif sell_assets_version_refresh %}
                            {% trans "A manual assets update is recommended to refresh cached data for the current app version." %}
                        {% elif not sell_last_update %}
                            {% trans "No cached asset snapshot yet. Use Assets update if you want the manual character inventory view." %}
                        {% else %}
                            {% trans "Asset refresh is manual on this page. Use Paste import for the contract-first workflow, or update assets when you want the manual inventory view." %}
                        {% endif %}
                    </div>
                </div>
            </div>

            <div class="me-instruction-chip" role="status">
                <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
                <div>
                    <div class="me-instruction-title">{% trans "Choose how you want to build your sell order." %}</div>
                    <div class="me-instruction-sub">{% trans "Use the standard quantity table or paste an in-game copied item list." %}</div>
                </div>
            </div>

            {% if sell_assets_progress.error == "missing_assets_scope" %}
            <div class="glass-panel p-4 mb-4">
                <div class="alert alert-danger mt-3 mb-0">
                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
                        <div>
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            {% trans "Missing assets token: add the ESI assets scope to load your assets." %}
                        </div>
                        <a class="btn btn-outline-light btn-sm" href="{% url 'indy_hub:authorize_assets' %}?next={{ request.get_full_path|urlencode }}">
                            <i class="fas fa-key me-1"></i>{% trans "Add assets token" %}
                        </a>
                    </div>
                </div>
            </div>
            {% endif %}

            {% if sell_assets_progress.error == "esi_down" %}
            <div class="alert alert-warning d-flex align-items-start gap-2 mb-3" role="status">
                <i class="fas fa-cloud-bolt mt-1" aria-hidden="true"></i>
                <div>
                    <div class="fw-semibold">{% trans "ESI is temporarily unavailable. Using cached assets." %}</div>
                    {% if sell_assets_progress.retry_after_minutes %}
                    <small class="text-muted">
                        {% blocktrans with minutes=sell_assets_progress.retry_after_minutes %}Retry in about {{ minutes }} minute(s).{% endblocktrans %}
                    </small>
                    {% endif %}
                </div>
            </div>
            {% endif %}

            {% if sell_assets_progress.error == "no_assets_fetched" %}
            <div class="alert alert-warning d-flex align-items-start gap-2 mb-3" role="status">
                <i class="fas fa-info-circle mt-1" aria-hidden="true"></i>
                <div>
                    <div class="fw-semibold">{% trans "Assets refresh completed, but no items were returned." %}</div>
                    <small class="text-muted">{% trans "Try again later or verify your assets scope." %}</small>
                </div>
            </div>
            {% endif %}
        </div>

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="glass-panel p-4">
                    <h5 class="mb-4">
                        <i class="fas fa-warehouse me-2"></i>
                        {% trans "Your Materials at" %} {{ accepted_location_summary|default:config.structure_name }}
                    </h5>
                    {% if character_tabs %}
                    <div class="me-character-tabs mb-3">
                        {% if character_tabs|length > 1 %}
                        <div class="d-flex flex-wrap align-items-center gap-3 p-3 rounded-3 bg-body-tertiary border">
                            <img
                                src="{% if active_character_tab_data %}{{ active_character_tab_data.portrait_url }}{% else %}https://images.evetech.net/characters/{{ character_tabs.0.id }}/portrait?size=128{% endif %}"
                                alt="{% if active_character_tab_data %}{{ active_character_tab_data.name }}{% else %}{{ character_tabs.0.name }}{% endif %}"
                                class="rounded-circle flex-shrink-0"
                                width="64"
                                height="64">
                            <div class="flex-grow-1">
                                <div class="small text-body-secondary">{% trans "Selected character" %}</div>
                                <div class="h5 mb-0 text-body d-flex align-items-center gap-2 flex-wrap">
                                    <span>{% if active_character_tab_data %}{{ active_character_tab_data.name }}{% else %}{{ character_tabs.0.name }}{% endif %}</span>
                                    <span class="badge rounded-pill bg-secondary">{% if active_character_tab_data %}{{ active_character_tab_data.item_count }}{% else %}{{ character_tabs.0.item_count }}{% endif %}</span>
                                </div>
                            </div>
                            <div class="ms-auto w-100 w-md-auto">
                                <label for="sellCharacterSelect" class="form-label small text-body-secondary mb-1">{% trans "Switch character" %}</label>
                                <div class="input-group input-group-sm">
                                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    <select
                                        id="sellCharacterSelect"
                                        class="form-select"
                                        aria-label="{% trans 'Select character' %}">
                                        {% for tab in character_tabs %}
                                        <option value="{{ tab.url }}" {% if active_character_tab == tab.id %}selected{% endif %}>
                                            {{ tab.name }} ({{ tab.item_count }})
                                        </option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                        {% else %}
                        <ul class="nav nav-pills flex-wrap gap-2">
                            {% for tab in character_tabs %}
                            <li class="nav-item">
                                <a class="nav-link {% if active_character_tab == tab.id %}active{% endif %}" href="{{ tab.url }}">
                                    {{ tab.name }}
                                    <span class="badge rounded-pill bg-secondary ms-1">{{ tab.item_count }}</span>
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                        {% endif %}
                    </div>
                    {% endif %}
                    <form method="post" id="sellForm">
                        {% csrf_token %}
                        <input type="hidden" name="sell_input_mode" id="sellInputModeField" value="manual">
                        <input type="hidden" name="character_id" value="{{ active_character_tab|default:'' }}">
                        <input type="hidden" name="paste_quantities_json" id="sellPasteQuantitiesJson" value="">

                        <div class="me-sell-mode-switch mb-4" role="radiogroup" aria-label="{% trans 'Sell order input mode' %}">
                            <label class="me-sell-mode-option" for="sellInputModeManual">
                                <input class="form-check-input" type="radio" name="sellInputModeSelector" id="sellInputModeManual" value="manual" checked>
                                <span>
                                    <strong>{% trans "Manual selection" %}</strong>
                                    <small>{% trans "Pick quantities directly from your visible assets." %}</small>
                                </span>
                            </label>
                            <label class="me-sell-mode-option" for="sellInputModePaste">
                                <input class="form-check-input" type="radio" name="sellInputModeSelector" id="sellInputModePaste" value="paste">
                                <span>
                                    <strong>{% trans "Paste import" %}</strong>
                                    <small>{% trans "Paste an in-game list and let the page classify it." %}</small>
                                </span>
                            </label>
                        </div>

                        <div class="me-paste-panel d-none mb-4" data-sell-mode-panel="paste">
                            <div class="me-paste-toolbar">
                                <div class="me-paste-toolbar-title-wrap">
                                    <div class="me-paste-toolbar-title">
                                        <i class="fas fa-paste" aria-hidden="true"></i>
                                        <span>{% trans "Paste Import" %}</span>
                                    </div>
                                    <div class="me-paste-toolbar-subtitle">{% trans "Paste an in-game copied list. The system classifies lines and prepares accepted items for contract validation." %}</div>
                                </div>
                                <div class="me-paste-toolbar-tags" aria-label="{% trans 'Supported formats' %}">
                                    <span class="badge rounded-pill text-bg-light border">{% trans "Name x Quantity" %}</span>
                                    <span class="badge rounded-pill text-bg-light border">{% trans "Name<TAB>Quantity" %}</span>
                                    <span class="badge rounded-pill text-bg-light border">{% trans "Qty Name" %}</span>
                                </div>
                            </div>

                            <div class="row g-3">
                                <div class="col-12">
                                    <label class="form-label fw-semibold mb-2" for="sellPasteTextarea">{% trans "Pasted lines" %}</label>
                                    <textarea
                                        class="form-control me-paste-textarea"
                                        id="sellPasteTextarea"
                                        rows="7"
                                        placeholder="{% trans 'Example: Tritanium x 25000 or Tritanium<TAB>25000' %}"></textarea>
                                    <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mt-2">
                                        <div class="form-text me-0">
                                            {% trans "Accepted items are added automatically. Not bought, unpriced, and unknown lines are ignored for order creation." %}
                                        </div>
                                        <button type="button" class="btn btn-outline-light btn-sm me-paste-clear-btn" id="sellPasteClearButton">
                                            <i class="fas fa-eraser me-1"></i>{% trans "Clear" %}
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="me-paste-results d-none" id="sellPasteResults">
                                <div class="me-paste-tabs d-none" id="sellPasteTabs" role="tablist" aria-label="{% trans 'Paste result categories' %}">
                                    <button
                                        type="button"
                                        class="me-paste-tab-btn"
                                        id="sellPasteTabAccepted"
                                        data-sell-paste-tab="accepted"
                                        role="tab"
                                        aria-selected="false">
                                        <span>{% trans "Accepted items" %}</span>
                                        <span class="badge rounded-pill text-bg-success me-paste-tab-count" id="sellPasteAcceptedBadge">0</span>
                                    </button>
                                    <button
                                        type="button"
                                        class="me-paste-tab-btn"
                                        id="sellPasteTabRejected"
                                        data-sell-paste-tab="rejected"
                                        role="tab"
                                        aria-selected="false">
                                        <span>{% trans "Not bought by the hub" %}</span>
                                        <span class="badge rounded-pill text-bg-warning text-dark me-paste-tab-count" id="sellPasteRejectedBadge">0</span>
                                    </button>
                                    <button
                                        type="button"
                                        class="me-paste-tab-btn"
                                        id="sellPasteTabNoPrice"
                                        data-sell-paste-tab="no_price"
                                        role="tab"
                                        aria-selected="false">
                                        <span>{% trans "Recognized, price unavailable" %}</span>
                                        <span class="badge rounded-pill text-bg-danger me-paste-tab-count" id="sellPasteNoPriceBadge">0</span>
                                    </button>
                                    <button
                                        type="button"
                                        class="me-paste-tab-btn"
                                        id="sellPasteTabUnavailable"
                                        data-sell-paste-tab="unavailable"
                                        role="tab"
                                        aria-selected="false">
                                        <span>{% trans "Known but not on this character" %}</span>
                                        <span class="badge rounded-pill text-bg-info me-paste-tab-count" id="sellPasteUnavailableBadge">0</span>
                                    </button>
                                    <button
                                        type="button"
                                        class="me-paste-tab-btn"
                                        id="sellPasteTabUnknown"
                                        data-sell-paste-tab="unknown"
                                        role="tab"
                                        aria-selected="false">
                                        <span>{% trans "Unknown items or lines" %}</span>
                                        <span class="badge rounded-pill text-bg-secondary me-paste-tab-count" id="sellPasteUnknownBadge">0</span>
                                    </button>
                                </div>

                                <div class="me-paste-results-grid" id="sellPasteResultsGrid">
                                    <section class="me-paste-result-card me-paste-result-card-accepted d-none" id="sellPasteAcceptedCard" data-sell-paste-pane="accepted" role="tabpanel">
                                        <div class="me-paste-result-list" id="sellPasteAcceptedList"></div>
                                    </section>
                                    <section class="me-paste-result-card me-paste-result-card-rejected d-none" id="sellPasteRejectedCard" data-sell-paste-pane="rejected" role="tabpanel">
                                        <div class="me-paste-result-list" id="sellPasteRejectedList"></div>
                                    </section>
                                    <section class="me-paste-result-card me-paste-result-card-rejected d-none" id="sellPasteNoPriceCard" data-sell-paste-pane="no_price" role="tabpanel">
                                        <div class="me-paste-result-list" id="sellPasteNoPriceList"></div>
                                    </section>
                                    <section class="me-paste-result-card me-paste-result-card-unavailable d-none" id="sellPasteUnavailableCard" data-sell-paste-pane="unavailable" role="tabpanel">
                                        <div class="me-paste-result-list" id="sellPasteUnavailableList"></div>
                                    </section>
                                    <section class="me-paste-result-card me-paste-result-card-unknown d-none" id="sellPasteUnknownCard" data-sell-paste-pane="unknown" role="tabpanel">
                                        <div class="me-paste-result-list" id="sellPasteUnknownList"></div>
                                    </section>
                                </div>
                            </div>

                        </div>

                        <div data-sell-mode-panel="manual">
                            {% if materials %}
                            <div class="d-flex flex-column flex-xl-row align-items-xl-center justify-content-between gap-3 mb-3">
                                <div class="d-flex align-items-stretch gap-3 flex-grow-1">
                                    <div class="d-flex flex-column justify-content-center" role="radiogroup" aria-label="{% trans 'Search mode' %}">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="sellSearchMode" id="sellSearchModeItem" value="item" checked>
                                            <label class="form-check-label" for="sellSearchModeItem">{% trans "Item" %}</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="sellSearchMode" id="sellSearchModeCategory" value="category">
                                            <label class="form-check-label" for="sellSearchModeCategory">{% trans "Category" %}</label>
                                        </div>
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                                        <input
                                            type="text"
                                            id="sellSearchInput"
                                            class="form-control"
                                            placeholder="{% trans 'Search by item or category' %}"
                                            aria-label="{% trans 'Search by item or category' %}">
                                    </div>
                                </div>
                                <div class="d-flex flex-wrap justify-content-xl-end gap-2">
                                    <button
                                        type="button"
                                        class="btn btn-outline-secondary btn-sm qty-bulk-btn"
                                        id="sellBulkClearVisible"
                                        data-action="clear-visible">
                                        <i class="fas fa-eraser me-1"></i>{% trans "Clear visible" %}
                                    </button>
                                    <button
                                        type="button"
                                        class="btn btn-success btn-sm qty-bulk-btn"
                                        id="sellBulkMaxVisible"
                                        data-action="max-visible">
                                        <i class="fas fa-layer-group me-1"></i>{% trans "Max visible" %}
                                    </button>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-hover stock-table align-middle">
                                    <thead>
                                        <tr>
                                            <th class="stock-col-icon"></th>
                                            <th>{% trans "Item" %}</th>
                                            <th class="text-end">{% trans "You Own" %}</th>
                                            <th class="text-end">{% trans "Unit Price" %}</th>
                                            <th class="text-center stock-col-qty">{% trans "Quantity" %}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {% for item in materials %}
                                        <tr class="stock-row"
                                            data-type-id="{{ item.type_id }}"
                                            data-type-name="{{ item.type_name }}"
                                            data-group-name="{{ item.group_name|default:'' }}"
                                            data-unit-price="{{ item.buy_price_from_member|floatformat:2 }}"
                                            data-max-qty="{{ item.available_quantity|default:item.user_quantity }}">
                                            <td>
                                                <img
                                                    src="{{ item.image_url }}"
                                                    alt="{{ item.type_name }}"
                                                    class="item-icon"
                                                    loading="lazy"
                                                    onerror="this.onerror=null;this.style.display='none';if(this.nextElementSibling){this.nextElementSibling.classList.remove('d-none');}">
                                                <span class="item-icon d-none d-inline-flex align-items-center justify-content-center bg-body-tertiary text-body-secondary">
                                                    <i class="fas fa-cube" aria-hidden="true"></i>
                                                </span>
                                            </td>
                                            <td>
                                                <div class="fw-semibold text-body">{{ item.type_name }}</div>
                                                <div class="small text-body-secondary">{{ item.group_name|default:_('Other') }}</div>
                                            </td>
                                            <td class="text-end">
                                                <div class="d-flex flex-column align-items-end gap-1">
                                                    <span class="badge bg-success">{{ item.available_quantity|default:item.user_quantity|intcomma }}</span>
                                                    {% if item.reserved_quantity|default:0 > 0 %}
                                                    <small class="text-danger text-end d-block">{% trans "Reserved" %} {{ item.reserved_quantity|default:0|intcomma }}</small>
                                                    {% endif %}
                                                    <small class="text-muted text-end d-block">{% trans "Total" %} {{ item.total_quantity|default:item.user_quantity|intcomma }}</small>
                                                </div>
                                            </td>
                                            <td class="text-end text-success fw-semibold">
                                                {{ item.buy_price_from_member|floatformat:2|intcomma }} ISK
                                            </td>
                                            <td class="text-center">
                                                <div class="qty-cell">
                                                    <div class="qty-input-row">
                                                        <input
                                                            type="number"
                                                            name="qty_{{ item.type_id }}"
                                                            id="qty-{{ item.type_id }}"
                                                            class="form-control qty-input"
                                                            min="0"
                                                            max="{{ item.available_quantity|default:item.user_quantity }}"
                                                            value="0"
                                                            data-type-id="{{ item.type_id }}"
                                                                data-max="{{ item.available_quantity|default:item.user_quantity }}">
                                                        <div class="qty-btns" role="group" aria-label="{% trans 'Quantity shortcuts' %}">
                                                            <button type="button" class="btn btn-secondary btn-sm qty-btn" data-action="zero" title="{% trans 'Zero' %}" aria-label="{% trans 'Zero' %}">
                                                                <i class="fas fa-ban" aria-hidden="true"></i>
                                                            </button>
                                                            <button type="button" class="btn btn-secondary btn-sm qty-btn" data-action="max">{% trans "Max" %}</button>
                                                        </div>
                                                    </div>
                                                    <div class="qty-error" id="error-{{ item.type_id }}">
                                                        {% trans "Max:" %} {{ item.available_quantity|default:item.user_quantity|intcomma }}
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                            {% if sell_is_paginated %}
                            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center gap-3 mt-3">
                                <div class="d-flex align-items-center gap-2 small text-body-secondary">
                                    <span>
                                        {% blocktrans with current=sell_page_obj.number total=sell_page_obj.paginator.num_pages count=sell_page_obj.paginator.count %}Page {{ current }} of {{ total }} · {{ count }} items{% endblocktrans %}
                                    </span>
                                    <form method="get" class="d-flex align-items-center gap-2 ms-md-2">
                                        {% if active_character_tab %}
                                        <input type="hidden" name="character" value="{{ active_character_tab }}">
                                        {% endif %}
                                        <input type="hidden" name="page" value="1">
                                        <label for="sellPerPageSelect" class="small text-body-secondary mb-0">{% trans "Rows" %}</label>
                                        <select
                                            id="sellPerPageSelect"
                                            name="per_page"
                                            class="form-select form-select-sm"
                                            onchange="this.form.submit()">
                                            {% for option in sell_per_page_options %}
                                            <option value="{{ option }}" {% if sell_per_page == option %}selected{% endif %}>{{ option }}</option>
                                            {% endfor %}
                                        </select>
                                    </form>
                                </div>
                                <ul class="pagination pagination-sm mb-0">
                                    {% if sell_page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page=1&per_page={{ sell_per_page }}{% if active_character_tab %}&character={{ active_character_tab }}{% endif %}">{% trans "First" %}</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ sell_page_obj.previous_page_number }}&per_page={{ sell_per_page }}{% if active_character_tab %}&character={{ active_character_tab }}{% endif %}">{% trans "Previous" %}</a>
                                    </li>
                                    {% endif %}
                                    <li class="page-item disabled">
                                        <span class="page-link">{% trans "Page" %} {{ sell_page_obj.number }} / {{ sell_page_obj.paginator.num_pages }}</span>
                                    </li>
                                    {% if sell_page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ sell_page_obj.next_page_number }}&per_page={{ sell_per_page }}{% if active_character_tab %}&character={{ active_character_tab }}{% endif %}">{% trans "Next" %}</a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ sell_page_obj.paginator.num_pages }}&per_page={{ sell_per_page }}{% if active_character_tab %}&character={{ active_character_tab }}{% endif %}">{% trans "Last" %}</a>
                                    </li>
                                    {% endif %}
                                </ul>
                            </div>
                            {% endif %}
                            <div id="sellSearchEmpty" class="alert alert-warning mt-3 d-none mb-0">
                                <i class="fas fa-search me-2"></i>
                                {% trans "No matching items for your search." %}
                            </div>
                            {% else %}
                            <div class="alert alert-warning mb-0">
                                <i class="fas fa-exclamation-triangle me-2"></i>
                                {% trans "No accepted items are currently available for manual selection on this character." %}
                            </div>
                            {% endif %}
                        </div>
                    </form>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="invoice-panel">
                    <div class="glass-panel p-4">
                        <h5 class="mb-3">
                            <i class="fas fa-receipt me-2"></i>{% trans "Sell Summary" %}
                        </h5>
                        <div id="invoiceContent">
                            <div class="empty-invoice">
                                <i class="fas fa-hand-holding-usd fa-3x mb-3 opacity-25"></i>
                                <p class="mb-0">{% trans "Enter quantities to see your payout" %}</p>
                            </div>
                        </div>
                        <div id="invoiceItems" class="d-none">
                            <div id="itemsList"></div>
                            <div class="invoice-total">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <span class="fw-bold">{% trans "Total Payout" %}</span>
                                    <span class="h4 mb-0 text-success" id="totalAmount">0 ISK</span>
                                </div>
                                <button type="submit" form="sellForm" class="btn btn-success w-100 mt-3">
                                    <i class="fas fa-paper-plane me-2"></i>{% trans "Create Sell Order" %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    {{ sell_paste_catalog|json_script:"sellPasteCatalogData" }}