{% extends "_plugin_header.html" %}

{% set sidebar_active_tab = "" %}

{% from '_switch.html' import switch %}

{% block workspace_content %}
<div class="status" id="plugin-enable-disable-bar">
    <div class="topbar">
        <div class="status-text">
            Status
        </div>
        {{ switch(plugin_name, is_enabled) }}
        <div class="title">
            {% if is_enabled %} Enabled {% else %} Disabled {% endif %}
        </div>
    </div>
    <div class="description">
        {% if not is_enabled %} Enable the plugin to edit settings. {% endif %}
    </div>
</div>

{% if is_enabled and not show_logs %}
<div>
    <h2>Plugin Settings</h2>
    <p>You can adjust the plugin's behavior by changing these settings. Changes will only go live after you apply them.
    </p>
</div>
<form id="config-forms-container" action="{{ url_for('plugin_config_update', name=plugin_name) }}" method="POST">
    <h3>Unique settings</h3>
    {% if plugin_config_unique %}
    {% with config=plugin_config_unique %}{% include "_config.html" %}{% endwith %}
    {% else %}
    <p>N/A</p>
    {% endif %}

    <h3>Default settings</h3>
    {% if plugin_config_defaults %}
    {% with config=plugin_config_defaults %}{% include "_config.html" %}{% endwith %}
    {% else %}
    <p>N/A</p>
    {% endif %}
    <button type="submit">Save changes</button>
</form>

{% endif %}

{% endblock %}

{% block scripts %}
<script>
    pluginName = '{{ plugin_name }}';
    isPluginInstalled = '{{ is_installed }}' === 'True';
    isPluginEnabled = '{{ is_enabled }}' === 'True';
    pluginUpgradeButton = document.getElementById('plugin-upgrade-button');
    pluginInstallButton = document.getElementById('plugin-install-button');
    cancelCommandButton = document.getElementById('cancel-command-button');

    tutorCommandsToWatch = ["tutor plugins install", "tutor plugins upgrade"];

    const toggleButtons = ({install = false, upgrade = false, cancel = false} = {}) => {
        pluginInstallButton.style.display = install ? 'block' : 'none';
        pluginUpgradeButton.style.display = upgrade ? 'block' : 'none';
        cancelCommandButton.style.display = cancel ? 'block' : 'none';
    }
    function ShowRunCommandButton() {
        if (isPluginInstalled) {
            toggleButtons({upgrade: true});
        } else {
            toggleButtons({install: true});
        }
    }
    function ShowCancelCommandButton() {
        toggleButtons({cancel: true});
    }
    function showPluginEnableDisableBar() {
        const bar = document.getElementById('plugin-enable-disable-bar');
        bar.style.display = isPluginInstalled ? 'flex' : 'none';
    }
    async function checkIfPluginInstalled(pluginName) {
        // TODO let's avoid hard-coded urls
        const response = await fetch(`/plugin/${pluginName}/is-installed`);
        const data = await response.json();
        return data.installed;
    }

    showPluginEnableDisableBar();
    ShowRunCommandButton();
</script>
<script src="{{ url_for('static', filename='js/config.js') }}"></script>
{% endblock %}
