{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
/plugins/settings/<slug> — the plugin's opaque settings blob.

The panel checks that this is a JSON object under a size ceiling and stores it.
It does not interpret the contents: those belong to the plugin, which validates
them itself. The editor is a textarea, not a generated form, because the panel
has no schema for a third-party plugin's settings and inventing one would just
be a lie about what is enforced.
{% endcomment %}

{% block title %}{% if missing %}Plugin not found{% else %}{{ plugin.name }} settings{% endif %}{% endblock %}

{% block styles %}
  {% include "pluginHolder/_styles.html" %}
{% endblock %}

{% block content %}
{% if missing %}
  <div class="cp-plugin-card p-4">
    <h1 class="h5 mb-2">Plugin not found</h1>
    <p class="cp-plugin-muted mb-3">
      No plugin named <span class="cp-plugin-mono">{{ slug }}</span> is installed.
    </p>
    <a href="/plugins/" class="btn btn-outline-secondary btn-sm">Back to plugins</a>
  </div>
{% else %}
<div ng-controller="pluginSettingsController">

  {{ plugin.slug|json_script:"cpPluginSlug" }}
  {{ settingsJSON|json_script:"cpPluginSettings" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">{{ plugin.name }} settings</h1>
      <p class="cp-plugin-muted mb-0 small">
        <span class="cp-plugin-mono">{{ plugin.slug }}</span> &middot; version {{ plugin.version }}
      </p>
    </div>
    <a href="/plugins/detail/{{ plugin.slug }}" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left me-1" aria-hidden="true"></i>Plugin details
    </a>
  </div>

  <div class="alert alert-danger py-2 px-3" ng-show="errorMessage" ng-cloak role="alert">
    <i class="fas fa-circle-exclamation me-1" aria-hidden="true"></i>
    <span ng-bind="errorMessage"></span>
  </div>
  <div class="alert alert-success py-2 px-3" ng-show="okMessage" ng-cloak role="status">
    <i class="fas fa-circle-check me-1" aria-hidden="true"></i>
    <span ng-bind="okMessage"></span>
  </div>

  <div class="cp-plugin-card p-3 p-md-4">
    <label class="form-label" for="cpPluginSettingsEditor">Settings (JSON object)</label>
    <textarea class="form-control cp-plugin-mono" id="cpPluginSettingsEditor" rows="18"
              spellcheck="false" ng-model="text" ng-change="revalidate()"></textarea>

    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mt-2">
      <div class="small" ng-class="{'text-danger': parseError}" ng-cloak>
        <span ng-show="parseError"><i class="fas fa-circle-exclamation me-1"></i><span ng-bind="parseError"></span></span>
        <span ng-show="!parseError" class="cp-plugin-muted">
          Valid JSON object &middot; <span ng-bind="byteLabel()"></span> of {{ maxSettingsKB }} KB
        </span>
      </div>
      <div class="d-flex gap-2">
        <button type="button" class="btn btn-outline-secondary btn-sm"
                ng-click="reset()" ng-disabled="busy">Revert</button>
        <button type="button" class="btn btn-outline-secondary btn-sm"
                ng-click="format()" ng-disabled="busy || parseError">Reformat</button>
        <button type="button" class="btn btn-primary btn-sm"
                ng-click="save()" ng-disabled="busy || parseError">
          <i class="fas fa-floppy-disk me-1" aria-hidden="true"></i>Save settings
        </button>
      </div>
    </div>
  </div>

  <div class="cp-plugin-card p-3 p-md-4 mt-4">
    <h2 class="h6 mb-2">What the panel does and does not do with this</h2>
    <ul class="small mb-0">
      <li>It checks the value is a JSON object and under {{ maxSettingsKB }}&nbsp;KB. Nothing else.</li>
      <li>
        It stores it as plain JSON in the panel database.
        <strong>Do not put credentials here</strong> — the column is not encrypted, and
        anyone with database access or a panel backup can read it.
      </li>
      <li>
        The plugin reads it on its next hook call through
        <span class="cp-plugin-mono">Plugin.objects.get(slug=…).settings</span>; no restart
        is needed and nothing is reloaded.
      </li>
      <li>
        Keys and their meanings are the plugin author's to document. The panel has no
        schema for them.
      </li>
    </ul>
  </div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
  <script src="{% static 'pluginHolder/pluginHolder.js' %}"></script>
{% endblock %}