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

{% block title %}{{ variable_name }} History - Pychestrate Configuration{% endblock %}

{% block extra_css %}
<style>
    .pyc-admin-page-fragment .diff-block { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--pyc-font-family-mono, ui-monospace, monospace); font-size: var(--pyc-font-size-small, 0.875rem); }
    .pyc-admin-page-fragment .diff-add { display: block; background: var(--pyc-color-success-surface); color: var(--pyc-color-on-success-surface); }
    .pyc-admin-page-fragment .diff-add::before { content: "+ "; }
    .pyc-admin-page-fragment .diff-remove { display: block; background: var(--pyc-color-error-surface); color: var(--pyc-color-on-error-surface); }
    .pyc-admin-page-fragment .diff-remove::before { content: "\2212  "; }
    .pyc-admin-page-fragment .diff-context, .pyc-admin-page-fragment .diff-gap { display: block; color: var(--pyc-color-on-surface-muted); }
    .pyc-admin-page-fragment .diff-context::before { content: "  "; white-space: pre; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Variable History: {{ variable_name }}</h1>
    <p>View change history for this variable</p>
</div>

{% if variable_deleted %}
<p class="alert alert-warning" role="status" data-role="variable-deleted">This variable has been deleted. Its history is kept, so you can still see what it held and who changed it.</p>
{% endif %}

<p class="mb-sm"><button type="button" class="btn btn-sm btn-secondary" data-reveal-all="#history-values" aria-pressed="false" data-role="reveal-values">Show values</button> <span class="muted small">Values may hold credentials, so they are hidden until you ask.</span></p>

<div class="table-scroll" tabindex="0" id="history-values"><table class="data-table">
    <thead>
        <tr>
            <th scope="col">Changed At</th>
            <th scope="col">Changed By</th>
            <th scope="col">Change</th>
            <th scope="col">Old Value</th>
            <th scope="col">New Value</th>
        </tr>
    </thead>
    <tbody>
        {% for entry in history %}
        <tr>
            <td>{{ entry.changed_at | format_datetime('%Y-%m-%d %H:%M:%S') }}</td>
            <td>{{ entry.changed_by or '—' }}</td>
            <td data-role="change">
                {% if entry.old_value is none %}<span class="badge badge-success">Created</span>
                {% elif entry.new_value is none %}<span class="badge badge-danger">Deleted</span>
                {% else %}<span class="badge badge-info">Changed</span>
                <span data-role="mask" class="masked">&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</span><span data-role="secret" hidden><span class="diff-block" data-role="diff">{% for line in change_diff(old=format_value(value=entry.old_value, var_type=(variable.var_type if variable else none)), new=format_value(value=entry.new_value, var_type=(variable.var_type if variable else none))) %}<span class="diff-{{ line.kind }}">{{ line.text }}</span>{% endfor %}</span></span>
                {% endif %}
            </td>
            <td class="truncate">
                {% if entry.old_value is not none %}<span data-role="mask" class="masked">&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</span><span data-role="secret" hidden>{{ format_value(value=entry.old_value, var_type=(variable.var_type if variable else none)) }}</span>{% else %}-{% endif %}
            </td>
            <td class="truncate">
                {% if entry.new_value is not none %}<span data-role="mask" class="masked">&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;</span><span data-role="secret" hidden>{{ format_value(value=entry.new_value, var_type=(variable.var_type if variable else none)) }}</span>{% else %}-{% endif %}
            </td>
        </tr>
        {% else %}
        {{ ui.empty_state("No history found", colspan=5) }}
        {% endfor %}
    </tbody>
</table></div>

{{ ui.pagination('config.variable_history', page, total_pages, {'name': variable_name, 'per_page': per_page}, total=total) }}
<p class="muted">{{ total }} change{{ '' if total == 1 else 's' }} recorded</p>

<div class="mt">
    {% if variable_deleted %}
    <a href="{{ url_for('config.variable_list') }}" class="btn btn-secondary">
        {{ ui.icon("arrow_back") }} Back to Variables
    </a>
    {% else %}
    <a href="{{ url_for('config.variable_detail', name=variable_name) }}" class="btn btn-secondary">
        {{ ui.icon("arrow_back") }} Back to Variable
    </a>
    {% endif %}
</div>
{% include "site_shell/_reveal_values.html" %}
{% endblock %}