{% import 'macro/accordion.html' as accordion %}

{% if sidecar_enabled %}
{{ accordion.header('Value', 'value', 'admin', expanded=open_value, icon='funds-line') }}
  <p>
    Fetch and cache the BrickLink market value for every set in your collection through the
    sidecar. Sets whose value is still fresh (within the cache TTL) are skipped, so this is
    safe to run again. It is the slow live path, so it runs one set at a time, politely.
  </p>

  <div id="value-fail" class="alert alert-danger d-none" role="alert"></div>
  <div id="value-complete"></div>

  <div class="mb-3">
    <p>
      Progress <span id="value-count"></span>
      <span id="value-spinner" class="d-none">
        <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
        <span class="visually-hidden" role="status">Loading...</span>
      </span>
    </p>
    <div id="value-progress" class="progress" role="progressbar">
      <div id="value-progress-bar" class="progress-bar" style="width: 0%"></div>
    </div>
    <p id="value-progress-message" class="text-center d-none"></p>
  </div>

  <div class="d-flex align-items-center justify-content-end">
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#valueConfirmModal">
      <i class="ri-funds-line"></i> Update all sets
    </button>
  </div>

  <!-- Confirmation modal -->
  <div class="modal fade" id="valueConfirmModal" tabindex="-1" aria-labelledby="valueConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="valueConfirmModalLabel">Update all set values?</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          This will fetch the BrickLink market value for every set that is not already cached.
          Depending on how many sets need pricing this can take a while and makes live calls
          through the sidecar. Sets with a fresh cached value are skipped.
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="button" id="value-button" class="btn btn-primary" data-bs-dismiss="modal">
            <i class="ri-funds-line"></i> Update all sets
          </button>
        </div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      new BrickValueSocket(
        'value',
        '{{ path }}',
        '{{ namespace }}',
        {
          COMPLETE: '{{ messages['COMPLETE'] }}',
          FAIL: '{{ messages['FAIL'] }}',
          PROGRESS: '{{ messages['PROGRESS'] }}',
          VALUE_ALL_SETS: '{{ messages['VALUE_ALL_SETS'] }}',
        }
      );
    });
  </script>
{{ accordion.footer() }}
{% endif %}