gh-christianlouis-docuelevate/frontend/templates/index.html

{% extends "base.html" %}
{% block title %}{% if multi_user_enabled and not is_logged_in %}{{ _("index.page_title_public") }}{% else %}{{ _("index.page_title_dashboard") }}{% endif %}{% endblock %}

{% block content %}
<div class="{% if multi_user_enabled and not is_logged_in %}bg-gray-50 min-h-screen{% else %}container mx-auto px-4 py-8{% endif %}">

{% if multi_user_enabled and not is_logged_in %}
{# ══════════════════════════════════════════════════════════════════════════ #}
{# PUBLIC LANDING PAGE (multi-user, visitor not signed in)                  #}
{# ══════════════════════════════════════════════════════════════════════════ #}

  <!-- Hero -->
  <div class="bg-gradient-to-br from-blue-700 via-indigo-700 to-purple-700 text-white py-20 px-4">
    <div class="max-w-4xl mx-auto text-center">
      <span class="inline-block bg-white/20 text-white text-xs font-semibold uppercase tracking-widest px-3 py-1 rounded-full mb-4">
        {{ _("index.badge_intelligent") }}
      </span>
      <h1 class="text-4xl sm:text-5xl font-extrabold mb-4 leading-tight">
        {{ _("index.hero_heading") }}
      </h1>
      <p class="text-indigo-100 text-lg max-w-2xl mx-auto mb-8">
        {{ _("index.hero_description") }}
      </p>
      <div class="flex flex-wrap justify-center gap-4">
        {% if allow_signup %}
        <a href="/signup"
           class="bg-white text-indigo-700 hover:bg-indigo-50 font-bold py-3 px-8 rounded-xl shadow-lg transition duration-200 flex items-center min-h-[44px]">
          <i class="fas fa-user-plus mr-2" aria-hidden="true"></i> {{ _("index.hero_signup") }}
        </a>
        {% else %}
        <a href="/login"
           class="bg-white text-indigo-700 hover:bg-indigo-50 font-bold py-3 px-8 rounded-xl shadow-lg transition duration-200 flex items-center min-h-[44px]">
          <i class="fas fa-sign-in-alt mr-2" aria-hidden="true"></i> {{ _("index.hero_login") }}
        </a>
        {% endif %}
        <a href="/pricing"
           class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-700 font-bold py-3 px-8 rounded-xl transition duration-200 flex items-center min-h-[44px]">
          <i class="fas fa-tags mr-2" aria-hidden="true"></i> {{ _("index.hero_pricing") }}
        </a>
      </div>
    </div>
  </div>

  <!-- Feature grid -->
  <div class="max-w-6xl mx-auto px-4 py-16">
    <h2 class="text-2xl font-bold text-center text-gray-800 mb-10">{{ _("index.feature_section_title") }}</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">

      <div class="bg-white rounded-2xl shadow p-6 flex gap-4">
        <div class="h-12 w-12 rounded-xl bg-blue-100 flex items-center justify-center flex-shrink-0">
          <i class="fas fa-file-alt text-blue-600 text-xl" aria-hidden="true"></i>
        </div>
        <div>
          <h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_ocr") }}</h3>
          <p class="text-gray-500 text-sm">{{ _("index.feature_ocr_desc") }}</p>
        </div>
      </div>

      <div class="bg-white rounded-2xl shadow p-6 flex gap-4">
        <div class="h-12 w-12 rounded-xl bg-indigo-100 flex items-center justify-center flex-shrink-0">
          <i class="fas fa-brain text-indigo-600 text-xl" aria-hidden="true"></i>
        </div>
        <div>
          <h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_ai") }}</h3>
          <p class="text-gray-500 text-sm">{{ _("index.feature_ai_desc") }}</p>
        </div>
      </div>

      <div class="bg-white rounded-2xl shadow p-6 flex gap-4">
        <div class="h-12 w-12 rounded-xl bg-green-100 flex items-center justify-center flex-shrink-0">
          <i class="fas fa-cloud-upload-alt text-green-600 text-xl" aria-hidden="true"></i>
        </div>
        <div>
          <h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_cloud") }}</h3>
          <p class="text-gray-500 text-sm">{{ _("index.feature_cloud_desc") }}</p>
        </div>
      </div>

      <div class="bg-white rounded-2xl shadow p-6 flex gap-4">
        <div class="h-12 w-12 rounded-xl bg-yellow-100 flex items-center justify-center flex-shrink-0">
          <i class="fas fa-mail-bulk text-yellow-600 text-xl" aria-hidden="true"></i>
        </div>
        <div>
          <h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_email") }}</h3>
          <p class="text-gray-500 text-sm">{{ _("index.feature_email_desc") }}</p>
        </div>
      </div>

      <div class="bg-white rounded-2xl shadow p-6 flex gap-4">
        <div class="h-12 w-12 rounded-xl bg-purple-100 flex items-center justify-center flex-shrink-0">
          <i class="fas fa-search text-purple-600 text-xl" aria-hidden="true"></i>
        </div>
        <div>
          <h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_search") }}</h3>
          <p class="text-gray-500 text-sm">{{ _("index.feature_search_desc") }}</p>
        </div>
      </div>

      <div class="bg-white rounded-2xl shadow p-6 flex gap-4">
        <div class="h-12 w-12 rounded-xl bg-pink-100 flex items-center justify-center flex-shrink-0">
          <i class="fas fa-project-diagram text-pink-600 text-xl" aria-hidden="true"></i>
        </div>
        <div>
          <h3 class="font-semibold text-gray-800 mb-1">{{ _("index.feature_pipelines") }}</h3>
          <p class="text-gray-500 text-sm">{{ _("index.feature_pipelines_desc") }}</p>
        </div>
      </div>

    </div>
  </div>

  <!-- CTA banner -->
  <div class="bg-indigo-700 text-white py-14 px-4">
    <div class="max-w-2xl mx-auto text-center">
      <h2 class="text-3xl font-extrabold mb-4">{{ _("index.cta_heading") }}</h2>
      <p class="text-indigo-200 mb-8">{{ _("index.cta_description") }}</p>
      <div class="flex flex-wrap justify-center gap-4">
        {% if allow_signup %}
        <a href="/signup"
           class="bg-white text-indigo-700 hover:bg-indigo-50 font-bold py-3 px-8 rounded-xl shadow-lg transition duration-200 flex items-center min-h-[44px]">
          <i class="fas fa-rocket mr-2" aria-hidden="true"></i> {{ _("index.cta_signup") }}
        </a>
        {% else %}
        <a href="/login"
           class="bg-white text-indigo-700 hover:bg-indigo-50 font-bold py-3 px-8 rounded-xl shadow-lg transition duration-200 flex items-center min-h-[44px]">
          <i class="fas fa-sign-in-alt mr-2" aria-hidden="true"></i> {{ _("index.hero_login") }}
        </a>
        {% endif %}
        <a href="/pricing"
           class="bg-transparent border-2 border-white text-white hover:bg-white hover:text-indigo-700 font-bold py-3 px-8 rounded-xl transition duration-200 flex items-center min-h-[44px]">
          <i class="fas fa-tags mr-2" aria-hidden="true"></i> {{ _("index.cta_pricing") }}
        </a>
      </div>
    </div>
  </div>

{% elif multi_user_enabled %}
{# ══════════════════════════════════════════════════════════════════════════ #}
{# MULTI-USER / SAAS DASHBOARD (logged-in user)                             #}
{# ══════════════════════════════════════════════════════════════════════════ #}

  <!-- Hero -->
  <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-lg text-white p-8 mb-8">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <div>
        <h1 class="text-3xl font-bold mb-1">DocuElevate</h1>
        <p class="text-blue-100 text-sm">{{ _("index.dashboard_subtitle_teams") }}</p>
      </div>
      <div class="flex flex-wrap gap-3">
        <a href="/upload"
           class="bg-white text-blue-700 hover:bg-blue-50 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center shadow-sm">
          <i class="fas fa-upload mr-2" aria-hidden="true"></i> {{ _("index.button_upload") }}
        </a>
        <a href="/files"
           class="bg-transparent border border-white text-white hover:bg-white hover:text-blue-700 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center">
          <i class="fas fa-list mr-2" aria-hidden="true"></i> {{ _("index.button_browse_files") }}
        </a>
      </div>
    </div>
  </div>

  <!-- Platform stats row (admin only) -->
  {% if is_admin %}
  <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-widest mb-3">{{ _("index.platform_overview") }}</h2>
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
    <div class="bg-white rounded-xl shadow p-5 flex items-center gap-3">
      <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-file-alt text-blue-600" aria-hidden="true"></i>
      </div>
      <div>
        <p class="text-2xl font-extrabold text-blue-600">{{ stats.processed_files | default(0) }}</p>
        <p class="text-gray-500 text-xs">{{ _("index.stat_total_files") }}</p>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow p-5 flex items-center gap-3">
      <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-calendar-day text-green-600" aria-hidden="true"></i>
      </div>
      <div>
        <p class="text-2xl font-extrabold text-green-600">{{ stats.files_today | default(0) }}</p>
        <p class="text-gray-500 text-xs">{{ _("index.stat_files_today") }}</p>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow p-5 flex items-center gap-3">
      <div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-calendar-alt text-indigo-600" aria-hidden="true"></i>
      </div>
      <div>
        <p class="text-2xl font-extrabold text-indigo-600">{{ stats.files_month | default(0) }}</p>
        <p class="text-gray-500 text-xs">{{ _("index.stat_files_month") }}</p>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow p-5 flex items-center gap-3">
      <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-users text-purple-600" aria-hidden="true"></i>
      </div>
      <div>
        <p class="text-2xl font-extrabold text-purple-600">{{ stats.unique_users | default(0) }}</p>
        <p class="text-gray-500 text-xs">{{ _("index.stat_active_users") }}</p>
      </div>
    </div>
  </div>
  {% endif %}

  <!-- My usage / subscription widget -->
  {% if user_tier and user_usage %}
  <h2 class="text-sm font-semibold text-gray-400 uppercase tracking-widest mb-3">{{ _("index.usage_my_usage") }}</h2>
  <div class="bg-white rounded-xl shadow p-6 mb-8">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
      <div class="flex items-center gap-3">
        <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold
          {% if user_tier.id == 'free' %}bg-gray-100 text-gray-600
          {% elif user_tier.id == 'starter' %}bg-blue-100 text-blue-700
          {% elif user_tier.id == 'professional' %}bg-indigo-100 text-indigo-700
          {% else %}bg-purple-100 text-purple-700{% endif %}">
          <i class="fas
            {% if user_tier.id == 'free' %}fa-seedling
            {% elif user_tier.id == 'starter' %}fa-rocket
            {% elif user_tier.id == 'professional' %}fa-star
            {% else %}fa-building{% endif %}
            mr-1" aria-hidden="true"></i>
          {{ user_tier.name }} {{ _("index.tier_plan") }}
        </span>
        {% if user_tier.id != 'business' %}
        <a href="/pricing" class="text-xs text-indigo-600 hover:text-indigo-800 font-medium">
          {{ _("index.tier_upgrade") }} <i class="fas fa-arrow-up-right-from-square ml-0.5 text-xs" aria-hidden="true"></i>
        </a>
        {% endif %}
      </div>
      <a href="/subscription" class="text-xs text-gray-500 hover:text-gray-700">
        {{ _("index.tier_view_details") }} →
      </a>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
      <!-- Lifetime -->
      <div>
        <div class="flex justify-between text-xs mb-1">
          <span class="text-gray-500">{{ _("index.usage_lifetime") }}</span>
          <span class="font-semibold text-gray-700">
            {{ user_usage.lifetime }}{% if user_tier.lifetime_file_limit > 0 %} / {{ user_tier.lifetime_file_limit }}{% endif %}
          </span>
        </div>
        {% if user_tier.lifetime_file_limit > 0 %}
        {% set pct = ([((user_usage.lifetime / user_tier.lifetime_file_limit) * 100) | int, 100] | min) %}
        <div class="w-full bg-gray-100 rounded-full h-2" role="progressbar" aria-valuemin="0"
             aria-valuenow="{{ user_usage.lifetime }}" aria-valuemax="{{ user_tier.lifetime_file_limit }}">
          <div class="h-2 rounded-full {% if pct >= 90 %}bg-red-500{% elif pct >= 70 %}bg-yellow-500{% else %}bg-green-500{% endif %}"
               style="width: {{ pct }}%"></div>
        </div>
        {% else %}
        <div class="text-xs text-green-600">{{ _("index.usage_unlimited") }}</div>
        {% endif %}
      </div>
      <!-- Today -->
      <div>
        <div class="flex justify-between text-xs mb-1">
          <span class="text-gray-500">{{ _("index.usage_today") }}</span>
          <span class="font-semibold text-gray-700">
            {{ user_usage.today }}{% if user_tier.daily_upload_limit > 0 %} / {{ user_tier.daily_upload_limit }}{% endif %}
          </span>
        </div>
        {% if user_tier.daily_upload_limit > 0 %}
        {% set pct = ([((user_usage.today / user_tier.daily_upload_limit) * 100) | int, 100] | min) %}
        <div class="w-full bg-gray-100 rounded-full h-2" role="progressbar" aria-valuemin="0"
             aria-valuenow="{{ user_usage.today }}" aria-valuemax="{{ user_tier.daily_upload_limit }}">
          <div class="h-2 rounded-full {% if pct >= 90 %}bg-red-500{% elif pct >= 70 %}bg-yellow-500{% else %}bg-blue-500{% endif %}"
               style="width: {{ pct }}%"></div>
        </div>
        {% else %}
        <div class="text-xs text-green-600">{{ _("index.usage_unlimited") }}</div>
        {% endif %}
      </div>
      <!-- This month -->
      <div>
        <div class="flex justify-between text-xs mb-1">
          <span class="text-gray-500">{{ _("index.usage_month") }}</span>
          <span class="font-semibold text-gray-700">
            {{ user_usage.month }}{% if user_tier.monthly_upload_limit > 0 %} / {{ user_tier.monthly_upload_limit }}{% endif %}
          </span>
        </div>
        {% if user_tier.monthly_upload_limit > 0 %}
        {% set pct = ([((user_usage.month / user_tier.monthly_upload_limit) * 100) | int, 100] | min) %}
        <div class="w-full bg-gray-100 rounded-full h-2" role="progressbar" aria-valuemin="0"
             aria-valuenow="{{ user_usage.month }}" aria-valuemax="{{ user_tier.monthly_upload_limit }}">
          <div class="h-2 rounded-full {% if pct >= 90 %}bg-red-500{% elif pct >= 70 %}bg-yellow-500{% else %}bg-indigo-500{% endif %}"
               style="width: {{ pct }}%"></div>
        </div>
        {% else %}
        <div class="text-xs text-green-600">{{ _("index.usage_unlimited") }}</div>
        {% endif %}
      </div>
    </div>
  </div>
  {% endif %}

  <!-- Widget grid (multi-user) -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Quick Actions -->
    <div class="bg-white rounded-xl shadow p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <i class="fas fa-bolt text-yellow-500" aria-hidden="true"></i> {{ _("index.quick_actions") }}
      </h2>
      <ul class="space-y-2">
        <li>
          <a href="/upload" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 group-hover:bg-blue-200">
              <i class="fas fa-upload text-blue-600 text-sm" aria-hidden="true"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">{{ _("index.quick_upload") }}</p>
              <p class="text-xs text-gray-400">{{ _("index.quick_upload_desc") }}</p>
            </div>
          </a>
        </li>
        <li>
          <a href="/files" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 group-hover:bg-indigo-200">
              <i class="fas fa-list text-indigo-600 text-sm" aria-hidden="true"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">{{ _("index.quick_documents") }}</p>
              <p class="text-xs text-gray-400">{{ _("index.quick_documents_desc") }}</p>
            </div>
          </a>
        </li>
        <li>
          <a href="/subscription" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0 group-hover:bg-purple-200">
              <i class="fas fa-layer-group text-purple-600 text-sm" aria-hidden="true"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">{{ _("index.quick_subscription") }}</p>
              <p class="text-xs text-gray-400">{{ _("index.quick_subscription_desc") }}</p>
            </div>
          </a>
        </li>
        <li>
          <a href="/search" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 group-hover:bg-green-200">
              <i class="fas fa-search text-green-600 text-sm" aria-hidden="true"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">{{ _("index.quick_search") }}</p>
              <p class="text-xs text-gray-400">{{ _("index.quick_search_desc") }}</p>
            </div>
          </a>
        </li>
      </ul>
    </div>

    <!-- Processing stats -->
    <div class="bg-white rounded-xl shadow p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <i class="fas fa-chart-bar text-blue-500" aria-hidden="true"></i> {{ _("index.processing_stats") }}
      </h2>
      <ul class="space-y-3 text-sm">
        <li class="flex items-center justify-between py-2 border-b border-gray-100">
          <span class="text-gray-600 flex items-center gap-2">
            <i class="fas fa-file-alt text-blue-400 w-4" aria-hidden="true"></i> {{ _("index.stat_total_processed") }}
          </span>
          <span class="font-bold text-gray-900">{{ stats.processed_files | default(0) }}</span>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-100">
          <span class="text-gray-600 flex items-center gap-2">
            <i class="fas fa-eye text-indigo-400 w-4" aria-hidden="true"></i> {{ _("index.stat_files_ocr") }}
          </span>
          <span class="font-bold text-gray-900">{{ stats.files_with_ocr | default(0) }}</span>
        </li>
        <li class="flex items-center justify-between py-2 border-b border-gray-100">
          <span class="text-gray-600 flex items-center gap-2">
            <i class="fas fa-calendar-day text-green-400 w-4" aria-hidden="true"></i> {{ _("index.stat_today") }}
          </span>
          <span class="font-bold text-gray-900">{{ stats.files_today | default(0) }}</span>
        </li>
        <li class="flex items-center justify-between py-2">
          <span class="text-gray-600 flex items-center gap-2">
            <i class="fas fa-calendar-alt text-orange-400 w-4" aria-hidden="true"></i> {{ _("index.stat_this_month") }}
          </span>
          <span class="font-bold text-gray-900">{{ stats.files_month | default(0) }}</span>
        </li>
      </ul>
    </div>

    <!-- Upgrade CTA or Integrations -->
    {% if user_tier and user_tier.id != 'business' %}
    <div class="bg-gradient-to-br from-indigo-600 to-purple-700 rounded-xl shadow p-6 text-white flex flex-col justify-between">
      <div>
        <h2 class="text-lg font-semibold mb-2 flex items-center gap-2">
          <i class="fas fa-arrow-up-right-dots" aria-hidden="true"></i> {{ _("index.upgrade_plan") }}
        </h2>
        <p class="text-indigo-100 text-sm mb-4">
          {{ _("index.upgrade_description") }}
        </p>
        <ul class="space-y-1.5 text-sm text-indigo-100">
          <li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-300" aria-hidden="true"></i> {{ _("index.upgrade_daily_limits") }}</li>
          <li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-300" aria-hidden="true"></i> {{ _("index.upgrade_destinations") }}</li>
          <li class="flex items-center gap-2"><i class="fas fa-check-circle text-indigo-300" aria-hidden="true"></i> {{ _("index.upgrade_ocr_pages") }}</li>
        </ul>
      </div>
      <a href="/pricing"
         class="mt-6 inline-flex items-center justify-center bg-white text-indigo-700 font-semibold px-5 py-2.5 rounded-lg hover:bg-indigo-50 transition shadow">
        {{ _("index.upgrade_view_pricing") }} <i class="fas fa-arrow-right ml-2 text-xs" aria-hidden="true"></i>
      </a>
    </div>
    {% else %}
    <div class="bg-white rounded-xl shadow p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <i class="fas fa-plug text-green-500" aria-hidden="true"></i> {{ _("index.integrations_title") }}
      </h2>
      <div class="space-y-3 text-sm text-gray-600">
        <div class="flex items-center justify-between">
          <span>{{ _("index.integrations_active") }}</span>
          <span class="font-bold text-green-600">{{ stats.active_integrations | default(0) }}</span>
        </div>
        <div class="flex items-center justify-between">
          <span>{{ _("index.integrations_storage") }}</span>
          <span class="font-bold text-indigo-600">{{ stats.storage_targets | default(0) }}</span>
        </div>
      </div>
      <a href="/status" class="mt-4 inline-flex items-center text-xs text-indigo-600 hover:text-indigo-800">
        {{ _("index.integrations_view_status") }} <i class="fas fa-arrow-right ml-1" aria-hidden="true"></i>
      </a>
    </div>
    {% endif %}
  </div>

{% else %}
{# ══════════════════════════════════════════════════════════════════════════ #}
{# SINGLE-USER DASHBOARD (original layout, preserved as-is)                #}
{# ══════════════════════════════════════════════════════════════════════════ #}

  <!-- Hero / Quick Actions -->
  <div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-xl shadow-lg text-white p-8 mb-8">
    <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
      <div>
        <h1 class="text-3xl font-bold mb-1">{{ _("index.single_user_heading") }}</h1>
        <p class="text-blue-100 text-sm">{{ _("index.dashboard_subtitle") }}</p>
      </div>
      <div class="flex flex-wrap gap-3">
        <a href="/upload" class="bg-white text-blue-700 hover:bg-blue-50 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center shadow-sm">
          <i class="fas fa-upload mr-2" aria-hidden="true"></i> {{ _("index.button_upload") }}
        </a>
        <a href="/files" class="bg-transparent border border-white text-white hover:bg-white hover:text-blue-700 font-semibold py-2 px-5 rounded-lg transition duration-200 flex items-center">
          <i class="fas fa-list mr-2" aria-hidden="true"></i> {{ _("index.button_browse_files") }}
        </a>
      </div>
    </div>
  </div>

  <!-- Stats Row -->
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
      <div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-file-alt text-blue-600 text-xl" aria-hidden="true"></i>
      </div>
      <div>
        <p class="text-3xl font-bold text-blue-600">{{ stats.processed_files | default(0) }}</p>
        <p class="text-gray-500 text-sm">{{ _("index.stat_documents_processed") }}</p>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
      <div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-plug text-green-600 text-xl" aria-hidden="true"></i>
      </div>
      <div>
        <p class="text-3xl font-bold text-green-600">{{ stats.active_integrations | default(0) }}</p>
        <p class="text-gray-500 text-sm">{{ _("index.stat_active_integrations") }}</p>
      </div>
    </div>
    <div class="bg-white rounded-xl shadow p-6 flex items-center gap-4">
      <div class="h-12 w-12 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0">
        <i class="fas fa-database text-indigo-600 text-xl" aria-hidden="true"></i>
      </div>
      <div>
        <p class="text-3xl font-bold text-indigo-600">{{ stats.storage_targets | default(0) }}</p>
        <p class="text-gray-500 text-sm">{{ _("index.stat_storage_targets") }}</p>
      </div>
    </div>
  </div>

  <!-- Widget Grid -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">

    <!-- Quick Actions Widget -->
    <div class="bg-white rounded-xl shadow p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <i class="fas fa-bolt text-yellow-500" aria-hidden="true"></i> {{ _("index.quick_actions") }}
      </h2>
      <ul class="space-y-2">
        <li>
          <a href="/upload" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0 group-hover:bg-blue-200">
              <i class="fas fa-upload text-blue-600 text-sm" aria-hidden="true"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">{{ _("index.quick_upload") }}</p>
              <p class="text-xs text-gray-400">{{ _("index.quick_upload_desc") }}</p>
            </div>
          </a>
        </li>
        <li>
          <a href="/files" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-indigo-100 flex items-center justify-center flex-shrink-0 group-hover:bg-indigo-200">
              <i class="fas fa-list text-indigo-600 text-sm" aria-hidden="true"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">{{ _("index.quick_view_files") }}</p>
              <p class="text-xs text-gray-400">{{ _("index.quick_view_files_desc") }}</p>
            </div>
          </a>
        </li>
        <li>
          <a href="/status" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50 transition group">
            <span class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center flex-shrink-0 group-hover:bg-green-200">
              <i class="fas fa-heartbeat text-green-600 text-sm" aria-hidden="true"></i>
            </span>
            <div>
              <p class="text-sm font-medium text-gray-800">{{ _("index.quick_system_status") }}</p>
              <p class="text-xs text-gray-400">{{ _("index.quick_system_status_desc") }}</p>
            </div>
          </a>
        </li>
      </ul>
    </div>

    <!-- Capabilities Widget -->
    <div class="bg-white rounded-xl shadow p-6">
      <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <i class="fas fa-cubes text-blue-500" aria-hidden="true"></i> {{ _("index.capabilities_title") }}
      </h2>
      <ul class="space-y-3 text-sm text-gray-600">
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
          <span>{{ _("index.capabilities_ocr") }}</span>
        </li>
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
          <span>{{ _("index.capabilities_cloud") }}</span>
        </li>
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
          <span>{{ _("index.capabilities_paperless") }}</span>
        </li>
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
          <span>{{ _("index.capabilities_ingestion") }}</span>
        </li>
        <li class="flex items-start gap-2">
          <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0" aria-hidden="true"></i>
          <span>{{ _("index.capabilities_workflows") }}</span>
        </li>
      </ul>
    </div>

    <!-- Getting Started / Help Widget -->
    <div class="bg-white rounded-xl shadow p-6 flex flex-col justify-between">
      <div>
        <h2 class="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
          <i class="fas fa-compass text-indigo-500" aria-hidden="true"></i> {{ _("index.getting_started") }}
        </h2>
        <ol class="space-y-3 text-sm text-gray-600 list-none">
          <li class="flex items-start gap-2">
            <span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">1</span>
            {{ _("index.getting_started_1_pre") }}<a href="/status" class="text-blue-600 hover:underline">{{ _("index.quick_system_status") }}</a>
          </li>
          <li class="flex items-start gap-2">
            <span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">2</span>
            <a href="/upload" class="text-blue-600 hover:underline">{{ _("index.button_upload") }}</a>{{ _("index.getting_started_2_post") }}
          </li>
          <li class="flex items-start gap-2">
            <span class="h-5 w-5 rounded-full bg-blue-600 text-white text-xs flex items-center justify-center flex-shrink-0 font-bold mt-0.5">3</span>
            {{ _("index.getting_started_3_pre") }}<a href="/files" class="text-blue-600 hover:underline">{{ _("index.link_files") }}</a>
          </li>
        </ol>
      </div>
      <a href="/about" class="mt-6 inline-flex items-center text-sm text-indigo-600 hover:text-indigo-800 font-medium">
        {{ _("index.getting_started_learn") }} <i class="fas fa-arrow-right ml-1 text-xs" aria-hidden="true"></i>
      </a>
    </div>
  </div>

{% endif %}{# end multi_user_enabled #}

</div>
{% endblock %}