{% set intro = g.site_intro_text %}

{% block home_image %}
<section class="banner position-relative hero-section" style="background-image: url({{ h.url_for_static_or_external(config.get('ckanext.matolabtheme.banner_top')) }});">

  {# ── Top bar: logo (left) + user (right) ──────────────────────────── #}
  <div class="hero-topbar d-flex justify-content-between align-items-center px-4 pt-3">
    <a href="{{ h.url_for('home.index') }}" class="hero-logo-link">
      {% if g.site_logo %}
      <img src="{{ h.url_for_static_or_external(g.site_logo) }}" alt="{{ g.site_title }}" class="hero-logo-img"/>
      {% else %}
      <img src="{{ h.url_for_static('/static/Logo.svg') }}" alt="{{ g.site_title }}" class="hero-logo-img"/>
      {% endif %}
    </a>
    <div class="hero-user">
      {% if c.userobj %}
      <a class="btn btn-outline-light btn-sm" href="{{ h.url_for('dashboard.datasets') }}"
         data-module="me" data-me="{{ c.userobj.id }}">
        {{ h.user_image((c.user if c and c.user else ''), size=20) }}
        <span class="username ms-1">{{ c.userobj.display_name }}</span>
      </a>
      {% else %}
      <a class="btn btn-outline-light btn-sm" href="{{ h.url_for('user.login') }}">{{ _("Log in") }}</a>
      {% endif %}
    </div>
  </div>

  {# ── Hero body: title + subtitle + search ─────────────────────────── #}
  <div class="hero-body d-flex flex-column justify-content-center align-items-center text-center px-3">
    {% if intro %}
    <div class="text-light hero-intro">{{ h.render_markdown(intro|replace('^[ \t]*|[ \t]*$', '')) }}</div>
    {% else %}
    <h1 class="hero-title fw-bold mb-3">{{ g.site_description or g.site_title }}</h1>
    <p class="hero-subtitle mb-4">
      {% trans %}Find and explore datasets — all in one place.{% endtrans %}
    </p>
    {% endif %}
    <form class="hero-search" action="{{ url_for('dataset.search') }}" method="get">
      <div class="input-group">
        <input id="search" class="form-control form-control-lg" type="search" name="q"
               placeholder="{{ _('Search...') }}" aria-label="{{ _('Search') }}"/>
        <button class="btn btn-primary px-4" type="submit" aria-label="{{ _('Submit') }}">
          <i class="fa fa-search"></i>
        </button>
      </div>
    </form>
  </div>

</section>

{# ── Counter strip ────────────────────────────────────────────────────── #}
<div class="counter-row m-0 row g-4 py-3"
     data-module="matolabtheme-module"
     data-api-url="{{ h.url_for('api.action', ver=3, logic_function='matolabtheme_stats') }}">
  <div class="col d-flex align-items-start justify-content-center border-light-5">
    <a class="counter-link m-3" href="{{ h.url_for('dataset.search') }}">
      <h1 class="fw-bold mb-0"><i class="fas fa-box-open"></i>
        <div id="dataset_counter" class="theme-counter" data-target="0" data-duration="0.5">0</div>
      </h1>
      <h3>{{ _("Datasets") }}</h3>
    </a>
  </div>
  <div class="col d-flex justify-content-center border-start border-light-5">
    <a class="counter-link m-3" href="{{ h.url_for('dataset.search') }}">
      <h1 class="fw-bold mb-0"><i class="fas fa-file-alt"></i>
        <div id="resource_counter" class="theme-counter" data-target="0" data-duration="0.5">0</div>
      </h1>
      <h3>{{ _("Resources") }}</h3>
    </a>
  </div>
  <div class="col d-flex justify-content-center border-start border-light-5">
    <a class="counter-link m-3" href="{{ h.url_for('organization.index') }}">
      <h1 class="fw-bold mb-0"><i class="fas fa-building"></i>
        <div id="orgs_counter" class="theme-counter" data-target="0" data-duration="0.5">0</div>
      </h1>
      <h3>{{ _("Organizations") }}</h3>
    </a>
  </div>
</div>
{% endblock %}