{% extends "baseTemplate/index.html" %}
{% load static %}
{% comment %}
/plugins/available — plugin directories on disk, plus the upload form.

"Available" means "a directory under the plugins root with a manifest this panel
could parse". There is no remote marketplace and this page does not imply one.
Reading a manifest never imports code, so opening this page is safe even when a
directory contains something hostile.
{% endcomment %}

{% block title %}Add a plugin{% endblock %}

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

{% block content %}
<div ng-controller="pluginAvailableController">

  {{ pluginsRoot|json_script:"cpPluginsRoot" }}
  {{ maxUploadMB|json_script:"cpPluginMaxUploadMB" }}

  <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-4">
    <div>
      <h1 class="h4 mb-1">Add a plugin</h1>
      <p class="cp-plugin-muted mb-0 small">
        Upload a plugin archive, or install a directory an operator has already
        placed in <span class="cp-plugin-mono">{{ pluginsRoot }}</span>.
      </p>
    </div>
    <a href="/plugins/" class="btn btn-outline-secondary btn-sm">
      <i class="fas fa-arrow-left me-1" aria-hidden="true"></i>Installed plugins
    </a>
  </div>

  {% include "pluginHolder/_warning.html" %}

  <div class="alert alert-danger py-2 px-3 mt-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 mt-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>

  <!-- ------------------------------------------------------------- upload -->
  <div class="cp-plugin-card p-3 p-md-4 mt-3">
    <h2 class="h6 mb-1">Upload a plugin archive</h2>
    <p class="cp-plugin-muted small mb-3">
      A ZIP containing the plugin directory, or its contents with
      <span class="cp-plugin-mono">plugin.json</span> at the top level.
      Maximum {{ maxUploadMB }}&nbsp;MB. The archive is hashed and checked against
      the SHA-256 you supply <em>before</em> it is unpacked, and it is installed
      disabled — uploading never runs plugin code.
    </p>

    <div class="row g-3">
      <div class="col-md-6">
        <label class="form-label" for="cpPluginFile">Plugin archive (.zip)</label>
        <input class="form-control" type="file" id="cpPluginFile" accept=".zip,application/zip"
               cp-plugin-file>
        <div class="form-text" ng-show="fileName" ng-cloak>
          <span ng-bind="fileName"></span> &middot; <span ng-bind="fileSize"></span>
        </div>
      </div>
      <div class="col-md-6">
        <label class="form-label" for="cpPluginSha">SHA-256 of the archive</label>
        <input class="form-control cp-plugin-mono" type="text" id="cpPluginSha"
               ng-model="uploadChecksum" maxlength="64" spellcheck="false"
               placeholder="64 hexadecimal characters">
        <div class="form-text">
          Get this from the plugin author over a channel you trust, then run
          <span class="cp-plugin-mono">sha256sum &lt;file&gt;</span> to compare.
          It proves the file arrived intact; it does not prove the code is safe.
        </div>
      </div>
      <div class="col-12">
        <div class="form-check">
          <input class="form-check-input" type="checkbox" id="cpPluginOverwrite"
                 ng-model="overwrite">
          <label class="form-check-label" for="cpPluginOverwrite">
            Replace the installed copy if this plugin is already installed
            (it will be disabled and its files replaced)
          </label>
        </div>
      </div>
      <div class="col-12">
        <button type="button" class="btn btn-primary" ng-click="upload()"
                ng-disabled="busy || !fileName || uploadChecksum.length !== 64">
          <i class="fas fa-upload me-1" aria-hidden="true"></i>Upload and install (disabled)
        </button>
      </div>
    </div>
  </div>

  <!-- ---------------------------------------------------------- on disk -->
  <div class="cp-plugin-card p-3 p-md-4 mt-4">
    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
      <h2 class="h6 mb-0">Found in the plugins directory</h2>
      <button type="button" class="btn btn-outline-secondary btn-sm"
              ng-click="load()" ng-disabled="busy">
        <i class="fas fa-rotate me-1" aria-hidden="true"></i>Rescan
      </button>
    </div>

    <div class="cp-plugin-empty" ng-show="!busy && available.length === 0" ng-cloak>
      <i class="fas fa-folder-open fa-2x mb-3" aria-hidden="true"></i>
      <p class="mb-0">
        Nothing in <span class="cp-plugin-mono">{{ pluginsRoot }}</span> yet.
      </p>
    </div>

    <div class="cp-plugin-hook" ng-repeat="item in available" ng-cloak>
      <div class="d-flex flex-wrap justify-content-between align-items-start gap-2">
        <div>
          <span class="fw-semibold" ng-bind="item.name"></span>
          <span class="cp-plugin-muted small">
            <span ng-bind="item.version"></span>
            <span ng-show="item.author"> &middot; <span ng-bind="item.author"></span></span>
          </span>
          <div class="small cp-plugin-mono cp-plugin-muted" ng-bind="item.slug"></div>
        </div>
        <div class="text-end">
          <span class="cp-plugin-chip cp-plugin-chip--on" ng-show="item.installed">Installed</span>
          <span class="cp-plugin-chip cp-plugin-chip--warn" ng-show="!item.valid">Invalid</span>
          <span class="cp-plugin-chip cp-plugin-chip--warn"
                ng-show="item.valid && !item.compatible">Incompatible</span>
        </div>
      </div>

      <div class="small mt-2" ng-bind="item.description" ng-show="item.description"></div>
      <div class="small text-danger mt-2" ng-bind="item.error" ng-show="item.error"></div>

      <div class="mt-2" ng-show="item.valid">
        <span class="cp-plugin-chip" ng-repeat="hook in item.hooks" ng-bind="hook"></span>
        <span class="cp-plugin-chip cp-plugin-chip--warn"
              ng-repeat="perm in item.permissions">needs <span ng-bind="perm"></span></span>
        <span class="cp-plugin-muted small" ng-show="!item.hooks.length">declares no hooks</span>
      </div>

      <div class="small cp-plugin-muted mt-2" ng-show="item.checksum">
        Directory SHA-256: <span class="cp-plugin-mono" ng-bind="item.checksum"></span>
      </div>
      <div class="small cp-plugin-muted" ng-show="item.valid && !item.compatible">
        Declares <span ng-bind="item.compatibilityText || compatibilityText(item)"></span>;
        this panel is {{ panelVersion }}.
      </div>

      <div class="mt-3" ng-show="!item.installed && item.valid && item.compatible">
        <button type="button" class="btn btn-outline-primary btn-sm"
                ng-click="install(item)" ng-disabled="busy">
          <i class="fas fa-download me-1" aria-hidden="true"></i>Install (disabled)
        </button>
        <span class="small cp-plugin-muted ms-2">
          Installing records the plugin and its checksum. It does not run any code.
        </span>
      </div>
      <div class="mt-3" ng-show="item.installed">
        <a class="btn btn-outline-secondary btn-sm" ng-href="/plugins/detail/{$ item.slug $}">
          Open details
        </a>
      </div>
    </div>
  </div>
</div>
{% endblock %}

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