<!DOCTYPE html>
<html lang="{{ current_lang }}">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ t('app_name') }} - {{ t('tagline') }}</title>

<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Hind+Siliguri:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
{% block extra_css %}{% endblock %}
</head>
<body>

<div class="app-shell">
  <aside class="sidebar">
    <div class="brand">
      <i class="fa-solid fa-seedling"></i>
      <div>
        <h1>{{ t('app_name') }}</h1>
        <span>{{ t('tagline') }}</span>
      </div>
    </div>

    <nav>
      <a href="{{ url_for('main.dashboard') }}" class="{{ 'active' if request.endpoint == 'main.dashboard' }}"><i class="fa-solid fa-table-columns"></i> {{ t('nav_dashboard') }}</a>
      <a href="{{ url_for('main.crop_advisory') }}" class="{{ 'active' if request.endpoint == 'main.crop_advisory' }}"><i class="fa-solid fa-wheat-awn"></i> {{ t('nav_crop_advisory') }}</a>
      <a href="{{ url_for('main.disease_detection') }}" class="{{ 'active' if request.endpoint == 'main.disease_detection' }}"><i class="fa-solid fa-magnifying-glass-chart"></i> {{ t('nav_disease_detection') }}</a>
      <a href="{{ url_for('main.fertilizer_suggestion') }}" class="{{ 'active' if request.endpoint == 'main.fertilizer_suggestion' }}"><i class="fa-solid fa-flask"></i> {{ t('nav_fertilizer') }}</a>
      <a href="{{ url_for('main.weather') }}" class="{{ 'active' if request.endpoint == 'main.weather' }}"><i class="fa-solid fa-cloud-sun-rain"></i> {{ t('nav_weather') }}</a>
      <a href="{{ url_for('main.market_prices') }}" class="{{ 'active' if request.endpoint == 'main.market_prices' }}"><i class="fa-solid fa-chart-line"></i> {{ t('nav_market') }}</a>
      <a href="{{ url_for('main.irrigation_management') }}" class="{{ 'active' if request.endpoint == 'main.irrigation_management' }}"><i class="fa-solid fa-droplet"></i> {{ t('nav_irrigation') }}</a>
      <a href="{{ url_for('main.pest_prediction') }}" class="{{ 'active' if request.endpoint == 'main.pest_prediction' }}"><i class="fa-solid fa-bug"></i> {{ t('nav_pest') }}</a>
      <a href="{{ url_for('main.expense_tracker') }}" class="{{ 'active' if request.endpoint == 'main.expense_tracker' }}"><i class="fa-solid fa-sack-dollar"></i> {{ t('nav_expense') }}</a>
      <a href="{{ url_for('main.yield_prediction') }}" class="{{ 'active' if request.endpoint == 'main.yield_prediction' }}"><i class="fa-solid fa-chart-simple"></i> {{ t('nav_yield') }}</a>
      <a href="{{ url_for('main.subsidy_loans') }}" class="{{ 'active' if request.endpoint == 'main.subsidy_loans' }}"><i class="fa-solid fa-building-columns"></i> {{ t('nav_subsidy') }}</a>
      <a href="{{ url_for('main.ai_assistant') }}" class="{{ 'active' if request.endpoint == 'main.ai_assistant' }}"><i class="fa-solid fa-robot"></i> {{ t('nav_assistant') }}</a>
      <a href="{{ url_for('main.community_forum') }}" class="{{ 'active' if request.endpoint == 'main.community_forum' }}"><i class="fa-solid fa-comments"></i> {{ t('nav_forum') }}</a>
      <a href="{{ url_for('main.expert_consultation') }}" class="{{ 'active' if request.endpoint == 'main.expert_consultation' }}"><i class="fa-solid fa-user-doctor"></i> {{ t('nav_consultation') }}</a>
      <a href="{{ url_for('main.settings') }}" class="{{ 'active' if request.endpoint == 'main.settings' }}"><i class="fa-solid fa-gear"></i> {{ t('nav_settings') }}</a>
    </nav>

    <div class="help-card">
      <i class="fa-solid fa-headset"></i>
      <p><strong>{{ t('nav_help') }}</strong></p>
    </div>
  </aside>

  <main class="main-content">
    <div class="topbar">
      <button class="mobile-toggle"><i class="fa-solid fa-bars"></i></button>
      <div class="search-box">
        <i class="fa-solid fa-magnifying-glass" style="color:#9aa39c"></i>
        <input type="text" placeholder="{{ t('nav_crop_advisory') }}, {{ t('nav_disease_detection') }}, {{ t('nav_weather') }}...">
      </div>

      <div class="lang-switch" style="position:relative;">
        <a href="{{ url_for('main.set_language', lang='bn') }}" style="{{ 'font-weight:700;color:var(--color-primary)' if current_lang=='bn' }}">বাংলা</a>
        &nbsp;|&nbsp;
        <a href="{{ url_for('main.set_language', lang='en') }}" style="{{ 'font-weight:700;color:var(--color-primary)' if current_lang=='en' }}">English</a>
      </div>

      <a href="#" class="notif-btn">
        <i class="fa-regular fa-bell"></i>
        {% if unread_count and unread_count > 0 %}<span class="badge">{{ unread_count }}</span>{% endif %}
      </a>

      {% if nav_user %}
      <a href="{{ url_for('main.profile') }}" class="user-chip">
        <img src="{{ url_for('static', filename='images/' + (nav_user.profile_image or 'default-farmer.png')) }}" onerror="this.src='https://api.dicebear.com/7.x/initials/svg?seed={{ nav_user.name }}'">
        <div>
          <div class="name">{{ nav_user.name }}</div>
          <div class="role">{{ nav_user.district or '' }}</div>
        </div>
      </a>
      <a href="{{ url_for('auth.logout') }}" class="btn btn-outline btn-sm"><i class="fa-solid fa-right-from-bracket"></i></a>
      {% endif %}
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="alert alert-{{ category }}">{{ t(message) }}</div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    {% block content %}{% endblock %}

    <div class="footer-bar">
      <div>&copy; 2026 {{ t('all_rights_reserved') }}</div>
      <div>
        <a href="#">{{ t('privacy_policy') }}</a>
        <a href="#">{{ t('terms') }}</a>
        <a href="#">{{ t('contact_us') }}</a>
      </div>
    </div>
  </main>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.3/chart.umd.min.js"></script>
<script src="{{ url_for('static', filename='js/main.js') }}"></script>
{% block extra_js %}{% endblock %}
</body>
</html>
