{% extends "layouts/base.html" %}
{% block content %}

{% if page_key == 'nav_assistant' %}
<div class="card" style="max-width:600px;">
  <h3><i class="fa-solid fa-robot" style="color:var(--color-primary);"></i> {{ t('ai_assistant') }}</h3>
  <div id="aiChatLog" style="height:320px;overflow-y:auto;background:var(--color-bg);border-radius:10px;padding:14px;margin-bottom:14px;display:flex;flex-direction:column;gap:10px;">
    <div class="chat-msg bot" style="background:var(--color-primary-light);padding:10px 14px;border-radius:10px;align-self:flex-start;max-width:80%;font-size:13.5px;">
      {{ t('ai_assistant_desc') }}. Ask me anything about crops, weather, or diseases!
    </div>
  </div>
  <form id="aiChatForm" style="display:flex;gap:10px;">
    <input id="aiChatInput" type="text" class="form-control" placeholder="{{ t('ask_question') }}...">
    <button type="submit" class="btn"><i class="fa-solid fa-paper-plane"></i></button>
  </form>
</div>
<style>
.chat-msg.user { background: var(--color-accent) !important; align-self: flex-end !important; color:#1f2a23; }
</style>
{% else %}
<div class="card" style="text-align:center;padding:60px 30px;max-width:560px;margin:0 auto;">
  <i class="fa-solid {{ icon }}" style="font-size:46px;color:var(--color-primary);background:var(--color-primary-light);width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 20px;"></i>
  <h2>{{ t(page_key) }}</h2>
  <p style="color:var(--color-text-muted);margin:14px 0 20px;">
    This module is part of the Amar Krishi platform demo. Connect a data source or AI model here to enable full functionality.
  </p>
  <a href="{{ url_for('main.dashboard') }}" class="btn btn-outline"><i class="fa-solid fa-arrow-left"></i> {{ t('nav_dashboard') }}</a>
</div>
{% endif %}

{% endblock %}