{% extends "clairvia/base.html" %}
{% block page %}help{% endblock %}
{% block meta %}<meta name="robots" content="noindex">{% endblock %}
{% block title %}{{ t('help_open') }} - Kopilvia - Clairvia{% endblock %}
{% block header %}
<header class="topbar glass-bar">
  <div class="topbar-inner">
    <a class="brand brand-small" href="{{ url_for('index') }}">{{ ic.mark(28) }}<span>Clairvia</span></a>
  </div>
</header>
{% endblock %}
{% block main %}
{#- Aide (clairvia.help) : reponse citee ou « je ne sais pas », etat en direct, et toutes les rubriques en local. -#}
<div class="narrow" id="help"{% if reply %} data-status="{{ reply.status }}"{% endif %}>
  <h1 class="page-title">{{ ic.icon('help') }}{{ t('help_open') }}</h1>
  <p class="help-by" data-help-by>{{ ic.icon('chat') }}<span>{{ t('help_by') }}</span></p>
  <p class="help-back"><a href="{{ next_url }}">{{ ic.icon('chevron-left', 'flip-rtl') }}{{ t('help_back') }}</a></p>
  {%- if help_lang != lang %}
  <p class="notice notice-warn inline" data-help-lang>{{ ic.icon('languages') }}<span>{{ t('help_lang_note') }}</span></p>
  {%- endif %}

  <form class="followup help-form" method="post" action="{{ url_for('clairvia_ui.help_route', _anchor='help-answer') }}">
    <input type="hidden" name="from" value="{{ help_from }}">
    <input type="hidden" name="next" value="{{ next_url }}">
    <label class="followup-label" for="help-q">{{ ic.icon('chat') }}{{ t('help_ask') }}</label>
    <div class="field glass help-field">
      <textarea id="help-q" name="q" rows="2" maxlength="{{ max_question }}" required autocomplete="off">{{ question }}</textarea>
      <button type="submit" class="go" title="{{ t('help_send') }}"><span class="sr">{{ t('help_send') }}</span>{{ ic.icon('arrow', 'flip-rtl') }}</button>
    </div>
    <p class="followup-note">{{ ic.icon('lock') }}<span>{{ t('help_private') }}</span></p>
  </form>

  {%- if reply %}
  <section class="panel answer-panel help-answer" id="help-answer" tabindex="-1" data-help="{{ reply.status }}" aria-labelledby="help-answer-title">
    <header class="panel-head">{{ ic.icon('quote') }}<h2 id="help-answer-title">{{ t('help_answer') }}</h2></header>
    <p class="help-question"><span class="help-question-label">{{ t('help_your_q') }}</span> {{ question }}</p>
    {%- if reply.status == 'ok' %}
    <div class="claims" lang="{{ help_lang }}">
      {%- for claim in reply.claims %}
      {%- if claim.heading %}<h3>{{ claim.text }}</h3>{% else %}
      <p class="claim">{{ claim_text(claim.text) }}{% for c in claim.citations %}<a class="cite" href="#help-src-{{ c }}" aria-label="{{ t('ans_source', n=c) }}">{{ c }}</a>{% endfor %}</p>
      {%- endif %}
      {%- endfor %}
    </div>
    <h3 class="sources-title">{{ t('ans_sources') }}</h3>
    <ol class="sources" role="list" lang="{{ help_lang }}">
      {%- for s in reply.cited %}
      <li id="help-src-{{ s.id }}"><span class="source-n">{{ s.id }}</span><a href="{{ s.url.removeprefix('/clairvia/help') }}">{{ s.title }}</a></li>
      {%- endfor %}
    </ol>
    {%- elif reply.status == 'too_long' %}
    <p class="notice notice-warn inline" role="status">{{ ic.icon('alert') }}<span>{{ t('help_too_long', max=max_question) }}</span></p>
    {%- else %}
    {%- if reply.status == 'unknown' %}
    <p class="notice notice-warn inline" role="status">{{ ic.icon('info') }}<span>{{ t('help_unknown') }}</span></p>
    {%- else %}
    <p class="notice notice-warn inline" role="status">{{ ic.icon('alert') }}<span>{{ t('help_offline') if configured else t('help_offline_off') }}</span></p>
    {%- endif %}
    <h3 class="sources-title">{{ t('help_matches') }}</h3>
    <ul class="help-matches" role="list" lang="{{ help_lang }}">
      {%- for art in reply.matches[:3] %}
      <li><a href="#a-{{ art.id }}">{{ art.title }}</a><p>{{ art.text }}</p></li>
      {%- endfor %}
    </ul>
    {%- endif %}
    {%- if reply.status in ('unknown', 'offline') %}
    <h3 class="sources-title">{{ t('help_who') }}</h3>
    <p class="help-contact" data-help-contact>{{ ic.icon('user') }}
      {%- if contact %}<a href="{{ contact }}" rel="noopener">{{ t('help_contact') }}</a>{% else %}<span>{{ t('help_no_contact') }}</span>{% endif %}</p>
    {%- endif %}
  </section>
  {%- endif %}

  <section class="panel help-state" id="help-state" aria-labelledby="help-state-title">
    <header class="panel-head">{{ ic.icon('target') }}<h2 id="help-state-title" lang="{{ help_lang }}">{{ state_title }}</h2></header>
    <p class="help-state-d">{{ t('help_state_d') }}</p>
    <ul class="help-facts" role="list" lang="{{ help_lang }}">
      {%- for fact in facts %}
      <li id="state-{{ fact.key }}" data-fact="{{ fact.key }}">{{ fact.text }}</li>
      {%- endfor %}
    </ul>
  </section>

  <section class="help-section" aria-labelledby="help-topics-title">
    <h2 id="help-topics-title">{{ t('help_topics') }}</h2>
    <ul class="help-topics" role="list" lang="{{ help_lang }}">
      {%- for art in topics %}
      <li><a href="#a-{{ art.id }}">{{ art.title }}</a></li>
      {%- endfor %}
    </ul>
  </section>

  <section class="help-section" aria-labelledby="help-all-title">
    <h2 id="help-all-title">{{ t('help_all') }}</h2>
    <div class="help-articles" lang="{{ help_lang }}">
      {%- for art in all_articles %}
      <article class="help-article" id="a-{{ art.id }}" aria-labelledby="a-{{ art.id }}-title">
        <h3 id="a-{{ art.id }}-title">{{ art.title }}</h3>
        <p>{{ art.text }}</p>
      </article>
      {%- endfor %}
    </div>
  </section>
</div>
{% endblock %}