{#
  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/communities.html
  Changes:
    - Added title and page_description for the page inner banner.
    - Added mobile action bar with "New community" button.
    - Added desktop "New community" circle button injected via JS into the
      React search row after render.
#}
{%- set title = _("Communities") %}
{%- set page_description = _("Manage your communities and collaborate with others.") %}
{%- extends "invenio_app_rdm/users/base.html" %}
{% set active_dashboard_menu_item = "communities" %}
{%- block javascript %}
  {{ super() }}
  {{ webpack['invenio-app-rdm-user-communities.js'] }}
{%- endblock javascript %}
{%- block user_dashboard_body %}
  {% if can_create_community %}
    {# Mobile/tablet: new community button shown above results on small screens #}
    <div class="dashboard-mobile-action-bar">
      <a href="{{ invenio_url_for('invenio_communities.communities_new') }}"
         class="upload-new-circle"
         title="{{ _('New community') }}">
        <i class="plus icon"></i>
      </a>
      <div class="upload-new-label-wrap">
        <span class="upload-new-title">{{ _('New community') }}</span>
        <span class="upload-new-desc">{{ _("Create a shared space") }}</span>
      </div>
    </div>
  {% endif %}
  <div id="invenio-search-config"
       class="communities-search-app"
       data-invenio-search-config='{{ search_app_rdm_user_communities_config(app_id="InvenioAppRdm.DashboardCommunities") | tojson }}'
       data-can-create-community='{{ can_create_community | tojson }}'></div>
  {% if can_create_community %}
    {# Desktop: new community button injected into the search/tabs row by JS after React renders #}
    <div id="new-community-circle"
         class="upload-new-wrap"
         style="display:none">
      <a href="{{ invenio_url_for('invenio_communities.communities_new') }}"
         class="upload-new-circle"
         title="{{ _('New community') }}">
        <i class="plus icon"></i>
      </a>
      <div class="upload-new-label-wrap">
        <span class="upload-new-title">{{ _('New community') }}</span>
        <span class="upload-new-desc">{{ _("Create a shared space") }}</span>
      </div>
    </div>
    <script>
  (function () {
    function injectCommunityCircle() {
      var circle = document.getElementById('new-community-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);
    }

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