{% extends "base.html" %}
{% block title %}{{ lot.lot_name }}{% if lot.ended %} (Ended){% endif %}{% endblock %}
{% load static %}
{% load webpush_notifications %}
{% load currency_filters %}
{% block extra_head %}
    {% comment %}
    webpush.js dereferences the subscribe button on load, so only load it when the button is
    actually rendered -- app users and the app's own WebView never get the button.
    {% endcomment %}
    {% if push_notifications_possible and can_subscribe_to_webpush %}{% webpush_header %}{% endif %}
{% endblock %}
{% block extra_css %}
<link rel="stylesheet" type="text/css" href="{% static 'css/lot.css' %}">
{% endblock %}
{% block extra_js %}

<script type="text/javascript">

{% if offer_push_prompt %}
// In-person auction, still running, and this user isn't already set up for the "your lot is selling
// now" push: ask the app to offer notifications. The app decides how (a soft banner) and shows it at
// most once per device, so this fires on every eligible lot page and is usually a no-op. Guarded on
// the bridge because nothing outside the app registers these handlers.
document.addEventListener('DOMContentLoaded', function () {
    if (window.flutter_inappwebview && window.flutter_inappwebview.callHandler) {
        window.flutter_inappwebview.callHandler('pushPromptOffer', 'lot_selling_soon');
    }
});
{% endif %}

{% if bids %}
// Configure dropdown to use fixed positioning to escape overflow container
document.addEventListener('DOMContentLoaded', function() {
    var dropdownButton = document.getElementById('btnGroupDrop1');
    if (dropdownButton) {
        dropdownButton.addEventListener('show.bs.dropdown', function (event) {
            // Find the dropdown menu (next sibling element)
            var dropdownMenu = this.nextElementSibling;
            var button = this;
            if (dropdownMenu && dropdownMenu.classList.contains('dropdown-menu')) {
                // Use setTimeout to ensure Bootstrap has initialized the dropdown first
                setTimeout(function() {
                    // Get button position at time of positioning
                    var buttonRect = button.getBoundingClientRect();
                    // Position dropdown below button using fixed positioning
                    dropdownMenu.style.position = 'fixed';
                    dropdownMenu.style.top = (buttonRect.bottom + 2) + 'px';
                    dropdownMenu.style.left = buttonRect.left + 'px';
                    dropdownMenu.style.zIndex = '1050';
                    dropdownMenu.style.transform = 'none';
                }, 0);
            }
        });
    }
});
{% endif %}

$( "#buy-now" ).click(function() {
    $('#bid_amount').val(Number('{{ lot.buy_now_price }}'));
    $('#bid_button').click();
});

function deactivate_lot() {
  var $ = window.jQuery;
  var confirmed = true;
  {% if not lot.deactivated %}
  confirmed = confirm("Remove all bids and deactivate this lot?");
  {% endif %}
    if (confirmed) {
        $.ajax({
                type: "POST",
                beforeSend: function (request) {
                    request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
                },
                url: "/api/lots/deactivate/{{lot.pk}}/",
                success : function(result) {
                    window.location.reload(true);
                }
            });
    }
}
</script>
<style>
    #watch:hover {
        cursor: pointer;
    }
</style>
<script type="text/javascript">
    {% if only_whole_dollar_bids %}
    function next_bid(amount) {
        console.log(amount);
        console.log(amount * 0.05 | 0);
        return amount + ((amount * 0.05 | 0) || 1);
    }
    {% else %}
    function next_bid(amount) {
        var increment = Math.max(Math.floor(amount * 0.05 * 100) / 100, 0.01);
        return Math.round((amount + increment) * 100) / 100;
    }
    {% endif %}
    var removeDot;
    var originalTitle = "";
    window.onload = function() {
    var $ = window.jQuery;
    originalTitle = $(document).prop('title');
    // Localize the initial "Ends:" value to the browser's timezone. The server renders it in a
    // fallback timezone (America/New_York) until the tz cookie is set, which made this look hours
    // off from the tiles and the live websocket update. The server string stays as a no-JS fallback.
    var endDateEl = document.getElementById('end_date');
    if (endDateEl) {
        var endIso = endDateEl.getAttribute('data-end-iso');
        if (endIso) {
            var endLocal = new Date(endIso);
            if (!isNaN(endLocal.getTime())) {
                endDateEl.textContent = endLocal.toLocaleString('en-US', { dateStyle: 'medium', timeStyle: 'short' });
            }
        }
    }
    // recommended lots
    {% if lot.minutes_to_end > 10 %}
    setTimeout( function() {
        $.ajax({
        type: "GET",
        url: "/api/lots/get_recommended/?qty=4&auction={{lot.auction.slug}}&keywords={{lot.lot_name|urlencode}}&exclude={{lot.pk}}",
        success : function(result) {
            $("#recommendations").html(result);
        },
    });
    }, 5000);
    {% endif %}
    pageView({'lot':{{ lot.pk }} });
     // Logic for watching lots
     $( "#watch" ).click(function() {
        var data = {};
        if ( $(this).hasClass("watched") )  {
            data.watch = false;
        } else {
            data.watch = true;
        }
        $.ajax({
            type: "POST",
            beforeSend: function (request) {
                request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
            },
            url: "/api/watchitem/{{lot.pk}}/",
            data : data,
            success : function(result) {
                if (data.watch) {
                    $("#watch").addClass("watched text-warning");
                    $("#watch").html("<i class='bi bi-star-fill'></i> Watching{% if not lot.auction or lot.auction.is_online %} - you'll get an email 2 hours before bidding ends{% endif %}");
                } else {
                    $("#watch").removeClass("watched text-warning");
                    $("#watch").html('<i class="bi bi-star"></i> Watch');
                }
            }
        });
     });
    }
    function rotate(pk, angle) {
        var data = {};
        data.pk = pk;
        data.angle = angle;
        $.ajax({
            type: "POST",
            beforeSend: function (request) {
                request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
            },
            url: "/api/images/rotate/",
            data : data,
            success : function(result) {
                if (result == "Success") {
                    location.reload();
                }
            }
        });
    }
    function make_primary(pk) {
        var data = {};
        data.pk = pk;
        $.ajax({
            type: "POST",
            beforeSend: function (request) {
                request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
            },
            url: "/api/images/primary/",
            data : data,
            success : function(result) {
                if (result == "Success") {
                    location.reload();
                }
            }
        });
    }

</script> {% endblock %}
{% block undiv_content %}
{% comment %} Opened from the app's lot scanning (?src=ar): a sticky "Back to scanning" bar so the user
can return to it — and re-beacon this very lot — instead of relying on the WebView back button.
App-only; the deep link is handled natively. {% endcomment %}
{% if request.is_mobile_app and request.GET.src == 'ar' and lot.auction %}
<a href="fishauctions://ar/{{ lot.auction.slug }}?locate={{ lot.pk }}"
   class="d-flex align-items-center gap-2 bg-primary bg-gradient text-white text-decoration-none px-3 py-2 shadow-sm"
   style="position: sticky; top: 0; z-index: 1080;">
  <i class="bi bi-arrow-left-circle-fill fs-5"></i>
  <span class="fw-semibold">Back to scanning</span>
  <span class="ms-auto small text-white-50">Lot {{ lot.lot_number_display }}</span>
</a>
{% endif %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-offset-1 col-xl-8">
            <div class="container mt-2 mb-5">
                <div class="row">
                <div class="col-md-10 offset-md1">
                    {% if request.user.is_authenticated %}
                        <div class="d-flex overflow-x-auto flex-nowrap gap-2" style="scroll-snap-type: x mandatory;">
                        <div class="btn-group" role="group">
                            {% if is_auction_admin %}
                                <a class="btn btn-primary" href="{% url 'auction_lot_list' slug=auction.slug %}">
                                    <i class="bi bi-calendar me-1"></i>All lots
                                </a>
                                <button class="btn btn-primary" hx-get="{% url 'auctionlotadmin' pk=lot.pk %}"
                                    hx-target="#modals-here"
                                    hx-trigger="click"
                                    _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">
                                    <i class="bi bi-gear-fill"></i> Manage this lot
                                </button>
                                <button class="btn btn-primary" hx-get="{% url 'lot_refund' pk=lot.pk %}"
                                    hx-target="#modals-here"
                                    hx-trigger="click"
                                    _="on htmx:afterOnLoad wait 10ms then add .show to #modal then add .show to #modal-backdrop">
                                    <i class="bi bi-calendar-x"></i> Remove or refund
                                </button>
                            {% endif %}
                            {% comment %} In the app with the Bluetooth print method, print natively via a deep link; otherwise use the web label PDF. {% endcomment %}
                            {% if is_auction_admin or lot.user.pk == request.user.pk %}
                                {% if request.is_mobile_app and user_print_method == 'bluetooth' %}
                                <a class="btn btn-primary" href="fishauctions://print/{{ lot.pk }}">
                                    <i class="bi bi-tag"></i>
                                    {% if lot.label_printed %}Reprint label{% else %}Print label{% endif %}
                                </a>
                                {% else %}
                                <a class="btn btn-primary" href="{% url 'single_lot_label' pk=lot.pk %}">
                                    <i class="bi bi-tag"></i>
                                    {% if lot.label_printed %}Reprint label{% else %}Print label{% endif %}
                                </a>
                                {% endif %}
                            {% endif %}
                            {% comment %} App-only: open lot scanning aimed at this lot and walk the user to it. Visible to every user. {% endcomment %}
                            {% if request.is_mobile_app and lot.auction %}
                                <a class="btn btn-primary" href="fishauctions://ar/{{ lot.auction.slug }}?locate={{ lot.pk }}">
                                    <i class="bi bi-geo-alt"></i> Find this lot
                                </a>
                            {% endif %}
                            {% if request.user.is_superuser %}
                                <a href="/admin/auctions/lot/{{lot.pk}}/change/" class="btn btn-danger">
                                    Admin
                                </a>
                            {% endif %}
                            {% if bids %}
                                <div class="btn-group">
                                <button id="btnGroupDrop1" type="button" class="btn btn-danger dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="true" data-bs-offset="0,10" aria-expanded="false">
                                    Remove bids
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                    {% for bid in bids %}
                                        <li>
                                            <a class="dropdown-item" href="{% url 'delete_bid' pk=bid.pk %}">
                                                Remove bid from {{ bid.user.first_name }} {{ bid.user.last_name }} ({{ bid.user }})
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                                </div>
                            {% endif %}
                        </div>
                        </div>
                    {% endif %}
                    <h3>{{ lot.lot_name }}</h3>
                    {{ lot.species_category }}{% if lot.category_automatically_added and lot.can_be_edited and lot.user == request.user %}<span class="badge bg-secondary">Category automatically set.  Wrong?  <a href="{% url 'edit_lot' pk=lot.pk %}">Fix it here</a></span><br>{% else %}, {% endif %}lot number {{lot.lot_number_display }}<br>
                    {% if lot.i_bred_this_fish %}<span class="badge text-dark bg-light">Bred by this user</span>{% if show_bap_badge %}{% if bap_eligible_reason %}<span class="badge bg-secondary ms-1">Breeder points: {{ bap_eligible_reason_display }}</span>{% else %}<span class="badge bg-success ms-1">Breeder points eligible</span>{% endif %}{% endif %}{% if viewer_has_bap and lot.sold %}{% include "auctions/bap_lot_buttons.html" with default_points=bap_default_points %}{% endif %}{%endif%}
                    {% if lot.pre_registered and lot.user == request.user %}<span class="badge text-dark bg-light" data-toggle="tooltip" data-placement="bottom" title="You'll get a {{ lot.auction.pre_register_lot_discount_percent }}% discount on your selling fees for this lot">Pre-registered</span>{%endif%}
                    {% if lot.image_count or lot.video_link %}
                    <div>
                        <div id="image_carousel" class="carousel slide">
                            <div class="carousel-inner">
                                {% if lot.video_link %}
                                <div class="carousel-item active">
                                    <div class="ratio ratio-16x9">
                                        <iframe src="https://www.youtube.com/embed/{{ lot.video_link }}"
                                                title="YouTube video player" frameborder="0"
                                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                                                allowfullscreen></iframe>
                                    </div>
                                </div>
                                {% endif %}
                                {% for image in lot.images %}
                                <div class="carousel-item {% if image.is_primary and not lot.video_link %}active{%endif%}">
                                    <img src="{{ image.display_url }}" class="img-fluid rounded">
                                    <div class='carousel-caption text-light text-left'>
                                        <span class="text-muted"><small>{{ image.get_image_source_display }}</small></span>{%if image.caption%}<br>{{ image.caption }}{%endif%}
                                    </div>
                                        {% if show_image_add_button %}
                                        <div class="container mb-2">
                                            <div class="btn-group" role="group" aria-label="Image actions">
                                                <button class="btn btn-primary" name="rotate-left" onclick="rotate('{{image.pk}}', 90)">
                                                    <i class="bi bi-arrow-counterclockwise"></i> <span class="d-none d-lg-inline">Rotate Left</span>
                                                </button>
                                                <button class="btn btn-primary" name="rotate-right" onclick="rotate('{{image.pk}}', -90)">
                                                    <i class="bi bi-arrow-clockwise"></i> <span class="d-none d-lg-inline">Rotate Right</span>
                                                </button>
                                                {% if not image.is_primary %}
                                                <button class="btn btn-info" name="make-primary" onclick="make_primary('{{image.pk}}')">
                                                    <i class="bi bi-file-image-fill"></i> Make Primary
                                                </button>
                                                {% endif %}
                                                <a href="{% url 'edit_image' pk=image.pk %}" class="btn text-dark bg-warning">
                                                    <i class="bi bi-gear-fill"></i> Edit Image
                                                </a>
                                                <a href="{% url 'delete_image' pk=image.pk %}" class="btn btn-danger">
                                                    <i class="bi bi-file-x"></i> Delete Image
                                                </a>
                                            </div>
                                        </div>
                                        {% endif %}
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                        {% if lot.multimedia_count > 1 %}
                        <div class="d-flex overflow-x-auto flex-nowrap gap-2" style="scroll-snap-type: x mandatory;">
                            {% if lot.video_link %}
                            <button data-bs-target="#image_carousel" data-bs-slide-to="0" class="me-2 active thumbnail">
                                    <img style="min-width: 100px;" src="{% static 'youtube.png' %}" class="rounded">
                            </button>
                            {% endif %}
                            {% for image in lot.images %}
                            <a href="#" data-bs-target="#image_carousel" data-bs-slide-to="{% if lot.video_link %}{{ forloop.counter }}{% else %}{{ forloop.counter0 }}{% endif %}"  class="me-2 {% if image.is_primary and not lot.video_link %}active{% endif %}">
                                <img style="min-width: 100px;{% if not image.image %} max-height:150px; object-fit:cover;{% endif %}" src="{{ image.thumbnail_url }}" class="rounded">
                            </a>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </div>
                    {% else %}
                        {% if lot.auto_image %}
                            <br><img src="{{ lot.auto_image.display_url }}" class="img-fluid"><br>
                            <span class="text-muted"><small>This image was automatically added from another lot with the same name and may not be representative of this lot</small></span>
                            <br>
                            {% if lot.user == request.user %}
                            <div>This image was added because you have <a href="{% url 'preferences' %}">automatically add images to my lots</a> enabled</div>
                            {% endif %}
                        {% endif %}
                        {% if lot.user == request.user and not lot.auto_image %}
                        <div>You haven't added any images to this lot yet.  <a href="/blog/whats-a-picture-worth/" target="_blank">Lots with images are more likely to sell</a></div>
                        {% endif %}
                    {% endif %}
                    {% if show_image_add_button %}
                    <a href="{% url 'add_image' lot=lot.lot_number %}" class="mt-2 btn btn-primary"><i class="bi bi-file-image"></i> Add image</a><br>
                    {% endif %}
                    {% if images_managed_from_lot %}
                    <p class="text-muted mt-2">Images are managed from <a href="{{ images_managed_from_lot.lot_link }}">{{ images_managed_from_lot.lot_name }}</a>.</p>
                    {% endif %}
                    <br>
                    <div class="bg-dark mt-2 mb-2">
                        <div class='ms-2 me-2 mb-1'>
                            {{ lot.summernote_description | safe }}<br>
                            <a href="{{lot.reference_link}}">More information from {{lot.reference_link_domain}}</a>
                        </div><br>
                    </div>
                    <table class="table">
                        {% if lot.auction and lot.auction.use_quantity_field %}
                        <tr>
                            <td><b>Quantity:</b></td><td>{{ lot.quantity }}</td>
                        </tr>
                        {% endif %}
                        {% if lot.auction and lot.custom_checkbox_label %}
                        <tr>
                            <td><b>{{ lot.custom_checkbox_label }}</b></td><td></td>
                        </tr>
                        {% endif %}
                        {% if lot.auction and lot.auction.custom_field_1 != 'disable' and lot.auction.custom_field_1_name and lot.custom_field_1 %}
                        <tr>
                            <td><b>{{ lot.auction.custom_field_1_name }}:</b></td><td>{{ lot.custom_field_1 }}</td>
                        </tr>
                        {% endif %}
                        {% if lot.auction and lot.auction.use_custom_dropdown_field != 'disable' and lot.auction.custom_dropdown_name and lot.custom_dropdown %}
                        <tr>
                            <td><b>{{ lot.auction.custom_dropdown_name }}:</b></td><td>{{ lot.custom_dropdown }}</td>
                        </tr>
                        {% endif %}
                        <tr>
                            <td><b>Seller:</b></td><td>{% if lot.donation %} A donation from {% endif %}{% if lot.user %}<a href="{% url 'userpage' slug=lot.user %}">{{ lot.user }}</a> (<a href="{% url 'user_lots' %}?user={{lot.user}}{% if lot.auction %}&auction={{auction.slug}}{% endif %}">All lots from {{ lot.user }}</a>){% if not lot.auction %}
                                <span class='badge text-dark bg-light'>Lots sold: {{ lot.user.userdata.lots_sold }}</span> <span class='badge text-dark bg-success'>+{{ lot.user.userdata.positive_feedback_as_seller }}</span> <span class='badge bg-danger'>-{{ lot.user.userdata.negative_feedback_as_seller }}</span>
                                {% endif %}{% else %}Bidder number {{lot.auctiontos_seller}}{% endif %}</td>
                        </tr>
                        <tr>
                            <td><b>
                                <span id="price_label">{% if lot.sold or lot.ended %}
                                    Winner:
                                    {% else %}
                                        {% if lot.sealed_bid %}
                                        Sealed bid auction
                                        {% else %}
                                        {% if lot.high_bidder %}
                                            Current bid:
                                        {% else %}
                                            Minimum bid:
                                        {% endif %}
                                        {% endif %}
                                    {% endif %}
                                </span></b></td>
                                <td>
                                {% if lot.sold %}
                                    {{ lot.currency_symbol }}<span id="price">{{lot.winning_price}}</span> <span id="high_bidder_name">{% if lot.winner %}
                                        {% if lot.winner.userdata.username_visible %}
                                            <a href="{% url 'userpage' slug=lot.winner %}">{{ lot.winner }}</a>
                                        {% else %}
                                            Anonymous
                                        {% endif %}
                                        {% else %}
                                            Bidder: {{ lot.auctiontos_winner }}
                                        {% endif %}</span>
                                {% else %}
                                    {% if lot.ended %}
                                        Not sold
                                    {% else %}
                                        {% if lot.sealed_bid %}
                                        You can't see how much others have bid
                                        {% else %}
                                            {% if lot.high_bidder %}
                                            <span>
                                                {{ lot.currency_symbol }}<span id="price">{{ lot.high_bid }}</span>
                                                {% if lot.high_bidder.pk == request.user.id %}
                                                <span id="high_bidder_name"> - you're winning!</span>
                                                {% else %}
                                                <span id="high_bidder_name">{% if lot.high_bidder.userdata.username_visible %}<a href="{% url 'userpage' slug=lot.high_bidder %}">{{ lot.high_bidder }}</a>{% else %}Anonymous{%endif%}</span>
                                                {% endif %}
                                                <span id="your_bid">
                                                    {% if viewer_bid %}
                                                    Your max bid is {{ lot.currency_symbol }}<span id='your_bid_price'>{{ viewer_bid }}</span>
                                                    {% if lot.bids_can_be_removed and lot.auction.allow_deleting_bids %}
                                                        <a href="{% url 'delete_bid' pk=viewer_bid_pk %}" class='btn btn-danger btn-sm'>Remove your bid</a>
                                                    {% endif %}
                                                    {% endif %}</span>
                                                {% if is_auction_admin %}{{ lot.auction_show_high_bidder_template }}{% endif %}
                                            </span>
                                            {% else %}
                                                {{ lot.currency_symbol }}<span id="price">{{ lot.reserve_price }} {% if lot.buy_now_price and not lot.bidding_error %}<button type="button" class='btn btn-sm btn-success text-dark' id="buy-now">Buy now: {{ lot.currency_symbol }}{{lot.buy_now_price}}</button>{% endif %}</span> <span id="high_bidder_name"></span><span id="your_bid"></span>
                                            {% endif %}
                                        {% endif %}
                                    {% endif %}
                                {% endif %}
                                </td>
                        </tr>
                        {% if not lot.auction %}
                        <tr>
                            <td><b>Distance from you:</b></td><td>{{ distance }} {% if lot.local_pickup %}<span class="badge text-dark bg-light">Local pickup available</span>{% endif %}
                                {% if request.user.userdata.location in lot.shipping_locations.all %}
                                <span class="badge bg-light text-dark">Ships to {{ request.user.userdata.location }}</span>
                                {% endif %}
                            </td>
                        </tr>
                        <tr>
                            <td><b>Payment:</b></td><td>
                                {% if lot.payment_other_method %}{{ lot.payment_other_method }}{% endif %}
                                {% if lot.payment_paypal %}<span class="badge text-dark bg-light">PayPal OK</span>{% endif %}
                                {% if lot.payment_cash %}<span class="badge text-dark bg-light">Cash OK</span>{% endif %}
                            </td>
                        </tr>
                        {% if lot.other_text %}
                        <tr>
                            <td><b>Shipping notes:</b></td><td>{{ lot.other_text }} </td>
                        </tr>
                        {% endif %}
                        {% endif %}

                        <tr>
                            <td><b>Ends:</b></td><td><span id="end_date" class="{% if lot.ended %} {% endif %}" data-end-iso="{% if not lot.is_part_of_in_person_auction or lot.winner_as_str and lot.date_end %}{{ lot.calculated_end|date:'c' }}{% endif %}">{{ lot.calculated_end_for_templates }}</span>{% if lot.ended %}<span class='badge-pill badge bg-danger'>Ended</span>{% endif %}</td>
                        </tr>

                        {% if lot.auction and lot.auction.multi_location and lot.location %}
                        <tr>
                            <td><b>Location:</b></td><td>{{ lot.location }}
                                {% if user_tos_location and user_tos_location != lot.location_as_object %}
                                    <small class='text-muted'>Delivered to {{ user_tos_location }} at {{ user_tos_location.second_pickup_time|default:user_tos_location.pickup_time }}.</small>
                                {% endif %}
                            </td>
                        </tr>
                        {% endif %}
                        {% if not lot.sealed_bid %}
                        <tr>
                            <td><b>Views:</b></td><td>{{ lot.page_views }} view{{ lot.page_views|pluralize }}{% if lot.number_of_watchers %}, {{lot.number_of_watchers}} watching{%endif%}
                            {% comment %}
                            The seller of a lot in an in-person auction gets the full per-source
                            breakdown (collapsed by default), which includes the lot-scanning rows below.
                            {% endcomment %}
                            {% if show_page_view_breakdown %}
                                <button class="btn btn-sm btn-secondary text-light ms-1" type="button" data-bs-toggle="collapse" data-bs-target="#pageViewBreakdown" aria-expanded="false" aria-controls="pageViewBreakdown" aria-label="Show or hide the detailed view breakdown">Show detailed breakdown <i class="bi bi-chevron-down"></i></button>
                                <div class="collapse mt-2" id="pageViewBreakdown">
                                    <table class="table table-sm mb-1">
                                        <thead>
                                            <tr><th>How they got here</th><th class="text-end">Views</th><th class="text-end">People</th></tr>
                                        </thead>
                                        <tbody>
                                            {% for row in lot.page_view_source_breakdown %}
                                            <tr>
                                                <td>{{ row.label }}</td>
                                                <td class="text-end">{{ row.views }}</td>
                                                <td class="text-end">{{ row.unique }}</td>
                                            </tr>
                                            {% empty %}
                                            <tr><td colspan="3" class="text-muted">Nobody has looked at this lot yet.</td></tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                    <small class="text-muted">The lot-scanning rows count each person once, no matter how many times they looked. Everything else is one row per visit.</small>
                                </div>
                            {% endif %}
                            </td>
                        </tr>
                        {% comment %}
                        Lot-scanning interactions are counted in the view total above; broken out here so it's
                        clear how many people actually found this lot in person by scanning in the app.
                        The seller sees this in the detailed breakdown instead, so don't repeat it.
                        {% endcomment %}
                        {% if not show_page_view_breakdown %}
                        {% with ar_counts=lot.ar_interaction_counts %}
                        {% if ar_counts.total %}
                        <tr>
                            <td><b>Lot scanning:</b></td>
                            <td>
                                {% if ar_counts.scanned %}{{ ar_counts.scanned }} scanned{% endif %}
                                {% if ar_counts.zoomed %}{% if ar_counts.scanned %}, {% endif %}{{ ar_counts.zoomed }} zoomed in{% endif %}
                                {% if ar_counts.zoomed_full %}{% if ar_counts.scanned or ar_counts.zoomed %}, {% endif %}{{ ar_counts.zoomed_full }} zoomed all the way in{% endif %}
                            </td>
                        </tr>
                        {% endif %}
                        {% endwith %}
                        {% endif %}
                        {% endif %}
                    </table>
                {% if request.user.is_authenticated and lot.user.pk == request.user.id %}
                    <a href="{% url 'new_lot' %}?copy={{lot.pk}}" class="btn btn-info"><i class="bi bi-calendar-plus"></i> Copy to new lot</a>
                {% endif %}
        {% if not lot.auction %}
            {% if request.user.is_authenticated %}
                {% if lot.user == request.user or request.user.is_superuser %}
                <button class="btn btn-primary" name="action_deactivate" onclick="deactivate_lot()">{% if lot.deactivated %}Reactivate{% else %}Deactivate this lot{% endif %}</button>
                {% endif %}
            {% endif %}
        {% endif %}
        {% if show_exchange_info %}
        <a name="exchangeinfo"></a>
        <h5>Exchange info</h5>
        <table class="table">
            <tr>
                <td><b>Seller:</b><br></td><td>{% if is_auction_admin %}<a href="#" hx-get="/api/auctiontos/{{lot.auctiontos_seller.pk}}"
                    hx-target="#modals-here" hx-trigger="click">{{ lot.seller_name }}</a> {% else %} {{ lot.seller_name }} {% endif %}({{ lot.seller_email | urlize }})<br> <small>{{ lot.location }}</small> <a href="{{ lot.seller_invoice_link }}">Seller's invoice</a></td>
            </tr>
            <tr>
                <td><b>Winner:</b></td><td>
                    {% if is_auction_admin %}<a href="#" hx-get="/api/auctiontos/{{lot.auctiontos_winner.pk}}"
                    hx-target="#modals-here" hx-trigger="click">{{ lot.winner_name }}</a>
                    {% else %}
                        {{ lot.winner_name }}
                    {% endif %}
                    {% if lot.winner_email and is_auction_admin %}({{ lot.winner_email | urlize }}){% endif %}<br><small>{{ lot.winner_location }}</small> {% if is_auction_admin %}<a href="{{ lot.winner_invoice_link }}">Winner's invoice</a>{% endif %}</td>
            </tr>
        </table>
        {% endif %}
        {% if request.user.is_authenticated and lot.user.pk == request.user.id %}
            <a
            {% if lot.can_be_edited %}
            href="{% url 'edit_lot' pk=lot.pk %}"
            {% else %}
            href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="{{ lot.cannot_be_edited_reason }}"
            {% endif %}
            class="text-dark btn btn-warning"><i class="bi bi-gear-fill"></i> Edit lot</a>
            <a
            {% if lot.can_be_deleted %}
            href="{% url 'delete_lot' pk=lot.pk %}"
            {% else %}
            href="javascript:void(0);" data-toggle="tooltip" data-placement="top" title="{{ lot.cannot_be_deleted_reason }}"
            {% endif %}
            class="btn btn-danger"><i class="bi bi-calendar-x"></i> Delete</a>
        {% endif %}
        <span id="bid_area" class="{% if force_buy_now and not lot.bidding_error %}d-none{%endif%}">
                {% if lot.ended or lot.winner %}
                    <div class='mt-2 p-2 bg-dark font-weight-bold'>Bidding has ended on this lot</div>
                {% elif lot.bidding_error %}
                    <div class='mt-2 p-2 bg-dark font-weight-bold'>{{ lot.bidding_error }}</div>
                {% else %}
                <div class="form-group">
                    <div class="row mb-3 justify-content-center justify-content-lg-start">
                        <div class="col-auto">
                            <div class="input-group">
                                <div class="input-group-prepend">
                                    <span class="input-group-text">{{ lot.currency_symbol }}</span>
                                </div>
                                <input type="number" id='bid_amount' {% if only_whole_dollar_bids %}min="1" step="1"{% else %}min="0.01" step="0.01"{% endif %} value="{{ amount }}" class="form-control" aria-label="Amount (to the nearest {% if only_whole_dollar_bids %}dollar{% else %}cent{% endif %})">
                                <div class="input-group-append">
                                    {% if only_whole_dollar_bids %}<span class="input-group-text">.00</span>{% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="col-auto">
                            <button class='btn btn-success text-dark' id='bid_button' style='min-width: 150px;'>Place bid</button>
                        </div>
                    </div>
                    <div class="invalid-feedback">Enter a number</div>
                </div>
                            {% if not lot.auction %}Remember to check the seller's feedback before bidding.  This site will not get involved in disputes.<br>{%endif%}
                            <script>
                                //$('#bid_amount').focus(); // scrolls page down
                                document.querySelector('#bid_amount').onkeyup = function(e) {
                                    if (e.keyCode === 13) {
                                        document.querySelector('#bid_button').click();
                                    }
                                };
                                document.querySelector('#bid_button').onclick = function(e) {
                                    {% if user_specific_bidding_error %}
                                    $('#bidError').modal('show');
                                    {% else %}
                                    var bid = Number($('#bid_amount').val());
                                    if (isNaN(bid) || bid == 0) {
                                        $('#bid_amount').addClass('is-invalid');
                                    } else {
                                        $('#bid_amount').removeClass('is-invalid');
                                        $('#confirmBid').modal('show');
                                        {% if force_buy_now %}
                                        var dialogText = "Buy {{ lot.lot_name }} now for $" + bid + "?<br><br><small>All sales are final</small>";
                                        {% else %}
                                        var dialogText = "Bid $" + bid + " on {{ lot.lot_name }}<br><br><small>{% if not lot.auction.allow_deleting_bids %}All bids are final{% endif %}</small>";
                                        {% endif %}
                                        {% if not lot.auction %}
                                            dialogText += "<br><div>This lot is sold directly by {{ lot.user }}.  Make sure to check the user's feedback.</div>";
                                            {% if request.user.is_authenticated and request.user.userdata.last_auction_used and not request.user.userdata.last_auction_used.closed %}
                                                dialogText += "<br><div class='text-warning'>This lot is not part of {{ request.user.userdata.last_auction_used }}</div>";
                                            {% endif %}
                                        {% endif %}
                                        $('#confirmDialogText').html(dialogText);
                                        document.querySelector('#finalize-bid').onclick = function(e) {
                                            // Place the bid over plain HTTP so it is saved even if the
                                            // websocket is down. The live price / high-bidder update still
                                            // arrives via the websocket broadcast, so the UI behaves the same.
                                            $.post({
                                                url: "{% url 'lot_bid' pk=lot.pk %}",
                                                data: { 'bid': bid },
                                                beforeSend: function (request) {
                                                    request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
                                                },
                                                error: function() {
                                                    $.toast({
                                                        title: 'Could not place your bid -- please check your connection and try again.',
                                                        type: 'danger',
                                                        delay: 8000
                                                    });
                                                }
                                            });
                                            var your_bid = Number($('#your_bid_price').html());
                                            var price = Number($('#price').html());
                                            if (bid > your_bid) {
                                                $('#your_bid').html('Your max bid is $<span id="your_bid_price">' + bid + "</span>");
                                            }
                                            if (bid > price) {
                                                $('#bid_amount').val(next_bid(price));
                                            }
                                            $('#confirmBid').modal('hide');
                                            $('#confirmDialogText').html("Enter an amount");
                                        }
                                    }
                                    {% endif %}
                                };
                            </script>
                {% endif %}
        </span>
        {% if request.user.is_authenticated %}
            <span id="watch" {% if watched %} class="watched text-warning"><i class="bi bi-star-fill"></i> Watching{% else %}><i class="bi bi-star"></i> Watch{% endif %}</span>
                {% if push_notifications_possible %}
                    <span id='subscribe_success'>
                    {% if watched and request.user.userdata.push_notifications_when_lots_sell %}
                        {% if has_app_push %}
                        You'll get a notification in the app on your phone when bidding starts on this lot
                        {% else %}
                        You'll get a notification when bidding starts on this lot
                        {% endif %}
                        {% if has_push_subscription %}
                        <button id="test-notification" class='btn btn-primary btn-sm'>Test notification</button>
                        {% endif %}
                        <button class='btn btn-primary btn-sm' data-bs-toggle="modal" data-bs-target="#notification-help" style="cursor: pointer;"><i class="bi bi-question-circle"></i> More information</button>
                        {% if has_push_subscription %}
                        <span class='text-success d-none' id='test-notification-status'></span>
                        {% endif %}
                    {% endif %}
                    </span>
                    {% if can_subscribe_to_webpush %}
                    <span id='subscribe_message_area' class='d-none'>
                        Enable push notifications on this device:
                        {% webpush_button with_class="btn btn-primary btn-sm" %} to get a notification when bidding starts on this lot
                        <button class='btn btn-primary btn-sm' data-bs-toggle="modal" data-bs-target="#notification-help" style="cursor: pointer;"><i class="bi bi-question-circle"></i> More information</button>
                    </span>
                    {% endif %}
                    {% if has_app_push and not request.user.userdata.push_notifications_when_lots_sell %}
                    {# App users have nothing to subscribe to in the browser -- they only need to turn the preference on. #}
                    <span id='app_push_opt_in'>
                        <button id="enable-app-notifications" class='btn btn-primary btn-sm'>Notify me when bidding starts</button>
                        <span class='text-muted'><small>Sent to the app on your phone</small></span>
                        <button class='btn btn-primary btn-sm' data-bs-toggle="modal" data-bs-target="#notification-help" style="cursor: pointer;"><i class="bi bi-question-circle"></i> More information</button>
                    </span>
                    {% endif %}
                    <div class="modal fade" id="notification-help" tabindex="-1" aria-labelledby="notification-help-label" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="notification-help-label">Do you fall asleep during auctions?</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            Get a notification on your phone when lots you've watched go up for bidding.<br><br>
                            <small class='text-muted'>This will only work if the person running this auction enters the lot number when bidding starts!  Some clubs enter the lot number only after bidding has ended, in which case you'll get a useless notification after the lot has sold.  Complain to the person running your auction if this happens!<br><br></small>
                            Some tips:
                            <ul>
                                <li>Make sure notifications are enabled on your phone; check any lot you're watching and it will tell you if you will get a notification or not</li>
                                <li>Set your phone to vibrate, so you can still feel it, but it doesn't disturb others</li>
                                <li>You don't need to have {{ domain }} open to see the notification, it'll come up automatically!</li>
                                <li>This feature is considered experimental -- please <a href="https://github.com/iragm/fishauctions/issues/227">leave a comment here if you love or hate this feature</a> </li>
                            </ul>
                            <br><br>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
                        </div>
                        </div>
                    </div>
                    </div>
                    <script>
                    {% if has_push_subscription %}
                    $('#test-notification').click(function() {
                        const button = $('#test-notification');
                        button.prop("disabled", true);
                        $.post({
                            url: "{% url 'lot_push_test' pk=lot.pk %}",
                            beforeSend: function (request) {
                                request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
                            },
                            success: function() {
                                $('#test-notification-status').text("Test notification sent").removeClass("d-none");
                                setTimeout(function() {
                                    $('#test-notification-status').addClass("d-none").text("");
                                }, 5000);
                            },
                            complete: function() {
                                button.prop("disabled", false);
                            }
                        });
                    });
                    {% endif %}

                    {% if has_app_push and not request.user.userdata.push_notifications_when_lots_sell %}
                    $('#enable-app-notifications').click(function() {
                        $('#enable-app-notifications').prop("disabled", true);
                        $.post({
                            url: "{% url 'enable_notifications' %}",
                            beforeSend: function (request) {
                                request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
                            },
                            success: function() {
                                {% if watched %}
                                $('#app_push_opt_in').html("You'll get a notification in the app on your phone when bidding starts on this lot");
                                {% else %}
                                $('#app_push_opt_in').html("Notifications enabled.  Make sure to watch this lot to get a notification");
                                {% endif %}
                            },
                            error: function() {
                                $('#enable-app-notifications').prop("disabled", false);
                            }
                        });
                    });
                    {% endif %}

                    {% if can_subscribe_to_webpush and not has_push_subscription %}
                    $('#subscribe_success').addClass("d-none");
                    $('#subscribe_message_area').removeClass("d-none");
                    const targetNode = document.getElementById('webpush-subscribe-button');
                    if (targetNode) {
                        // Create a callback function that executes when mutations are observed
                        const callback = function(mutationsList) {
                            for (let mutation of mutationsList) {
                                if (mutation.type === 'childList') {
                                    if (targetNode.textContent == "Subscribe to Push Messaging") {
                                        $('#subscribe_success').addClass("d-none");
                                        $('#subscribe_message_area').removeClass("d-none");
                                    } else {
                                        $('#subscribe_message_area').addClass("d-none");
                                        $('#subscribe_success').removeClass("d-none");
                                        {% if not watched %}$('#subscribe_success').html('Notifications enabled.  Make sure to watch this lot to get a notification');{% endif %}
                                        $.post({url: "{% url 'enable_notifications' %}",
                                            beforeSend: function (request) {
                                                request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
                                            }
                                        });
                                    }
                                }
                            }
                        };
                        // Create an observer instance linked to the callback function
                        const observer = new MutationObserver(callback);
                        // Define the configuration for the observer
                        const config = { childList: true, subtree: true };
                        // Start observing the target node for configured mutations
                        observer.observe(targetNode, config);
                    }
                    {% endif %}
                    </script>
                {% endif %}
            <br>
        {% endif %}
    </div>
  </div>
</div>
</div>

<!-- confirm bid dialog -->
<div class="modal fade" id="confirmBid" tabindex="-1" role="dialog" aria-labelledby="label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="label">Confirm bid</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id='confirmDialogText' class="modal-body">Enter an amount</div>
            <div class="modal-footer">
                <button type="button" id='finalize-bid' class="btn btn-success text-dark">Place bid</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- bid error dialog -->
<div class="modal fade" id="bidError" tabindex="-1" role="dialog" aria-labelledby="label" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="label"><i class="bi bi-exclamation-circle-fill"></i> Bid failed!</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id='confirmDialogText' class="modal-body">
                {{ user_specific_bidding_error|safe }}
            </div>
            <div class="modal-footer">
                {% if not user.is_authenticated %}
                    <a href="{% url 'account_login' %}?next={{ lot.lot_link }}" role="button" class="btn btn-primary">Sign in</a>
                    <a href="{% url 'account_signup' %}?next={{ lot.lot_link }}" role="button" class="btn btn-primary">Create an account</a>
                {% elif not user_tos %}
                    <a href="{% url 'auction_main' slug=lot.auction.slug %}?next={{ lot.lot_link }}#join" role="button" class="btn btn-primary">Read auction rules</a>
                {% endif %}
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>
<!-- Chat -->
<div class="container-fluid col-md-offset-1 col-xl-4 mt-1 mb-1 mt-xl-5">
    {% if request.user.is_authenticated %} {# chats only shown if you are logged in #}
    <div class="col-md-11 bg-secondary rounded pb-1 border border-secondary bg-gradient" style="box-shadow: 5px 5px 8px 2px rgba(121, 121, 121, 0.2);">
        <div class="mt-3 ms-3 mb-2 ms-2 ">
    <h4>Chat</h4>
    <div class="panel" id="chat" style='min-height: 100px; max-height: 30vh; {# calc(100vh - 200px) #}
    overflow-y: scroll;'></div>
    <span id="send_chat_area" class='' >
    {% if request.user.is_authenticated and lot.chat_allowed %}
    <div class="input-group mt-1 mb-3 ">
        <input class="form-control form-control-sm mr-1 " id='chat_input' spellcheck="true" placeholder="Ask questions or comment on this lot.  Be respectful." type="text">
        <div class="input-group-append">
            <button class='btn btn-sm bg-info' id="chat_send" >Send</button>
        </div>
    </div>

    {% if show_chat_subscriptions_checkbox %}
    <small><div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="chat_subscribe_checkbox" {% if chat_subscriptions_is_checked %}checked=""{% endif %}>
        <label class="custom-control-label" for="chat_subscribe_checkbox">Email me when new chat messages are posted</label>
      </div></small>
      {% else %}You've turned off email notifications for replies in your <a href="{% url 'preferences' %}">preferences</a>{% endif %}
    {% endif %}

    </span>
    <script>
        var autocheck_chat_subscriptions = {{ autocheck_chat_subscriptions}};
        {% if lot.sealed_bid %}
        var high_bidder = '';
        var high_bidder_pk = '{{ request.user.pk }}';
        {% else %}
        var high_bidder = '{{ lot.high_bidder_display }}';
        var high_bidder_pk = '{{ lot.high_bidder.pk }}';
        {% endif %}
        var viewer_bid = '{{ lot.viewer_bid }}';
        var ws_protocol = (window.location.protocol === 'https:') ? 'wss://' : 'ws://'
        var lotWebSocketUrl = ws_protocol + window.location.host + '/ws/lots/{{ lot.lot_number }}/';
        // A WebSocket can be closed at any time by idle proxy timeouts, network blips, or a
        // server restart.  send() on a closed socket is *silently discarded* by the browser
        // (no error thrown), so without reconnect logic a dropped connection makes every
        // later bid/chat vanish with no feedback until a full page reload.  Use let + a
        // reconnect helper instead of a one-shot const so the page can heal itself.
        var lotWebSocket = null;
        var lotWebSocketReconnectDelay = 1000;

        function handleLotSocketMessage(e) {
            const data = JSON.parse(e.data);
            if (data.current_high_bid) {
                $("#price").html(data.current_high_bid);
                $(document).prop('title', '🔴$' + data.current_high_bid + ": " + originalTitle);
                clearTimeout(removeDot);
                var removeDot = setTimeout(function(){$(document).prop('title', '$' + data.current_high_bid + ": " + originalTitle);}, 500);
                if (!$("#bid_amount").is(":focus")) {
                    if (data.info !== "INFO") {
                        if (Number($("#bid_amount").val()) <= data.current_high_bid) {
                            $("#bid_amount").val(next_bid(data.current_high_bid));
                        }
                    }
                }
            }
            if (data.high_bidder_pk) {
                $('#high_bidder_name').html(data.high_bidder_name);
                $('#price_label').html("Current bid:");
            }
            var messageClass = "warning";
            if (data.high_bidder_pk) {
                if (high_bidder_pk == "{{ request.user.pk }}") {
                    if (data.high_bidder_pk != '{{ request.user.pk }}') {
                        messageClass = 'danger';
                    }
                } else {
                    if (data.high_bidder_pk == '{{ request.user.pk }}') {
                        messageClass = 'success';
                    }
                }
                high_bidder_pk = data.high_bidder_pk;
            }
            if (data.info == "CHAT") {
                addChat(data.pk, data.username, data.message, data.timestamp);
            } else {
                if (data.date_end) {
                    var date_end = new Date(data.date_end);
                    // $('#end_date').html("<span class='text-danger>" + date_end.toLocaleString("en-US", {timeZone: "{{user_timezone}}"}) + "</span>");
                    $('#end_date').html(date_end.toLocaleTimeString('en-US', { hour12: true }));
                }
                if (data.error) {
                    messageClass = "danger";
                    data.message = data.error;
                } else if (data.info == "INFO") {
                    messageClass = "info";
                } else {
                    // non-info, non-error messages are public and added to the chat
                    addChat(-1, "System", data.message, null);
                }
                if (data.info == "LOT_END_WINNER") {
                    $('#price_label').html("Winner:");
                    $('#end_date').html("Ended");
                    $('#bid_area').html("Bidding has ended on this lot<br>");
                }
                $.toast({
                    title: data.message,
                    type: messageClass,
                    delay: 10000
                });
            }
        };
        function addChat(pk, username, message, timestamp) {
            message = message.replace(/</g, "&lt;").replace(/>/g, "&gt;");
            var urlRegex = /(?:(?:https?|ftp|file):\/\/|www\.|ftp\.|auction\.)(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[-A-Z0-9+&@#\/%=~_|$?!:,.])*(?:\([-A-Z0-9+&@#\/%=~_|$?!:,.]*\)|[A-Z0-9+&@#\/%=~_|$])/igm
            message =  message.replace(urlRegex, function(url) {
                return '<a style="color: #555; font-weight: bold;" href="' + url + '">' + url + '</a>';
            })

            // Format timestamp for display
            var timestampHtml = '';
            if (timestamp) {
                var date = new Date(timestamp);
                var timeString = date.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit', hour12: true });
                var fullDateTime = date.toLocaleString('en-US', { dateStyle: 'short', timeStyle: 'short' });
                timestampHtml = '<small class="text-muted" style="margin-left: 8px;" title="' + fullDateTime + '">' + timeString + '</small>';
            }

            var lastChat = $(".message").last();
            if (lastChat.hasClass("user_" + pk)) {
                lastChat.append("<br><span title='" + fullDateTime + "'>" + message + "</span>");
            } else {
                var cssStyle = "";
                if (pk == -1) {
                    cssStyle = "chat-system";
                } else if (pk == '{{ viewer_pk }}') {
                    cssStyle = "chat-me";
                } else if (pk == '{{ submitter_pk }}') {
                    cssStyle = "chat-submitter";
                }
                var chatHtml = '<div class="chat ' + cssStyle + '">\
                                    <div class="chat-body">\
                                        <div class="chat-content">\
                                            <small><span class="chat-username">' + username + '</span></small>\
                                            <span title="' + fullDateTime + '" class="message user_' + pk + ' ">'+ message + '</span>\
                                        </div>\
                                    </div>\
                                </div>';
                $('#chat').append(chatHtml);
            }
            showLatestChat();
        }
        function connectLotWebSocket() {
            // Don't stack duplicate sockets: a close can trigger both a scheduled reconnect
            // and an on-demand reconnect from lotWebSocketSend().  Bail if one is already live.
            if (lotWebSocket && (lotWebSocket.readyState === WebSocket.CONNECTING || lotWebSocket.readyState === WebSocket.OPEN)) {
                return;
            }
            lotWebSocket = new WebSocket(lotWebSocketUrl);
            lotWebSocket.onmessage = handleLotSocketMessage;
            lotWebSocket.onopen = function() {
                lotWebSocketReconnectDelay = 1000;
            };
            lotWebSocket.onclose = function() {
                // Reconnect with backoff so the page heals itself instead of silently
                // dropping every future bid into a dead socket.
                setTimeout(connectLotWebSocket, lotWebSocketReconnectDelay);
                lotWebSocketReconnectDelay = Math.min(lotWebSocketReconnectDelay * 2, 15000);
            };
            lotWebSocket.onerror = function() {
                try { lotWebSocket.close(); } catch (err) {}
            };
        }
        connectLotWebSocket();

        // Only send when the socket is actually open.  Returns true if the message was
        // handed to an open socket, or false (and warns the user + kicks off a reconnect)
        // when the socket is down -- so callers can avoid showing a false confirmation.
        function lotWebSocketSend(payload) {
            if (lotWebSocket && lotWebSocket.readyState === WebSocket.OPEN) {
                lotWebSocket.send(JSON.stringify(payload));
                return true;
            }
            if (!lotWebSocket || lotWebSocket.readyState === WebSocket.CLOSED) {
                connectLotWebSocket();
            }
            $.toast({
                title: 'Connection dropped, so that did not go through. Reconnecting now -- please try again in a moment.',
                type: 'warning',
                delay: 8000
            });
            return false;
        }

        function showLatestChat() {
            var objDiv = document.getElementById("chat");
            objDiv.scrollTop = objDiv.scrollHeight;
        }
        //{% if request.user.is_authenticated and lot.chat_allowed %}
        document.querySelector('#chat_input').onkeyup = function(e) {
            if (e.keyCode === 13) {
                document.querySelector('#chat_send').click();
            }
        };
        document.querySelector('#chat_send').onclick = function(e) {
            const messageInputDom = document.querySelector('#chat_input');
            const message = messageInputDom.value;
            if (message) {
                lotWebSocketSend({ 'message': message });
            }
            messageInputDom.value = '';
            {% if show_chat_subscriptions_checkbox %}
            if (autocheck_chat_subscriptions) {
                document.querySelector('#chat_subscribe_checkbox').checked = true;
                chat_subscribe(true);
            }
            {% endif %}
        };
        {% if show_chat_subscriptions_checkbox %}
        document.querySelector('#chat_subscribe_checkbox').addEventListener('change', function(event) {
            chat_subscribe(event.target.checked);
        });
        function chat_subscribe(val) {
            autocheck_chat_subscriptions = false;
            $.ajax({
                type: "POST",
                beforeSend: function (request) {
                    request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
                },
                url: "{% url 'lot_chat_subscribe' %}",
                data: {'lot':{{ lot.pk }}, 'unsubscribed': !val},
                success : function(result) {}});
        }
        {% endif %}
        //{% endif %}
    </script>
    </div>
    </div>
    {% endif %}
    {% if lot.minutes_to_end > 10 or not lot.minutes_to_end %}
    {% include "ad.html" %}
    {% endif %}
</div>
</div>
<!-- Recommended lots -->
{% if lot.minutes_to_end > 10 %}
<div class="mt-1"><span class="text-muted">Other lots you might be interested in:</span>
<span id='recommendations'>Searching for recommended lots...</span>
{% endif %}
{% if lot.auction %}
    <br><a href='{{lot.auction.view_lot_link}}'>View all lots for {{ lot.auction }}</a><br>
{% endif %}
</div>

{% if show_feedback_dialog %}
<div data-htmx-modal-root>
<div id="modal-backdrop" class="modal-backdrop fade show" style="display:block;"></div>
<div id="modal" class="modal fade show" tabindex="-1" style="display:block;">
	<div class="modal-dialog modal-dialog-centered">
	  <div class="modal-content">
		<div class="modal-header">
		  <h5 class="modal-title">You won this lot!</h5>
		</div>
		<div class="modal-body">
        Leave feedback to inform others about this seller
        <div class="d-flex justify-content-center">
            <div class="btn-group" role="group" aria-label="Feedback selection">
                <button type="button" id="1_{{ lot.lot_number }}_winner" onclick="feedback({{ lot.lot_number }}, 'winner', 1, null);" class="btn btn-secondary {% if lot.feedback_rating == 1 %}btn-success{% endif %}">
                    +1, this was great!
                </button>
                <button type="button" id="0_{{ lot.lot_number }}_winner" onclick="feedback({{ lot.lot_number }}, 'winner', 0, null);" class="btn btn-secondary">
                    No rating
                </button>
                <button type="button" id="-1_{{ lot.lot_number }}_winner" onclick="feedback({{ lot.lot_number }}, 'winner', -1, null);" class="btn btn-secondary {% if lot.feedback_rating == -1 %}btn-danger{% endif %}">
                    -1, not recommended
                </button>
            </div>
        </div>

        <input type="text" placeholder="Comments" id="text_{{lot.lot_number}}_winner" onblur="feedback({{ lot.lot_number }}, 'winner', null, this.value);" value="{% if lot.feedback_text %}{{ lot.feedback_text }}{% endif %}" class="form-control mt-2" style="min-width: 20em;" maxlength="500"></td>
        <br>
        <span class="text-muted"><a href="{% url 'feedback' %}">Leave feedback on all lots you've won here.</a></span>
      <div class="modal-footer">
        <button data-modal-close-action="none" class="btn btn-secondary">Close</button>
    </div>
	  </div>
	</div>
  </div>
</div>
</div>
<script>
window.mountHtmxModal(document.currentScript.previousElementSibling);
function feedback(pk, leave_as, rating, text) {
  data = {};
  if (rating !== null) {
    data.rating = rating;
  }
  if (text) {
    data.text = text;
  }
  $.ajax({
      type: "POST",
      beforeSend: function (request) {
          request.setRequestHeader("X-CSRFTOKEN", "{{ csrf_token }}");
      },
      url: "/api/feedback/" + pk + "/" + leave_as + "/",
      data: data,
      success : function(result) {
        if (text) {
          $("#text_" + pk + "_" + leave_as).addClass('is-valid');
        }
        if (rating === 1){
          $("#1_" + pk + "_" + leave_as).addClass('btn-success');
          $("#-1_" + pk + "_" + leave_as).removeClass('btn-danger');
        }
        if (rating === -1){
          $("#-1_" + pk + "_" + leave_as).addClass('btn-danger');
          $("#1_" + pk + "_" + leave_as).removeClass('btn-success');
        }
        if (rating === 0){
          $("#-1_" + pk + "_" + leave_as).removeClass('btn-danger');
          $("#1_" + pk + "_" + leave_as).removeClass('btn-success');
        }
      }
    });
  };
</script>
{% endif %}
{% endblock %}