{% extends "config/base.html" %}
{% import "site_shell/_macros.html" as ui %}

{% block title %}Variables - Pychestrate Configuration{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Variables</h1>
    <p>Manage system-wide configuration variables</p>
</div>

<div class="toolbar">
    <form method="get" class="actions-row">
        <input type="text" name="search" class="form-control w-lg" placeholder="Search variables..." aria-label="Search variables"
               value="{{ search }}">
        <button type="submit" class="btn btn-secondary">
            {{ ui.icon("search") }} Search
        </button>
        <a href="{{ url_for(request_endpoint) }}" class="btn btn-secondary">Clear</a>
    </form>

    <a href="{{ url_for('config.variable_create') }}" class="btn btn-primary">
        {{ ui.icon("add") }} Create Variable
    </a>
</div>

<div class="table-scroll" tabindex="0"><table class="data-table">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Type</th>
            <th scope="col">Value</th>
            <th scope="col">Description</th>
            <th scope="col">Updated</th>
            <th scope="col">Actions</th>
        </tr>
    </thead>
    <tbody>
        {% for variable in variables %}
        <tr>
            <td><a href="{{ url_for('config.variable_detail', name=variable.name) }}">{{ variable.name }}</a>{% if variable.name in system_owners %} <span class="badge badge-secondary" data-role="system-owned" title="Changed on the {{ system_owners[variable.name].label }} page">system</span>{% endif %}</td>
            <td><span class="badge badge-info">{{ variable.var_type | state_words }}</span></td>
            {# Values are masked by default -- they may hold credentials.
               The reveal toggle swaps the mask for the real value per row. #}
            <td class="narrow-sm">
                <span data-role="variable-masked" class="masked">&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</span>
                <span data-role="variable-value" hidden style="display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;">{{ format_value(value=variable.value, var_type=variable.var_type) }}</span>
                <button type="button" class="btn btn-sm btn-secondary" data-role="variable-reveal" aria-pressed="false" aria-label="Show value for {{ variable.name }}">Show</button>
            </td>
            <td>{{ variable.description or '—' }}</td>
            <td>{% if variable.updated_at %}{{ variable.updated_at | format_datetime('%Y-%m-%d %H:%M') }}{% else %}&mdash;{% endif %}</td>
            <td>
                <div class="row-actions">
                    {% if variable.name not in system_owners %}
                    <a href="{{ url_for('config.variable_edit', name=variable.name) }}" class="btn btn-sm btn-secondary">Edit</a>
                    {% endif %}
                    <a href="{{ url_for('config.variable_history', name=variable.name) }}" class="btn btn-sm btn-secondary">History</a>
                    {% if variable.name not in system_owners %}
                    <form action="{{ url_for('config.variable_delete', name=variable.name) }}" method="post" data-confirm="Delete this variable? Its history is kept.">
                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                        <button type="submit" class="btn btn-sm btn-quiet-danger">Delete</button>
                    </form>
                    {% endif %}
                </div>
            </td>
        </tr>
        {% else %}
        {{ ui.empty_state("No variables found", colspan=6) }}
        {% endfor %}
    </tbody>
</table></div>

{{ ui.pagination('config.variable_list', page, total_pages, {'search': search, 'per_page': per_page}, total=total) }}

<p class="muted mt">Total: {{ total }} variable{{ '' if total == 1 else 's' }}</p>
{% endblock %}

{% block extra_js %}
<script nonce="{{ csp_nonce() }}">
    // Per-row reveal toggle for masked variable values.
    document.addEventListener("click", function (event) {
        var target = event.target;
        if (target === null || typeof target.closest !== "function") {
            return;
        }
        var button = target.closest("[data-role='variable-reveal']");
        if (button === null) {
            return;
        }
        var cell = button.closest("td");
        if (cell === null) {
            return;
        }
        var masked = cell.querySelector("[data-role='variable-masked']");
        var revealed = cell.querySelector("[data-role='variable-value']");
        if (masked === null || revealed === null) {
            return;
        }
        if (revealed.hasAttribute("hidden")) {
            revealed.removeAttribute("hidden");
            masked.setAttribute("hidden", "");
            button.textContent = "Hide";
            button.setAttribute("aria-pressed", "true");
            button.setAttribute("aria-label", (button.getAttribute("aria-label") || "").replace(/^Show/, "Hide"));
        } else {
            revealed.setAttribute("hidden", "");
            button.setAttribute("aria-pressed", "false");
            button.setAttribute("aria-label", (button.getAttribute("aria-label") || "").replace(/^Hide/, "Show"));
            masked.removeAttribute("hidden");
            button.textContent = "Show";
        }
    });
</script>
{% endblock %}