{% extends 'admin/layout/base.twig' %}

{% block title %}Install Plugin - {{ app_name }}{% endblock %}

{% block content %}
<div class="op-page-header">
    <div>
        <h1>Install Plugin</h1>
        <p class="op-page-subtitle">Upload and install packaged payment gateways or addon plugins from zip archives.</p>
    </div>
    <a href="/admin/plugins" class="op-btn op-btn-outline">← Back to Plugins</a>
</div>

{% if flash_error %}
<div class="op-alert op-alert-danger">{{ flash_error }}</div>
{% endif %}

<div class="op-card">
    <div class="op-card-header">
        <h3>Upload Plugin Package</h3>
        <p class="op-text-muted">Upload a plugin, addon, gateway, or theme as a .zip archive.</p>
    </div>

    <form method="POST" action="/admin/plugins/upload" enctype="multipart/form-data" id="plugin-upload-form">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">

        <div class="op-dropzone" id="dropzone">
            <div class="op-dropzone-content" id="dropzone-default">
                <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" style="opacity:0.5">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="17 8 12 3 7 8"></polyline>
                    <line x1="12" y1="3" x2="12" y2="15"></line>
                </svg>
                <p class="op-mt-2"><strong>Drag & drop plugin ZIP here</strong></p>
                <p class="op-text-muted">or click to browse files</p>
                <input type="file" name="plugin_zip" id="plugin-file" accept=".zip" class="op-file-input" required>
            </div>
            <div class="op-dropzone-selected" id="dropzone-selected" style="display:none">
                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="#00b894" stroke-width="2">
                    <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                    <polyline points="14 2 14 8 20 8"></polyline>
                </svg>
                <div class="op-mt-2">
                    <p id="upload-filename" class="op-text-bold"></p>
                    <p id="upload-filesize" class="op-text-muted op-text-sm"></p>
                </div>
                <button type="button" id="clear-file" class="op-btn op-btn-sm op-btn-outline op-mt-2">Change File</button>
            </div>
        </div>

        <div class="op-form-actions op-mt-3">
            <button type="submit" class="op-btn op-btn-primary op-btn-lg" id="install-btn" disabled>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="op-mr-1">
                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                    <polyline points="7 10 12 15 17 10"></polyline>
                    <line x1="12" y1="15" x2="12" y2="3"></line>
                </svg>
                Install Plugin
            </button>
        </div>
    </form>
</div>

<div class="op-card op-mt-4">
    <div class="op-card-header">
        <h3>Plugin Requirements</h3>
    </div>
    <div class="op-list-info">
        <div class="op-list-info-item">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00b894" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            <span>Plugin must be a <strong>.zip</strong> file containing a plugin directory</span>
        </div>
        <div class="op-list-info-item">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00b894" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            <span>Must contain a valid <code>manifest.json</code> with name, slug, version, type, and entrypoint</span>
        </div>
        <div class="op-list-info-item">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00b894" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            <span>Entrypoint class must implement <code>PluginInterface</code></span>
        </div>
        <div class="op-list-info-item">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#00b894" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            <span>Supported types: <code>gateway</code>, <code>addon</code>, <code>theme</code></span>
        </div>
        <div class="op-list-info-item">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6C5CE7" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>
            <span>Maximum upload size: <strong>{{ max_upload_size }}</strong></span>
        </div>
    </div>
</div>

<div class="op-card op-mt-4">
    <div class="op-card-header">
        <h3>Manifest Example</h3>
    </div>
    <pre class="op-code-block"><code>{
    "name": "My Addon",
    "slug": "my-addon",
    "version": "1.0.0",
    "description": "What this plugin does",
    "author": "Your Name",
    "type": "addon",
    "entrypoint": "Plugin.php",
    "namespace": "OwnPay\\Modules\\Addons\\MyAddon",
    "requires": { "core": ">=0.1.0" }
}</code></pre>
</div>


{% endblock %}
{% block scripts %}<script nonce="{{ csp_nonce }}" src="/assets/js/pages/plugin-install.js"></script>{% endblock %}