{#
  Copyright (C) 2020 CERN.
  Copyright (C) 2020 Northwestern University.
  Copyright (C) 2020-2026 Graz University of Technology.

  invenio-override is free software; you can redistribute it and/or
  modify it under the terms of the MIT License; see LICENSE file for more
  details.

  Overrides: invenio_app_rdm/users/uploads.html
  Changes:
    - Added title and page_description for the page inner banner.
    - Added mobile action bar with "New upload" button.
    - Added desktop "New upload" circle button injected via JS into the
      React search row after render.
#}
{%- set title = _("Uploads") %}
{%- set page_description = _("Manage and publish your research data, publications and other outputs.") %}
{%- extends "invenio_app_rdm/users/base.html" %}
{% set active_dashboard_menu_item = "uploads" %}
{%- block javascript %}
  {{ super() }}
  {{ webpack['invenio-app-rdm-user-uploads.js'] }}
{%- endblock javascript %}
{%- block user_dashboard_body %}
  {# Mobile/tablet: upload button shown above results on small screens #}
  <div class="dashboard-mobile-action-bar">
    <a href="{{ url_for('invenio_app_rdm_records.deposit_create') }}"
       class="upload-new-circle"
       title="{{ _('New upload') }}">
      <i class="upload icon"></i>
    </a>
    <div class="upload-new-label-wrap">
      <span class="upload-new-title">{{ _('New upload') }}</span>
      <span class="upload-new-desc">{{ _("Share your research") }}</span>
    </div>
  </div>
  <div id="invenio-search-config"
       class="uploads-search-app"
       data-invenio-search-config='{{ search_app_rdm_user_uploads_config(app_id="InvenioAppRdm.DashboardUploads") | tojson }}'>
  </div>
  {# Desktop: Upload button injected into the search/tabs row by JS after React renders #}
  <div id="upload-new-circle" class="upload-new-wrap" style="display:none;">
    <a href="{{ url_for('invenio_app_rdm_records.deposit_create') }}"
       class="upload-new-circle"
       title="{{ _('New upload') }}">
      <i class="upload icon"></i>
    </a>
    <div class="upload-new-label-wrap">
      <span class="upload-new-title">{{ _('New upload') }}</span>
      <span class="upload-new-desc">{{ _("Share your research") }}</span>
    </div>
  </div>
  <script>
  (function () {
    function injectUploadCircle() {
      var circle = document.getElementById('upload-new-circle');
      if (!circle) return;
      var filterRow = document.querySelector('#invenio-search-config .ui.grid > .row.computer.only');
      if (!filterRow) return;
      var firstCol = filterRow.querySelector('.column:first-child');
      if (!firstCol) return;
      firstCol.style.display = 'flex';
      firstCol.style.alignItems = 'center';
      firstCol.style.justifyContent = 'flex-start';
      circle.style.display = 'inline-flex';
      firstCol.appendChild(circle);
    }

    /* React renders asynchronously — poll until the row exists */
    var attempts = 0;
    var interval = setInterval(function () {
      attempts++;
      var row = document.querySelector('#invenio-search-config .ui.grid > .row.computer.only');
      if (row) {
        clearInterval(interval);
        injectUploadCircle();
      } else if (attempts > 40) {
        clearInterval(interval);
      }
    }, 100);
  })();
  </script>
{%- endblock user_dashboard_body %}