{% extends "clairvia/base.html" %}
{% block page %}settings{% endblock %}
{% block meta %}<meta name="robots" content="noindex">{% endblock %}
{% block title %}{{ t('set_title') }} - 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 %}
<div class="narrow settings">
  <h1 class="page-title">{{ ic.icon('sliders') }}{{ t('set_title') }}</h1>
  <p class="lead">{{ t('set_intro') }}</p>

  {%- if done in ('saved', 'reset') %}
  <p class="notice notice-safe" role="status" id="settings-done" data-done="{{ done }}">{{ ic.icon('check') }}<span>{{ t('set_saved') if done == 'saved' else t('set_reset_done') }}</span></p>
  {%- elif done in ('noengine', 'invalid') %}
  <p class="notice notice-error" role="alert" id="settings-done" data-done="{{ done }}">{{ ic.icon('alert') }}<span>{{ t('set_noengine', cat=category_label('general')) if done == 'noengine' else t('set_invalid') }}</span></p>
  {%- elif done in ('ranksaved', 'rankcleared') %}
  <p class="notice notice-safe" role="status" id="settings-done" data-done="{{ done }}">{{ ic.icon('check') }}<span>{{ t('rank_saved') if done == 'ranksaved' else t('rank_cleared') }}</span></p>
  {%- elif done in ('rankinvalid', 'ranktoomany') %}
  <p class="notice notice-error" role="alert" id="settings-done" data-done="{{ done }}">{{ ic.icon('alert') }}<span>{{ t('rank_invalid') if done == 'rankinvalid' else t('rank_toomany', max=rank_max) }}</span></p>
  {%- endif %}
  {%- if skipped %}
  <p class="notice notice-warn" role="status" data-skipped="{{ skipped }}">{{ ic.icon('info') }}<span>{{ t('rank_skipped', n=skipped) }}</span></p>
  {%- endif %}

  <p class="notice inline sync-state" data-sync="{{ 'on' if account.signed_in else ('signin' if account.enabled else 'local') }}">
    {{ ic.icon('sync' if account.signed_in else 'lock') }}
    {%- if account.signed_in %}<span>{{ t('set_sync_on') }}</span>
    {%- elif account.enabled %}<span>{{ t('set_sync_signin') }} <a href="{{ url_for('clairvia_ui.account_route', next=url_for('clairvia_ui.settings_route')) }}">{{ t('acc_signin') }}</a></span>
    {%- else %}<span>{{ t('set_sync_local') }}</span>{% endif %}
  </p>

  <form class="settings-form" id="settings" method="post" action="{{ url_for('clairvia_ui.prefs_route') }}">
    <input type="hidden" name="next" value="{{ next_url }}">
    <input type="hidden" name="clairvia-settings" value="save">

    <section class="panel" id="set-safesearch" aria-labelledby="set-safesearch-title">
      <header class="panel-head">{{ ic.icon('shield') }}<h2 id="set-safesearch-title">{{ t('set_safe') }}</h2>
        {%- if safe_locked %}<span class="badge">{{ ic.icon('lock') }}{{ t('set_locked') }}</span>{% endif %}</header>
      <p>{{ t('set_safe_d') }}</p>
      <fieldset class="setting"{% if safe_locked %} disabled{% endif %}>
        <legend class="sr">{{ t('set_safe') }}</legend>
        <div class="segmented" role="presentation">
          {%- for level in ('0', '1', '2') %}
          <input type="radio" name="clairvia-safesearch" id="safe-{{ level }}" value="{{ level }}"{% if level == safesearch %} checked{% endif %}>
          <label for="safe-{{ level }}">{{ t('set_safe_' ~ level) }}</label>
          {%- endfor %}
        </div>
      </fieldset>
      {%- if unsafe and safesearch != '0' %}
      <p class="gap" data-gap="safesearch">{{ ic.icon('alert') }}<span>{{ t('set_safe_gap', engines=unsafe | join(', ')) }}</span></p>
      {%- endif %}
    </section>

    <section class="panel" id="set-language" aria-labelledby="set-language-title">
      <header class="panel-head">{{ ic.icon('globe') }}<h2 id="set-language-title">{{ t('set_region') }}</h2>
        {%- if language_locked %}<span class="badge">{{ ic.icon('lock') }}{{ t('set_locked') }}</span>{% endif %}</header>
      <p>{{ t('set_region_d') }}</p>
      <label class="setting select">
        <span class="sr">{{ t('set_region') }}</span>
        <select name="clairvia-language"{% if language_locked %} disabled{% endif %}>
          {%- for code in language_special %}
          <option value="{{ code }}"{% if code == search_language %} selected{% endif %}>{{ t('set_lang_' ~ code) }}</option>
          {%- endfor %}
          {%- for group in language_groups %}
          <optgroup label="{{ group.label }}">
            {%- if group.whole %}
            <option value="{{ group.code }}"{% if group.code == search_language %} selected{% endif %}>{{ t('set_lang_whole', lang=group.label) }}</option>
            {%- endif %}
            {%- for code, place in group.regions %}
            <option value="{{ code }}"{% if code == search_language %} selected{% endif %}>{{ group.label }}, {{ place }}</option>
            {%- endfor %}
          </optgroup>
          {%- endfor %}
        </select>
      </label>
      {%- if unlocalized and search_language != 'all' %}
      <p class="gap" data-gap="language">{{ ic.icon('info') }}<span>{{ t('set_lang_gap', engines=unlocalized | join(', ')) }}</span></p>
      {%- endif %}
    </section>

    {%- if suggest.available %}
    <section class="panel" id="set-suggest" aria-labelledby="set-suggest-title">
      <header class="panel-head">{{ ic.icon('suggest') }}<h2 id="set-suggest-title">{{ t('sug_label') }}</h2></header>
      <p>{{ t('set_suggest_d') }}</p>
      <fieldset class="setting">
        <legend class="sr">{{ t('sug_label') }}</legend>
        <div class="segmented" role="presentation">
          <input type="radio" name="clairvia-suggest" id="suggest-on" value="on"{% if suggest.on %} checked{% endif %}>
          <label for="suggest-on">{{ t('set_on') }}</label>
          <input type="radio" name="clairvia-suggest" id="suggest-off" value="off"{% if not suggest.on %} checked{% endif %}>
          <label for="suggest-off">{{ t('set_off') }}</label>
        </div>
      </fieldset>
    </section>
    {%- endif %}

    <section class="panel" id="set-keys" aria-labelledby="set-keys-title">
      <header class="panel-head">{{ ic.icon('keyboard') }}<h2 id="set-keys-title">{{ t('keys_title') }}</h2></header>
      <p>{{ t('keys_d') }}</p>
      <fieldset class="setting">
        <legend class="sr">{{ t('keys_title') }}</legend>
        <div class="segmented" role="presentation">
          <input type="radio" name="clairvia-keys" id="keys-on" value="on"{% if keys == 'on' %} checked{% endif %}>
          <label for="keys-on">{{ t('set_on') }}</label>
          <input type="radio" name="clairvia-keys" id="keys-off" value="off"{% if keys == 'off' %} checked{% endif %}>
          <label for="keys-off">{{ t('set_off') }}</label>
        </div>
      </fieldset>
      {{ kb.table(t) }}
    </section>

    <section class="panel" id="set-engines" aria-labelledby="set-engines-title">
      <header class="panel-head">{{ ic.icon('database') }}<h2 id="set-engines-title">{{ t('set_engines') }}</h2></header>
      <p>{{ t('set_engines_d') }}</p>
      <input type="hidden" name="clairvia-engines" value="1">
      {%- for group in engine_groups %}
      <details class="engine-group" data-category="{{ group.category }}"{% if loop.first %} open{% endif %}>
        <summary>
          {{ ic.icon(category_icons.get(group.category, 'search')) }}<span class="engine-group-name">{{ category_label(group.category) }}</span>
          <span class="badge" data-on="{{ group.on }}">{{ t('set_engines_count', n=group.on, total=group.engines | length) }}</span>
          {{ ic.icon('chevron-down', 'engine-group-chevron') }}
        </summary>
        <fieldset>
          <legend class="sr">{{ category_label(group.category) }}</legend>
          <ul class="engine-list" role="list">
            {%- for engine in group.engines %}
            <li>
              <input type="checkbox" name="clairvia-engine:{{ engine.key }}" id="engine-{{ loop.index }}-{{ group.category | replace(' ', '-') }}" value="on"{% if engine.enabled %} checked{% endif %}>
              <label for="engine-{{ loop.index }}-{{ group.category | replace(' ', '-') }}">
                <span class="engine-name">{{ engine.name }}</span>
                {%- if engine.bang %}<code class="engine-bang">{{ engine.bang }}</code>{% endif %}
                {%- if engine.host %}<span class="engine-host">{{ engine.host }}</span>{% endif %}
                {%- if engine.caps %}
                <span class="caps">{% for cap in engine.caps %}<span class="cap">{{ t('set_cap_' ~ cap) }}</span>{% endfor %}</span>
                {%- endif %}
              </label>
            </li>
            {%- endfor %}
          </ul>
        </fieldset>
      </details>
      {%- endfor %}
    </section>

    <div class="settings-bar glass">
      <button class="chip chip-strong" type="submit">{{ ic.icon('check') }}{{ t('set_save') }}</button>
      <a class="chip" href="{{ next_url }}">{{ ic.icon('chevron-left', 'flip-rtl') }}{{ t('set_back') }}</a>
    </div>
  </form>

  <form class="settings-form" id="rank" method="post" action="{{ url_for('clairvia_ui.prefs_route') }}">
    <input type="hidden" name="next" value="{{ next_url }}">
    <section class="panel" id="set-rank" aria-labelledby="set-rank-title">
      <header class="panel-head">{{ ic.icon('raise') }}<h2 id="set-rank-title">{{ t('rank_title') }}</h2>
        <span class="badge" data-rules="{{ rank_rules | length }}">{{ t('rank_count', n=rank_rules | length, max=rank_max) }}</span></header>
      <p>{{ t('rank_d') }}</p>
      {%- if rank_rules %}
      <ul class="rule-list" role="list">
        {%- for rule in rank_rules %}
        <li data-rule="{{ rule.action }}">
          <span class="rule-site">{{ ic.icon(rank_icons[rule.action]) }}<span dir="ltr">{{ rule.label }}</span></span>
          <label class="setting select rule-select">
            <span class="sr">{{ t('rank_menu', site=rule.label) }}</span>
            <select name="clairvia-rule:{{ rule.domain }}">
              {%- for action in rank_actions %}
              <option value="{{ action }}"{% if action == rule.action %} selected{% endif %}>{{ t('rank_action_' ~ action) }}</option>
              {%- endfor %}
              <option value="remove">{{ t('rank_action_remove') }}</option>
            </select>
          </label>
        </li>
        {%- endfor %}
      </ul>
      {%- else %}
      <p class="gap" data-rules-empty>{{ ic.icon('info') }}<span>{{ t('rank_empty') }}</span></p>
      {%- endif %}
      <div class="rule-add">
        <label class="rule-domain">
          <span>{{ t('rank_add') }}</span>
          <input type="text" name="clairvia-rank-domain" value="{{ rank_site }}" placeholder="exemple.fr" inputmode="url" autocomplete="off" autocapitalize="off" spellcheck="false" maxlength="253" dir="ltr"{% if rank_site %} autofocus{% endif %}>
        </label>
        <label class="setting select">
          <span>{{ t('rank_action') }}</span>
          <select name="clairvia-rank-action">
            {%- for action in rank_actions %}
            <option value="{{ action }}"{% if action == (rank_site_action or 'block') %} selected{% endif %}>{{ t('rank_action_' ~ action) }}</option>
            {%- endfor %}
          </select>
        </label>
      </div>
      <details class="engine-group rule-import">
        <summary>{{ ic.icon('upload') }}<span class="engine-group-name">{{ t('rank_import') }}</span>{{ ic.icon('chevron-down', 'engine-group-chevron') }}</summary>
        <label class="rule-import-field">
          <span>{{ t('rank_import_d') }}</span>
          <textarea name="clairvia-rank-import" rows="5" dir="ltr" spellcheck="false" autocapitalize="off" placeholder="$discard,site=exemple.com&#10;$boost=2,site=exemple.org"></textarea>
        </label>
      </details>
      <div class="rule-bar">
        <button class="chip chip-strong" type="submit" name="clairvia-rank-form" value="save">{{ ic.icon('check') }}{{ t('set_save') }}</button>
        {%- if rank_rules %}
        <a class="chip" href="{{ url_for('clairvia_ui.rank_export_route') }}" download data-rank-export>{{ ic.icon('download') }}{{ t('rank_export') }}</a>
        <button class="chip" type="submit" name="clairvia-rank-form" value="clear">{{ ic.icon('trash') }}{{ t('rank_clear') }}</button>
        {%- endif %}
      </div>
    </section>

    <section class="panel" id="set-lenses" aria-labelledby="set-lenses-title">
      <header class="panel-head">{{ ic.icon('lens') }}<h2 id="set-lenses-title">{{ t('lens_title') }}</h2></header>
      <p>{{ t('lens_d') }}</p>
      {%- for lens in lenses %}
      <details class="engine-group" data-lens="{{ lens.id }}">
        <summary>{{ ic.icon(lens.icon) }}<span class="engine-group-name">{{ t('lens_' ~ lens.id) }}</span>
          <span class="badge">{{ t('lens_n_' ~ lens.kind, n=lens.sites | length) }}</span>{{ ic.icon('chevron-down', 'engine-group-chevron') }}</summary>
        <p class="lens-sites" dir="ltr">{{ lens.sites | join(', ') }}</p>
      </details>
      {%- endfor %}
      <p class="gap">{{ ic.icon('shield') }}<span>{{ t('rank_private') }}</span></p>
    </section>
  </form>

  <form class="settings-reset" method="post" action="{{ url_for('clairvia_ui.prefs_route') }}">
    <input type="hidden" name="next" value="{{ next_url }}">
    <button class="chip" type="submit" name="clairvia-settings" value="reset">{{ ic.icon('sync') }}{{ t('set_reset') }}</button>
  </form>
</div>
{% endblock %}