{% load i18n static %}
{% if render_widget %}
  <link rel="stylesheet" href="{% static 'ai_assistant/css/chat_widget.css' %}">
  <script src="{% static 'ai_assistant/js/chat_widget.js' %}" defer></script>
  {{ chat_strings|json_script:"ai-chat-widget-strings" }}

  <div
    class="ai-assistant-widget ai-assistant-widget--{{ widget_position }}"
    data-ai-chat-widget-root
    data-chat-endpoint="{{ chat_api_url }}"
    data-reset-endpoint="{{ reset_api_url }}"
  >
    <button
      type="button"
      class="ai-assistant-widget__launcher"
      data-ai-chat-widget-toggle
      aria-expanded="false"
      aria-controls="ai-assistant-widget-panel"
      aria-label="{{ launcher_label }}"
    >
      <span class="ai-assistant-widget__launcher-icon" aria-hidden="true">💬</span>
      <span class="ai-assistant-widget__launcher-label">{{ launcher_label }}</span>
    </button>

    <section
      id="ai-assistant-widget-panel"
      class="ai-assistant-widget__panel"
      data-ai-chat-widget-panel
      hidden
      aria-label="{{ widget_title }}"
    >
      <header class="ai-assistant-widget__header">
        <div>
          <h2 class="ai-assistant-widget__title">{{ widget_title }}</h2>
          <p class="ai-assistant-widget__subtitle mb-0">{{ widget_welcome_text }}</p>
        </div>
        <div class="ai-assistant-widget__header-actions">
          <button
            type="button"
            class="ai-assistant-widget__header-button"
            data-ai-chat-widget-reset
            aria-label="{% trans 'Clear conversation' %}"
          >
            {% trans "Clear" %}
          </button>
          <button
            type="button"
            class="ai-assistant-widget__header-button"
            data-ai-chat-widget-close
            aria-label="{% trans 'Close chat' %}"
          >
            {% trans "Close" %}
          </button>
        </div>
      </header>

      <div class="ai-assistant-widget__body" data-ai-chat-widget-scroll>
        <div data-ai-chat-widget-empty class="ai-assistant-widget__empty">
          <div class="ai-assistant-widget__empty-icon" aria-hidden="true">💬</div>
          <strong class="d-block mb-2">{% trans "Start a conversation" %}</strong>
          <p class="mb-0">{{ widget_welcome_text }}</p>
        </div>

        <div
          class="ai-assistant-widget__messages"
          data-ai-chat-widget-messages
          aria-live="polite"
          aria-atomic="false"
        ></div>

        <div
          class="ai-assistant-widget__typing d-none"
          data-ai-chat-widget-typing
          aria-live="polite"
          aria-label="{% trans 'Assistant is typing' %}"
        >
          <div class="ai-assistant-widget__typing-pill">
            <span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
            <span>{% trans "Assistant is typing…" %}</span>
          </div>
        </div>
      </div>

      <div class="ai-assistant-widget__footer">
        <div class="alert alert-danger d-none mb-3" data-ai-chat-widget-error role="alert">
          <div class="d-flex flex-column gap-2">
            <div>
              <strong class="d-block">{% trans "Message could not be sent." %}</strong>
              <span data-ai-chat-widget-error-text>{% trans "Please try again." %}</span>
            </div>
            <div>
              <button type="button" class="btn btn-sm btn-outline-danger" data-ai-chat-widget-retry>
                {% trans "Retry" %}
              </button>
            </div>
          </div>
        </div>

        <form data-ai-chat-widget-form novalidate>
          {% csrf_token %}
          <label for="ai-chat-widget-input" class="visually-hidden">{% trans "Your message" %}</label>
          <textarea
            id="ai-chat-widget-input"
            data-ai-chat-widget-input
            class="form-control ai-assistant-widget__input"
            rows="3"
            maxlength="4000"
            placeholder="{% trans 'Type your question…' %}"
            aria-describedby="ai-chat-widget-counter"
          ></textarea>
          <div class="ai-assistant-widget__footer-meta">
            <span id="ai-chat-widget-counter" class="small text-body-secondary" data-ai-chat-widget-counter>0 / 4000</span>
            <button type="submit" class="btn btn-primary" data-ai-chat-widget-submit>
              <span data-ai-chat-widget-submit-text>{% trans "Send message" %}</span>
            </button>
          </div>
        </form>
      </div>
    </section>
  </div>
{% endif %}