{% extends 'base.html' %}

{% block header %}
<h1 class="title">{% block title %}{{ _('Settings') }}{% endblock %}</h1>
{% endblock %}

{% block content %}
<div class="content">
  <div class="notification is-primary">
    {{ _('If you have any questions, <a title="SeedboxSync configuration documentation" href="https://llaumgui.github.io/seedboxsync/getting-started/configuration/">the documentation</a> contains all the information you need.') }}
  </div>

  <form method="post">

    <div class="box">
      <h2 class="title is-3">{{ _('SeedboxSync') }}</h2>
      <div class="columns pt-4">
        <div class="column is-6" x-data="{
          enabled: {{ 'true' if form.sync_blackhole_enabled else 'false' }},
        }">
          <div class="field">
            <label class="label" for="sync_blackhole_enabled">{{ _('Enable the blackhole synchronization task') }}</label>
            <input id="sync_blackhole_enabled" type="checkbox" name="sync_blackhole_enabled" value="1" x-model="enabled" />
          </div>
        </div>

        <div class="column is-6" x-data="{
          enabled: {{ 'true' if form.sync_seedbox_enabled else 'false' }},
        }">
          <div class="field">
            <label class="label" for="sync_seedbox_enabled">{{ _('Enable the seedbox synchronization task') }}</label>
            <input id="sync_seedbox_enabled" type="checkbox" name="sync_seedbox_enabled" value="1" x-model="enabled" />
          </div>
        </div>
      </div>

      <div class="columns pt-4">
        <div class="column is-6">
          <div class="field" x-data="{ theme: '{{ form.webui_theme }}' }">
            <label class="label" for="webui_theme">{{ _('Theme of the WebUI') }}</label>
            <div class="control select">
              <select id="webui_theme" name="webui_theme" x-model="theme">
                <option value="auto">{{ _('Automatic') }}</option>
                <option value="dark">{{ _('Dark') }}</option>
                <option value="light">{{ _('Light') }}</option>
              </select>
            </div>
            <input type="hidden" name="webui_theme" :value="theme">
          </div>
        </div>

        <div class="column is-6">
          <div class="field" x-data="{ language: '{{ form.webui_language }}' }">
            <label class="label" for="webui_language">{{ _('Language of the WebUI') }}</label>
            <div class="control select">
              <select id="webui_language" name="webui_language" x-model="language">
                <option value="auto">{{ _('Automatic') }}</option>
                {% for language in languages_list %}
                  <option value="{{ language }}">{{ language }}</option>
                {% endfor %}
              </select>
            </div>
            <input type="hidden" name="webui_language" :value="language">
          </div>
        </div>
      </div>
    </div>

    <div class="box">
      <h2 class="title is-3">{{ _('Seedbox') }}</h2>
      <h3 class="subtitle is-4">{{ _('Connection') }}</h3>
      <p class="is-italic">{{ _('Information about your seedbox connection.') }}</p>

      <div class="columns">
        <div class="column is-6">
          <div class="field" x-data="{
              host: '{{ form.seedbox_host }}',
              isValid() { return isValidHost(this.host) }
            }">
            <label class="label" for="seedbox_host">{{ _('Hostname') }}</label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="seedbox_host" class="input" type="text"
                     name="seedbox_host" x-model="host"
                     placeholder="my-seedbox.ltd"
                     x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-server"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>

        <div class="column is-6">
          <div class="field" x-data="{
              port: '{{ form.seedbox_port }}',
              isValid() { return isValidPort(this.port) }
            }">
            <label class="label" for="seedbox_port">{{ _('Port') }}</label>
            <div class="control column is-4 p-0 has-icons-left has-icons-right">
              <input id="seedbox_port" class="input" type="number"
                    name="seedbox_port" x-model="port"
                    placeholder="22"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-plug"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>
      </div>

      <div class="columns">
        <div class="column is-6">
          <div class="field" x-data="{
              login: '{{ form.seedbox_login }}',
              isValid() { return isRequired(this.login) }
            }">
            <label class="label" for="seedbox_login">{{ _('Login') }}</label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="seedbox_login" class="input" type="text"
                    name="seedbox_login" x-model="login"
                    placeholder="me"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-user"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>

        <div class="column is-6">
          <div class="field" x-data="{
              password: '{{ form.seedbox_password }}',
              isValid() { return isRequired(this.password) }
            }">
            <label class="label" for="seedbox_password">{{ _('Password') }}</label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="seedbox_password" class="input" type="password"
                    name="seedbox_password" x-model="password"
                    placeholder="********"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-key"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>
      </div>

      <div class="columns">
        <div class="column is-6">
          <div class="field" x-data="{
              timeout: '{{ form.seedbox_timeout }}',
              enabled: {{ form.seedbox_timeout_enabled }},
              isValid() { return isValidTimeout(this.timeout) }
            }">
            <label class="label" for="seedbox_timeout">{{ _('Timeout (in seconds)') }}</label>
            <label class="is-sr-only" for="seedbox_timeout_enabled">{{ _('Timeout (in seconds)') }}</label>
            <input id="seedbox_timeout_enabled" type="checkbox" name="seedbox_timeout_enabled" value="1" checked x-model="enabled"/>
            <div class="control column is-4 p-0 has-icons-left has-icons-right"  x-show="enabled" x-transition>
              <input id="seedbox_timeout" class="input" type="number"
                    name="seedbox_timeout" x-model="timeout"
                    placeholder="30"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-clock"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>

        <div class="column is-6">
          <div class="field" x-data="{ protocol: '{{ form.seedbox_protocol }}' }">
            <label class="label" for="seedbox_protocol">{{ _('Protocol') }}</label>
            <div class="control select">
              <select id="seedbox_protocol" name="seedbox_protocol" x-model="protocol">
                <option value="sftp">{{ _('sFTP') }}</option>
                <option value="ftp">{{ _('FTP') }}</option>
              </select>
            </div>
            <input type="hidden" name="seedbox_protocol" :value="protocol">
          </div>
        </div>
      </div>

      <div class="columns">
        <div class="column is-6">
          <div class="field" x-data="{
              chmod: '{{ form.seedbox_chmod }}',
              enabled: {{ form.seedbox_chmod_enabled }},
              isValid() { return isOctalChmod(this.chmod) }
            }">
            <label class="label" for="seedbox_chmod">
              {{ _('chmod (in octal notation)') }}
              <a class="icon has-text-grey"
                title="{{ _('Chmod torrent after upload. Use octal notation, e.g. 0o644.') }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <label class="is-sr-only" for="seedbox_chmod_enabled">{{ _('chmod (in octal notation)') }}</label>
            <input id="seedbox_chmod_enabled" type="checkbox" name="seedbox_chmod_enabled" value="1" checked x-model="enabled" />
            <div class="control column is-4 p-0 has-icons-left has-icons-right" x-show="enabled" x-transition>
              <input id="seedbox_chmod" class="input" type="text"
                    name="seedbox_chmod" x-model="chmod"
                    placeholder="0o644"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-lock"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>

        <div class="column is-6">
          <div class="field" x-data="{
              max_concurrent_prefetch_requests: '{{ form.seedbox_max_concurrent_prefetch_requests }}',
              isValid() { return isValidMaxConcPrefetchReq(this.max_concurrent_prefetch_requests) }
            }">
            <label class="label" for="seedbox_max_concurrent_prefetch_requests">
              {{ _('Max concurrent prefetch requests') }}
              <a class="icon has-text-grey"
                  title="{{ _('Only for SFTP (Paramiko). The maximum number of concurrent read requests to prefetch. When this is None (the default), do not limit the number of concurrent prefetch requests.
Note: OpenSSH’s sftp internally imposes a limit of 64 concurrent requests, while Paramiko imposes no limit by default; consider setting a limit if a file can be successfully received with sftp but hangs with Paramiko.') }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <div class="control column is-4 p-0 has-icons-left has-icons-right">
              <input id="seedbox_max_concurrent_prefetch_requests" class="input" type="number"
                    name="seedbox_max_concurrent_prefetch_requests" x-model="max_concurrent_prefetch_requests"
                    placeholder="128"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-network-wired"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>
      </div>

      <h3 class="subtitle is-4 pt-6">{{ _('Path') }}</h3>
      <p class="is-italic">{{ _('Information about your seedbox paths.') }}</p>

      <div class="columns">
        <div class="column is-6">
          <div class="field" x-data="{
              tmp_path: '{{ form.seedbox_tmp_path }}',
              isValid() { return isRequired(this.tmp_path) }
            }">
            <label class="label" for="seedbox_tmp_path">
              {{ _('Tempory path') }}
              <a class="icon has-text-grey"
                title="{{ _('Use a temporary directory for incomplete transfers (must be created manually).') }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="seedbox_tmp_path" class="input" type="text"
                    name="seedbox_tmp_path" x-model="tmp_path"
                    placeholder="./tmp"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-folder"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>

        <div class="column is-6">
          <div class="field" x-data="{
              watch_path: '{{ form.seedbox_watch_path }}',
              isValid() { return isRequired(this.watch_path) }
            }">
            <label class="label" for="seedbox_watch_path">
              {{ _('Watch path') }}
              <a class="icon has-text-grey"
                title="{{ _("Your BitTorrent client's watch folder (must be created manually).") }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="seedbox_watch_path" class="input" type="text"
                    name="seedbox_watch_path" x-model="watch_path"
                    placeholder="./watch"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-folder"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>
      </div>

      <div class="columns pt-4">
        <div class="column is-6">
          <div class="field" x-data="{
              finished_path: '{{ form.seedbox_finished_path }}',
              isValid() { return isRequired(this.finished_path) }
            }">
            <label class="label" for="seedbox_finished_path">
              {{ _('Finished path') }}
              <a class="icon has-text-grey"
                title="{{ _('The folder where your BitTorrent client puts finished files.') }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="seedbox_finished_path" class="input" type="text"
                    name="seedbox_finished_path" x-model="finished_path"
                    placeholder="./downloads"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-folder"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>

        <div class="column is-6">
          <div class="field" x-data="{
              prefixed_path: '{{ form.seedbox_prefixed_path }}',
              isValid() { return isRequired(this.prefixed_path) }
            }">
            <label class="label" for="seedbox_prefixed_path">
              {{ _('Prefixed path') }}
              <a class="icon has-text-grey"
                title="{{ _('Remove a prefix from the synced path (usually the same as finished_path).') }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="seedbox_prefixed_path" class="input" type="text"
                    name="seedbox_prefixed_path" x-model="prefixed_path"
                    placeholder="downloaded"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-broom"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>
      </div>

      <div class="columns pt-4">
        <div class="column is-6">
          <div class="field" x-data="{
              part_suffix: '{{ form.seedbox_part_suffix }}',
              isValid() { return isRequired(this.part_suffix) }
            }">
            <label class="label" for="seedbox_part_suffix">
              {{ _('Suffix used for .part') }}
              <a class="icon has-text-grey"
                title="{{ _('Exclude files with this suffix (e.g. incomplete downloads).') }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="seedbox_part_suffix" class="input" type="text"
                    name="seedbox_part_suffix" x-model="part_suffix"
                    placeholder=".part"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-caret-left"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>

        <div class="column is-6">
          <div class="field" x-data="{
              exclude_syncing: '{{ form.seedbox_exclude_syncing }}',
              isValid() { return true }
            }">
            <label class="label" for="seedbox_exclude_syncing">
              {{ _('Suffix used for .part') }}
              <a class="icon has-text-grey"
                title="{{ _('Exclude files from sync using a regular expression (Python re syntax). Example: .*missing$') }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="seedbox_exclude_syncing" class="input" type="text"
                    name="seedbox_exclude_syncing" x-model="exclude_syncing"
                    placeholder="^.*missing$"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-ban"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="box">
      <h2 class="title is-4">{{ _('Local (NAS)') }}</h2>
      <p class="is-italic">{{ _('Information about local environment (NAS?).') }}</p>

      <div class="columns pt-4">
        <div class="column is-6">
          <div class="field" x-data="{
              watch_path: '{{ form.local_watch_path }}',
              isValid() { return isRequired(this.watch_path) }
            }">
            <label class="label" for="local_watch_path">
              {{ _('Watch path') }}
              <a class="icon has-text-grey"
                title="{{ _('Your local watch folder.') }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="local_watch_path" class="input" type="text"
                    name="local_watch_path" x-model="watch_path"
                    placeholder="/watch"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-folder"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>

        <div class="column is-6">
          <div class="field" x-data="{
              download_path: '{{ form.local_download_path }}',
              isValid() { return isRequired(this.download_path) }
            }">
            <label class="label" for="local_download_path">
              {{ _('Downloads path') }}
              <a class="icon has-text-grey"
                title="{{ _('Path where files are downloaded.') }}">
                <i class="fas fa-circle-info"></i>
              </a>
            </label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="local_download_path" class="input" type="text"
                    name="local_download_path" x-model="download_path"
                    placeholder="/downloads"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-folder"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="box">
      <h2 class="title is-4">{{ _('Healthchecks') }}</h2>
      <p class="is-italic">{{ _('Settings Healthchecks service.') }}</p>

      <div class="columns pt-4" x-data="{
          sync_blackhole_enabled: '{{ form.healthchecks_sync_blackhole_enabled }}',
          enabled: {{ 'true' if form.healthchecks_sync_blackhole_enabled else 'false' }},
          sync_blackhole_ping_url: '{{ form.healthchecks_sync_blackhole_ping_url }}',
          isValid() { return isValidUrl(this.sync_blackhole_ping_url, this.enabled) }
        }">
        <div class="column is-6">
          <div class="field">
            <label class="label" for="healthchecks_sync_blackhole_enabled">{{ _('Enable for sync_blackhole task?') }}</label>
            <input id="healthchecks_sync_blackhole_enabled" type="checkbox" name="healthchecks_sync_blackhole_enabled" value="1" checked x-model="enabled" />
          </div>
        </div>

        <div class="column is-6">
          <div class="field">
            <label class="label" for="healthchecks_sync_blackhole_ping_url">{{ _('Ping URL for sync_blackhole task') }}</label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="healthchecks_sync_blackhole_ping_url" class="input" type="text"
                    name="healthchecks_sync_blackhole_ping_url" x-model="sync_blackhole_ping_url"
                    placeholder="https://hc-ping.com/94db845e-bd7c-42af-9ca8-25e89556b814"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-globe"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>
      </div>

      <div class="columns pt-4" x-data="{
        sync_seedbox_enabled: '{{ form.healthchecks_sync_seedbox_enabled }}',
        sync_seedbox_ping_url: '{{ form.healthchecks_sync_seedbox_ping_url }}',
        enabled: {{ 'true' if form.healthchecks_sync_seedbox_enabled else 'false' }},
        isValid() { return isValidUrl(this.sync_seedbox_ping_url, this.enabled) }
      }">
        <div class="column is-6">
          <div class="field">
            <label class="label" for="healthchecks_sync_seedbox_enabled">{{ _('Enable for sync_seedbox task?') }}</label>
            <input id="healthchecks_sync_seedbox_enabled" type="checkbox" name="healthchecks_sync_seedbox_enabled" value="1" checked x-model="enabled" />
          </div>
        </div>

        <div class="column is-6">
          <div class="field">
            <label class="label" for="healthchecks_sync_seedbox_ping_url">{{ _('Ping URL for sync_seedbox task') }}</label>
            <div class="control column is-10 p-0 has-icons-left has-icons-right">
              <input id="healthchecks_sync_seedbox_ping_url" class="input" type="text"
                    name="healthchecks_sync_seedbox_ping_url" x-model="sync_seedbox_ping_url"
                    placeholder="https://hc-ping.com/826cb034-14fe-4965-a9d9-bc0bed7b034d"
                    x-bind:class="{ 'is-danger': !isValid()}"/>
              <span class="icon is-small is-left"><i class="fas fa-globe"></i></span>
              <span class="icon is-small is-right" x-show="isValid()" x-transition><i class="fas fa-check has-text-success"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="control">
      <button class="button is-primary">{{ _('Save') }}</button>
    </div>

  </form>
</div>

{% if saved %}
<script>
  document.addEventListener("DOMContentLoaded", () => {
    bulmaToast.toast({
      message: `{{ _('Settings saved.') }}`,
      type: "is-success",
    });
  });
</script>
{% endif %}

{% endblock %}