{% extends "base.html" %} {% from "macros.jinja" import window_vars with context
%} {% block page %}
<div class="row q-col-gutter-md justify-center">
  <div class="col q-my-md">
    <q-btn
      :label="$t('save')"
      color="primary"
      @click="updateSettings"
      :disabled="!checkChanges"
    >
      <q-tooltip v-if="checkChanges">
        <span v-text="$t('save_tooltip')"></span>
      </q-tooltip>

      <q-badge
        v-if="checkChanges"
        color="red"
        rounded
        floating
        style="padding: 6px; border-radius: 6px"
      />
    </q-btn>

    <q-btn
      v-if="isSuperUser"
      :label="$t('restart')"
      color="primary"
      @click="restartServer"
      class="q-ml-md"
    >
      <q-tooltip v-if="needsRestart">
        <span v-text="$t('restart_tooltip')"></span>
      </q-tooltip>

      <q-badge
        v-if="needsRestart"
        color="red"
        rounded
        floating
        style="padding: 6px; border-radius: 6px"
      />
    </q-btn>

    <q-btn :label="$t('download_backup')" flat @click="downloadBackup"></q-btn>

    <q-btn
      flat
      v-if="isSuperUser"
      :label="$t('reset_defaults')"
      color="primary"
      @click="deleteSettings"
      class="float-right"
    >
      <q-tooltip>
        <span v-text="$t('reset_defaults_tooltip')"></span>
      </q-tooltip>
    </q-btn>
  </div>
</div>

<div class="row q-col-gutter-md justify-center">
  <div class="col q-gutter-y-md">
    <q-card>
      <q-splitter v-model="tabsPercent">
        <template v-slot:before>
          <q-tabs v-model="tab" vertical active-color="primary">
            <q-tab
              name="funding"
              icon="account_balance_wallet"
              :label="$t('funding')"
              @update="val => tab = val.name"
            ></q-tab>
            <q-tab
              name="security"
              icon="security"
              :label="$t('security')"
              @update="val => tab = val.name"
            ></q-tab>

            <q-tab
              name="users"
              icon="group"
              :label="$t('users')"
              @update="val => tab = val.name"
            ></q-tab>
            <q-tab
              name="extensions"
              icon="extension"
              :label="$t('extensions')"
              @update="val => tab = val.name"
            ></q-tab>
            <q-tab
              name="server"
              icon="price_change"
              :label="$t('payments')"
              @update="val => tab = val.name"
            ></q-tab>
            <q-tab
              name="notifications"
              icon="notifications"
              :label="$t('notifications')"
              @update="val => tab = val.name"
            ></q-tab>
            <q-tab
              name="site_customisation"
              icon="language"
              :label="$t('site_customisation')"
              @update="val => tab = val.name"
            ></q-tab>
          </q-tabs>
        </template>

        <template v-slot:after>
          <q-form name="settings_form" id="settings_form">
            <q-tab-panels
              v-model="tab"
              animated
              swipeable
              vertical
              transition-prev="jump-up"
              transition-next="jump-up"
            >
              {% include "admin/_tab_funding.html" %} {% include
              "admin/_tab_users.html" %} {% include "admin/_tab_server.html" %}
              {% include "admin/_tab_extensions.html" %} {% include
              "admin/_tab_notifications.html" %} {% include
              "admin/_tab_security.html" %} {% include "admin/_tab_theme.html"
              %}
            </q-tab-panels>
          </q-form>
        </template>
      </q-splitter>
    </q-card>
  </div>
</div>

{% endblock %} {% block scripts %} {{ window_vars(user) }}
<script src="{{ static_url_for('static', 'js/admin.js') }}"></script>
{% endblock %}