{% if embed == 'all_lots' %}
  {% load el_pagination_tags %}
  {% paginate filter.qs as object_list %}
{% endif %}
{% load distance_filters %}
{% load currency_filters %}
<style>
  .watch-icon {
    cursor: pointer;
    font-size: 1.5em;
    text-shadow: 0px 0px 10px #000000;
    transition: all 0.2s ease;
  }
  .watch-icon:hover {
    transform: scale(1.2);
  }
  .watch-icon-overlay {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .lot-thumbnail-container {
    position: relative;
  }
</style>
<script>
function toggleWatch(lotPk, element) {
    const isWatched = element.classList.contains('watched');
    fetch('/api/watchitem/' + lotPk + '/', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': '{{ csrf_token }}'
        },
        body: 'watch=' + (!isWatched)
    })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.text();
    })
    .then(result => {
        if (result === 'Success') {
            if (!isWatched) {
                element.classList.add('watched');
                element.innerHTML = '<i class="bi bi-star-fill"></i>';
            } else {
                element.classList.remove('watched');
                element.innerHTML = '<i class="bi bi-star"></i>';
            }
        }
    })
    .catch(error => {
        console.error('Error toggling watch status:', error);
    });
}
</script>
<div class="container">
  <div class="row">
{% if not object_list %}
  {% if embed == 'all_lots' %}
    {% if auction %}
      {% if not auction.started and not auction.closed %}
        <h5>This auction hasn't started yet.  Check back {{ auction.date_start }}.</h5>
      {% elif recently_added_lots_hidden %}
        <h5>Recently added lots will appear here shortly</h5>
      {% else %}
      <h5>No lots found</h5>{#No lots have been added to the {{ auction }} yet.#}
      {% endif %}
    {% else %}
    <h5>No lots found</h5>
    {% endif %}
  {% else %}
  <h5>You've already seen all your recommended lots</h5>
  {% endif %}
{% else %}
{% for lot in object_list %}
<div class="col-sm-6 col-md-4 col-lg-4 col-xl-3 py-2">
<div class="card text-white bg-dark mb-3 h-100 mh-75" style="max-width: 22rem; {% if lot.ended or lot.sold %}
box-shadow: 0px 0px 1px 2px rgba(238, 59, 59, 0.281),
0px 0px 2px 3px rgba(255, 50, 50, .5),
0px 0px 5px 4px rgba(255, 20, 20, 0.336);{%endif%}">
      <div class="card-header">
        {% if lot.auction and display_auction_on_lots %}<span class='text-info'><small>{{ lot.auction }}</small></span><br>{%endif%}
        {% if lot.promoted %}<span class="badge bg-success">Promoted</span>{% endif %}
        {% if lot_view_type == 'mybids' and not lot.ended and not lot.sealed_bid and lot.high_bidder and lot.high_bidder.pk != request.user.pk %}<span class="badge bg-danger">Outbid</span>{% endif %}
        Lot {{ lot.lot_number_display }}
        {% if lot.auction %}
        <!--<span class="badge bg-light">Auction</span>-->
          {% else %}
            {% if lot.local_pickup %}
            <span class="badge bg-dark">{{ lot.distance|distance_display:request.user }}</span>
            {% else %}
              {% if request.user.userdata.location in lot.shipping_locations.all %}
              <span class="badge bg-light text-dark">Ships</span>
              {% else %}
              {% if lot.shipping_locations.all %}
              <span class="badge bg-light text-dark">Ships*</span>
              {% else %}
              <span class="badge bg-danger">Not available</span>
              {%endif%}
              {% endif %}
            {% endif %}
          {% endif %}
          {% if lot.banned %}
                <span class="badge bg-danger">Removed</span>
          {% endif %}
          {% if lot.deactivated %}
                <span class="badge bg-danger">Deactivated</span>
          {% endif %}
          {% if lot.date_posted > lastView %}<span class="badge bg-info">New</span>{%endif%}

          {# activity badge #}
          {% if lot.user == request.user %}{% if lot.owner_chats %}<span class='badge-pill badge bg-warning' style='color:black;font-weight:900'>{{ lot.owner_chats }}</span>{% endif %}
          {% else %}
          {% if lot.all_chats %}<span data-toggle="tooltip" data-placement="bottom" data-html="true" title="Chat messages" class='badge-pill badge bg-light text-dark' style='font-weight:900'>{{lot.all_chats}}</span>{% endif %}
          {% endif %}

          <div style='float: right; overflow: hidden;'>{% if lot.donation %}Donation{% else %}{% if lot.auction.is_online or not lot.auction %} {{ lot.seller_as_str }}{% endif %}{% endif %}</div></div>

      <div class="card-body">
        <h5 class="card-title">
          <a href="{{ lot.lot_link }}?src={{src}}" class="text-reset text-decoration-none">{{ lot.lot_name }}</a>
          {% if not lot.thumbnail and request.user.is_authenticated %}
            {% if lot.is_watched_by_req_user or not lot.ended %}
            <span class="watch-icon text-warning{% if lot.is_watched_by_req_user %} watched{% endif %}" onclick="toggleWatch({{ lot.pk }}, this)" style="float: right;">
              {% if lot.is_watched_by_req_user %}
              <i class="bi bi-star-fill"></i>
              {% else %}
              <i class="bi bi-star"></i>
              {% endif %}
            </span>
            {% endif %}
          {% endif %}
        </h5>
        {% if not lot.auction.ended and lot.sold %}<h1 class='text-danger font-weight-bold' style="position: absolute;-ms-transform: rotate(-20deg);transform: rotate(-20deg);">SOLD</h1>{%endif%}
          {% if lot.thumbnail %}
          <div class="lot-thumbnail-container">
            <img class="card-img-top" src="{{ lot.thumbnail.thumbnail_url }}" style="max-width:100%; max-height:150px; object-fit:cover;"></img>
            {% if request.user.is_authenticated %}
              {% if lot.is_watched_by_req_user or not lot.ended %}
              <div class="watch-icon-overlay">
                <span class="watch-icon text-warning{% if lot.is_watched_by_req_user %} watched{% endif %}" onclick="toggleWatch({{ lot.pk }}, this)">
                  {% if lot.is_watched_by_req_user %}
                  <i class="bi bi-star-fill"></i>
                  {% else %}
                  <i class="bi bi-star"></i>
                  {% endif %}
                </span>
              </div>
              {% endif %}
            {% endif %}
          </div>
          {% endif %}
        <p class="card-text">
          {% if not lot.auction or lot.auction.use_categories %}<span class="text-muted"><small>{{ lot.species_category }}</small></span><br>{% endif %}
          {% if not lot.auction or lot.auction.online_bidding != 'disable' %}<b>{% if lot.high_bid %}{{ lot.currency_symbol }}{{ lot.high_bid }}{% endif %}</b> {{ lot.high_bidder_display }}
          <br>{% endif %}
          {% if not lot.auction or lot.auction.is_online %}<small class='text-muted'>{{ lot.calculated_end_for_templates }}</small><br>{% endif %}
        </p>
      </div>
      <div class="card-footer bg-dark text-muted border-top-0">
        <!-- <div style='position: absolute; bottom: 1em; width:80%; left: 50%;
        transform: translate(-50%);'> -->

          <a href="{{ lot.lot_link }}?src={{src}}" class="btn bg-primary bg-gradient"
          style='width:100%; {% if lot.ended or lot.sold %}' data-toggle="tooltip" data-placement="bottom" data-html="true" title='{% if lot.winner_as_str %}Sold to {{ lot.winner_as_str }}{% else %}Ended{% endif %}{% endif %}
            ' >See details</a>
          <!-- </div> -->
        </div>
    </div>
  </div>
    {% endfor %}

</div>
{% include "ad.html" %}
</div>

{% if embed == 'all_lots' %}
  {% show_more %}
{% endif %}

{% endif %}