{% if g.login.is_authenticated() %}
  {{ accordion.header('Management', 'set-management', 'set-details', icon='settings-4-line', class='p-0') }}
    {{ accordion.header('Owners', 'owner', 'set-management', icon='group-line', class='p-0') }}
      <ul class="list-group list-group-flush">
      {% if brickset_owners | length %}
        {% for owner in brickset_owners %}
          <li class="d-flex list-group-item list-group-item-action text-nowrap">{{ form.checkbox(owner.fields.name, item.fields.id, owner.as_dataset(), owner.url_for_set_state(item.fields.id), item.fields[owner.as_column()], delete=delete) }}</li>
        {% endfor %}
      {% else %}
        <li class="list-group-item list-group-item-action text-center"><i class="ri-error-warning-line"></i> No owner found.</li>
        {% endif %}
      </ul>
      <div class="list-group list-group-flush border-top">
        <a class="list-group-item list-group-item-action" href="{{ url_for('admin.admin', open_owner=true) }}"><i class="ri-settings-4-line"></i> Manage the set owners</a>
      </div>
    {{ accordion.footer() }}
    {{ accordion.header('Purchase', 'purchase', 'set-management', icon='wallet-3-line') }}
      <div class="alert alert-info" role="alert">The expected date format here is <code>yyyy/mm/dd</code> (year/month/day), but you can configured how it is displayed in the set card with the <code>PURCHASE_DATE_FORMAT</code> variable.</div>
      <div class="row row-cols-lg-auto g-1 justify-content-start align-items-center pb-2">
        <div class="col-12">
          {{ form.input('Date', item.fields.id, 'date', item.url_for_purchase_date(), item.purchase_date(standard=true), icon='calendar-line', date=true) }}
        </div>
        <div class="col-12 flex-grow-1">
          {{ form.input('Price', item.fields.id, 'price', item.url_for_purchase_price(), item.fields.purchase_price, suffix=config['PURCHASE_CURRENCY'], icon='wallet-3-line') }}
        </div>
        <div class="col-12 flex-grow-1">
          {% if brickset_purchase_locations | length %}
            {{ form.select('Location', item.fields.id, brickset_purchase_locations.as_prefix(), brickset_purchase_locations.url_for_set_value(item.fields.id), item.fields.purchase_location, brickset_purchase_locations, icon='building-line', delete=delete) }}
          {% else %}
            <i class="ri-error-warning-line"></i> No purchase location found.
          {% endif %}
        </div>
      </div>
      <hr>
      <a href="{{ url_for('admin.admin', open_purchase_location=true) }}" class="btn btn-primary" role="button"><i class="ri-settings-4-line"></i> Manage the set purchase locations</a>
    {{ accordion.footer() }}
    {{ accordion.header('Notes', 'notes', 'set-management', icon='sticky-note-line') }}
      {{ form.textarea('Notes', item.fields.id, 'description', item.url_for_description(), item.fields.description, rows=4, delete=delete) }}
    {{ accordion.footer() }}
    {{ accordion.header('Storage', 'storage', 'set-management', icon='archive-2-line') }}
      {% if brickset_storages | length %}
      {{ form.select('Storage', item.fields.id, brickset_storages.as_prefix(), brickset_storages.url_for_set_value(item.fields.id), item.fields.storage, brickset_storages, icon='building-line', delete=delete) }}
      {% else %}
        <p class="text-center"><i class="ri-error-warning-line"></i> No storage found.</p>
      {% endif %}
      <hr>
      <a href="{{ url_for('admin.admin', open_storage=true) }}" class="btn btn-primary" role="button"><i class="ri-settings-4-line"></i> Manage the set storages</a>
    {{ accordion.footer() }}
    {{ accordion.header('Tags', 'tag', 'set-management', icon='price-tag-2-line', class='p-0') }}
      <ul class="list-group list-group-flush">
      {% if brickset_tags | length %}
        {% for tag in brickset_tags %}
          <li class="d-flex list-group-item list-group-item-action text-nowrap">{{ form.checkbox(tag.fields.name, item.fields.id, tag.as_dataset(), tag.url_for_set_state(item.fields.id), item.fields[tag.as_column()], delete=delete) }}</li>
        {% endfor %}
      {% else %}
        <li class="list-group-item list-group-item-action text-center"><i class="ri-error-warning-line"></i> No tag found.</li>
        {% endif %}
      </ul>
      <div class="list-group list-group-flush border-top">
        <a class="list-group-item list-group-item-action" href="{{ url_for('admin.admin', open_tag=true) }}"><i class="ri-settings-4-line"></i> Manage the set tags</a>
      </div>
    {{ accordion.footer() }}
    {{ accordion.header('Custom fields', 'custom-field', 'set-management', icon='edit-line') }}
      {% if brickset_custom_fields | length %}
        <div class="row row-cols-1 g-2 pb-2">
          {% for custom_field in brickset_custom_fields %}
            <div class="col-12">
              {{ form.input(custom_field.fields.name, item.fields.id, custom_field.as_dataset(), custom_field.url_for_set_state(item.fields.id), item.fields[custom_field.as_column()], icon=('calendar-line' if custom_field.fields.type == 'date' else ('hashtag' if custom_field.fields.type == 'number' else 'edit-line')), date=(custom_field.fields.type == 'date')) }}
            </div>
          {% endfor %}
        </div>
        <hr>
      {% else %}
        <p class="text-center"><i class="ri-error-warning-line"></i> No custom field found.</p>
      {% endif %}
      <a href="{{ url_for('admin.admin', open_custom_field=true) }}" class="btn btn-primary" role="button"><i class="ri-settings-4-line"></i> Manage the custom fields</a>
    {{ accordion.footer() }}
    {{ accordion.header('Data', 'data', 'set-management', icon='database-2-line') }}
      <a href="{{ item.url_for_refresh() }}" class="btn btn-primary" role="button"><i class="ri-refresh-line"></i> Refresh the set data</a>
    {{ accordion.footer() }}
    {% if sidecar_enabled %}
    {{ accordion.header('Cover image', 'cover', 'set-management', icon='image-line') }}
      <p class="text-muted small mb-2">Replace the Rebrickable cover with BrickLink box/set art from the sidecar. A backup of the original is kept so you can restore it.</p>
      <div class="d-flex flex-wrap gap-2">
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#coverPreviewModal"
          data-cover-type="box" data-cover-label="Box art"
          data-cover-preview="{{ sidecar.image_proxy_url('box', item.fields.set) }}"
          data-cover-action="{{ item.url_for_cover('box') }}">
          <i class="ri-eye-line"></i> Preview box art
        </button>
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#coverPreviewModal"
          data-cover-type="set" data-cover-label="Set image"
          data-cover-preview="{{ sidecar.image_proxy_url('set', item.fields.set) }}"
          data-cover-action="{{ item.url_for_cover('set') }}">
          <i class="ri-eye-line"></i> Preview set image
        </button>
        <form action="{{ item.url_for_cover_restore() }}" method="post" class="d-inline">
          <button type="submit" class="btn btn-outline-secondary"><i class="ri-arrow-go-back-line"></i> Restore Rebrickable image</button>
        </form>
      </div>

      {# Pick any Brickset additional image as the cover (opt-in). Each thumbnail
         feeds the same preview modal as the box/set buttons above. #}
      {% if sidecar_summary and sidecar_summary.additional_images_enabled and sidecar_summary.additional_image_count %}
        <p class="text-muted small mt-3 mb-2">Or use one of the {{ sidecar_summary.additional_image_count }} additional Brickset image(s):</p>
        <div class="d-flex flex-wrap gap-2">
          {% for i in range(sidecar_summary.additional_image_count) %}
            <button type="button" class="btn btn-outline-primary p-1" data-bs-toggle="modal" data-bs-target="#coverPreviewModal"
              data-cover-type="additional" data-cover-label="Additional image {{ i + 1 }}"
              data-cover-preview="{{ sidecar.additional_image_url(item.fields.set, i) }}"
              data-cover-action="{{ item.url_for_cover_additional(i) }}">
              <img src="{{ sidecar.additional_image_url(item.fields.set, i, thumbnail=true) }}" alt="Additional image {{ i + 1 }}" style="height: 48px; width: auto;" loading="lazy">
            </button>
          {% endfor %}
        </div>
      {% endif %}

      <!-- Cover preview modal -->
      <div class="modal fade" id="coverPreviewModal" tabindex="-1" aria-labelledby="coverPreviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="coverPreviewModalLabel">Cover preview</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-center">
              <img id="coverPreviewImage" src="" alt="Cover preview" class="img-fluid" style="max-height: 60vh;"
                onerror="this.classList.add('d-none'); document.getElementById('coverPreviewMissing').classList.remove('d-none');">
              <p id="coverPreviewMissing" class="text-muted mt-2 d-none"><i class="ri-error-warning-line"></i> The sidecar has no image of this type for this set.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <form id="coverApplyForm" action="" method="post" class="d-inline">
                <button type="submit" class="btn btn-primary"><i class="ri-check-line"></i> Use as cover (override)</button>
              </form>
            </div>
          </div>
        </div>
      </div>

      <script>
        (function () {
          var modal = document.getElementById('coverPreviewModal');
          if (!modal) { return; }
          modal.addEventListener('show.bs.modal', function (event) {
            var button = event.relatedTarget;
            if (!button) { return; }
            var image = document.getElementById('coverPreviewImage');
            // Reset state from any previous open
            document.getElementById('coverPreviewMissing').classList.add('d-none');
            image.classList.remove('d-none');
            image.src = button.getAttribute('data-cover-preview') || '';
            document.getElementById('coverPreviewModalLabel').textContent = (button.getAttribute('data-cover-label') || 'Cover') + ' preview';
            document.getElementById('coverApplyForm').setAttribute('action', button.getAttribute('data-cover-action') || '');
          });
        })();
      </script>
    {{ accordion.footer() }}
    {% endif %}
  {{ accordion.footer() }}
{% endif %}