{#
  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_records_lom/uploads.html
  Changes:
    - Added mobile action bar with "New upload" button.
    - Added desktop "New upload" circle button injected via JS into the
      React search row after render.
#}
{%- extends config.LOM_BASE_TEMPLATE %}
{%- set active_dashboard_menu_item = "OER" %}
{%- set title = _("Educational Resources") %}
{%- set page_description = _("Manage and publish your openly licensed educational materials.") %}
{%- block javascript %}
  {{ super() }}
  {{ webpack['invenio-records-lom-user-dashboard.js'] }}
{%- endblock javascript %}
{%- block page_body %}
  {%- block user_dashboard_header %}
    {% include "invenio_app_rdm/users/header.html" %}
  {%- endblock user_dashboard_header %}
  <div class="dashboard-mobile-action-bar">
    <a href="/oer/uploads/new" class="upload-new-circle">
      <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 educational resources") }}</span>
    </div>
  </div>
  <div class="ui container rel-mt-2">
    <div id="invenio-search-lom-config"
         class="uploads-search-app"
         data-invenio-search-config='{{ search_app_lom_user_uploads_config() | tojson }}'></div>
  </div>
  <div id="upload-new-circle-lom"
       class="upload-new-wrap"
       style="display:none">
    <a href="/oer/uploads/new" class="upload-new-circle">
      <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 educational resources") }}</span>
    </div>
  </div>
  <script>
  (function () {
    function injectUploadCircle() {
      var circle = document.getElementById('upload-new-circle-lom');
      if (!circle) return;
      var filterRow = document.querySelector('#invenio-search-lom-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);
    }

    var attempts = 0;
    var interval = setInterval(function () {
      attempts++;
      var row = document.querySelector('#invenio-search-lom-config .ui.grid > .row.computer.only');
      if (row) {
        clearInterval(interval);
        injectUploadCircle();
      } else if (attempts > 40) {
        clearInterval(interval);
      }
    }, 100);
  })();
  </script>
{%- endblock page_body %}