{% from 'components/macros_form.html' import form_error, render_field %}
{% import 'components/macros.html' as macro %}

{% set breadcrumb_items = [
  (_('Settings'), url_for('settings.info')),
  (_('Synchronization'), False),
  (_('Seedbox'), False),
] %}

{% extends 'base.html' %}

{% block title %}
  {{ breadcrumb_items | map(attribute=0) | join(' / ') }}
{% endblock %}

{% block header %}{% endblock %}

{% block content %}
<div class="row">
  {% include 'components/menu_settings.html' %}

  <div class="col-md-10">
    {{ macro.breadcrumb(breadcrumb_items) }}

    <form method="post" x-data="validators.form()">
      {{ form.csrf_token }}
      {{ form_error(form) }}

      <div class="card bg-body-tertiary shadow">
        <div class="card-body">

          <h3 class="h4">{{ _('Connection') }}</h3>
          <p class="fst-italic">{{ _('Information about your seedbox connection.') }}</p>

          <div class="row">
            <div class="col-md-6 mb-3" x-data="{
              seedbox_host: '{{ form.seedbox_host.data }}',
              touched: false,
              isValid() { return validators.isValidHost(this.touched , this.seedbox_host) }
            }">
              {{ render_field(form.seedbox_host) }}
            </div>

            <div class="col-md-3 mb-3" x-data="{
              seedbox_port: '{{ form.seedbox_port.data }}',
              touched: false,
              isValid() { return validators.isValidPort(this.touched , this.seedbox_port) }
            }">
              {{ render_field(form.seedbox_port) }}
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3" x-data="{
              seedbox_login: '{{ form.seedbox_login.data }}',
              touched: false,
              isValid() { return validators.isRequired(this.touched, this.seedbox_login) }
            }">
              {{ render_field(form.seedbox_login) }}
            </div>

            <div class="col-md-6 mb-3" x-data="{
              seedbox_password: '{{ form.seedbox_password.data }}',
              touched: false,
              isValid() { return validators.isRequired(this.touched, this.seedbox_password) }
            }">
              {{ render_field(form.seedbox_password) }}
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3" x-data="{
              seedbox_timeout: '{{ form.seedbox_timeout.data }}',
              enabled: {{ 'true' if (form.seedbox_timeout.data | int(default=0)) != 0 else 'false' }},
              touched: false,
              isValid() { return validators.isValidTimeout(this.touched, this.seedbox_timeout) }
            }">
              <div class="form-check">
                <input class="form-check-input "type="checkbox"
                       id="{{ form.seedbox_timeout.id }}_enabled" name="{{ form.seedbox_timeout.id }}_enabled"
                       value="1" checked
                       @click="touched = true"
                       x-model="enabled"
                       x-effect="setFieldState('{{ form.seedbox_timeout.id }}_enabled', true, touched)" />
                <label class="form-check-label" for="{{ form.seedbox_timeout.id }}_enabled">{{ form.seedbox_timeout.label.text }}</label>
              </div>

              <label class="visually-hidden " for="{{ form.seedbox_timeout.id }}">{{ form.seedbox_timeout.label.text }}</label>
              <div class="input-group w-50" x-show="enabled" x-transition>
                <span class="input-group-text">
                  <i class="fas {{ form.seedbox_timeout.render_kw['icon'] }}"></i>
                </span>
                <input type="number" class="form-control"
                       id="{{ form.seedbox_timeout.id }}" name="{{ form.seedbox_timeout.name }}"
                       placeholder="{{ form.seedbox_timeout.render_kw['placeholder'] }}"
                       @click="touched = true"
                       x-model="{{ form.seedbox_timeout.id }}"
                       x-bind:class="isValid() ? 'is-valid' : 'is-invalid'"/>
              </div>
            </div>

            <div class="col-md-6 mb-3" x-data="{
              seedbox_protocol: '{{ form.seedbox_protocol.data }}',
              touched: false
            }">
              {{ render_field(form.seedbox_protocol) }}
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3" x-data="{
              seedbox_chmod: '{{ form.seedbox_chmod.data }}',
              enabled: {{ 'true' if (form.seedbox_chmod.data | string) not in ['0', 'False'] else 'false' }},
              touched: false,
              isValid() { return validators.isOctalChmod(this.touched, this.seedbox_chmod) }
            }">
              <div class="form-check">
                <input class="form-check-input "type="checkbox"
                       id="{{ form.seedbox_chmod.id }}_enabled" name="{{ form.seedbox_chmod.id }}_enabled"
                       value="1" checked
                       @click="touched = true"
                       x-model="enabled"
                       x-effect="setFieldState('{{ form.seedbox_chmod.id }}_enabled', true, touched)" />
                <label class="form-check-label" for="{{ form.seedbox_chmod.id }}_enabled">
                  {{ form.seedbox_chmod.label.text }}
                  <a href="#" class="text-body-info ms-1" @click.prevent
                      data-bs-toggle="tooltip"
                      data-bs-title="{{ form.seedbox_chmod.render_kw['help'] }}"
                      aria-label="{{ form.seedbox_chmod.render_kw['help'] }}">
                    <i class="fas fa-circle-info"></i>
                  </a>
                </label>
              </div>

              <label class="visually-hidden " for="{{ form.seedbox_chmod.id }}">{{ form.seedbox_chmod.label.text }}</label>
              <div class="input-group w-50" x-show="enabled" x-transition>
                <span class="input-group-text">
                  <i class="fas {{ form.seedbox_chmod.render_kw['icon'] }}"></i>
                </span>
                <input type="text" class="form-control"
                       id="{{ form.seedbox_chmod.id }}" name="{{ form.seedbox_timeout.name }}"
                       placeholder="{{ form.seedbox_chmod.render_kw['placeholder'] }}"
                       @click="touched = true"
                       x-model="{{ form.seedbox_timeout.id }}"
                       x-bind:class="isValid() ? 'is-valid' : 'is-invalid'"/>
              </div>
            </div>

            <div class="col-md-6 mb-3" x-data="{
              seedbox_max_concurrent_prefetch_requests: '{{ form.seedbox_max_concurrent_prefetch_requests.data }}',
              touched: false,
              isValid() { return validators.isValidMaxConcPrefetchReq(this.touched, this.seedbox_max_concurrent_prefetch_requests) }
            }">
              {{ render_field(form.seedbox_max_concurrent_prefetch_requests) }}
            </div>
          </div>

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

          <div class="row">
            <div class="col-md-6 mb-3" x-data="{
              seedbox_tmp_path: '{{ form.seedbox_tmp_path.data }}',
              touched: false,
              isValid() { return validators.isRequired(this.touched, this.seedbox_tmp_path) }
            }">
              {{ render_field(form.seedbox_tmp_path) }}
            </div>

            <div class="col-md-6 mb-3" x-data="{
              seedbox_watch_path: '{{ form.seedbox_watch_path.data }}',
              touched: false,
              isValid() { return validators.isRequired(this.touched, this.seedbox_watch_path) }
            }">
              {{ render_field(form.seedbox_watch_path) }}
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3" x-data="{
              seedbox_finished_path: '{{ form.seedbox_finished_path.data }}',
              touched: false,
              isValid() { return validators.isRequired(this.touched, this.seedbox_finished_path) }
            }">
              {{ render_field(form.seedbox_finished_path) }}
            </div>

            <div class="col-md-6 mb-3" x-data="{
              seedbox_prefixed_path: '{{ form.seedbox_prefixed_path.data }}',
              touched: false,
              isValid() { return validators.isRequired(this.touched, this.seedbox_prefixed_path) }
            }">
              {{ render_field(form.seedbox_prefixed_path) }}
            </div>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3" x-data="{
              seedbox_part_suffix: '{{ form.seedbox_part_suffix.data }}',
              touched: false,
              isValid() { return validators.isRequired(this.touched, this.seedbox_part_suffix) }
            }">
              {{ render_field(form.seedbox_part_suffix) }}
            </div>

            <div class="col-md-6 mb-4" x-data="{
              seedbox_exclude_syncing: '{{ form.seedbox_exclude_syncing.data }}',
              touched: false,
              isValid() { return true }
            }">
              {{ render_field(form.seedbox_exclude_syncing) }}
            </div>
          </div>
        </div>
      </div>

      <div class="mt-4 text-end">
        <button class="btn btn-success" :disabled="!canSubmit()">
          <i class="fas fa-floppy-disk "></i> {{ _('Save') }}
        </button>
      </div>

    </form>
  </div>
</div>

{% endblock %}