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

{% set breadcrumb_items = [
  (_('Settings'), url_for('settings.info')),
  (_('General'), False),
  (_('SeedboxSync'), 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">{{ _('Features') }}</h3>
          <div class="row">
            <div class="col-md-6 mb-3" x-data="{
              enabled: {{ 'true' if form.sync_blackhole_enabled.data else 'false' }},
              touched: false
            }">
              {{ render_field(form.sync_blackhole_enabled) }}
            </div>

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

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

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


          <h3 class="h4">{{ _('Stats') }}</h3>
          <div class="row">
            <div class="col-md-6 mb-3">
              <div x-data="{
                webui_doughnut_legend: '{{ form.webui_doughnut_legend.data }}',
                touched: false
              }">
                {{ render_field(form.webui_doughnut_legend) }}
              </div>
            </div>
            <div class="col-md-6 mb-3">
              <div x-data="{
                webui_doughnut_legend_limit: '{{ form.webui_doughnut_legend_limit.data }}',
                touched: false,
                isValid() { return validators.isInRange(this.touched , 0, 999, this.webui_doughnut_legend_limit) }
              }">
                {{ render_field(form.webui_doughnut_legend_limit) }}
              </div>
            </div>
          </div>

          <h3 class="h4 pt-4">{{ _('Security') }}</h3>
          <div class="row">
            <div class="col-md-6 mb-3" x-data="{
              enabled: {{ 'true' if form.wtf_csrf_enabled.data else 'false' }},
              touched: false
            }">
              {{ render_field(form.wtf_csrf_enabled) }}
            </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 %}