{% extends "base.html" %}
{% load i18n %}

{% block title %}{% trans "Setting Details" %} | {{ setting.key }}{% endblock %}

{% block content %}
<div class="container-fluid py-4">
    <nav aria-label="breadcrumb" class="mb-3">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="{% url 'settings_list' %}" class="text-decoration-none text-muted">
                    <i class="fas fa-sliders-h me-1"></i> {% trans "Integrations" %}
                </a>
            </li>
            <li class="breadcrumb-item active" style="color: #F43B5E; font-weight: 600;">{{ setting.key }}</li>
        </ol>
    </nav>

    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-dark fw-bold">{% trans "Setting Details" %}</h1>
            <p class="text-muted small mb-0">{{ setting.name|default:setting.key }}</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{% url 'settings_update' setting.pk %}" class="btn btn-main-action shadow-sm">
                <i class="fas fa-edit me-1"></i> {% trans "Edit" %}
            </a>
            <a href="{% url 'settings_list' %}" class="btn btn-outline-secondary shadow-sm">
                <i class="fas fa-arrow-left me-1"></i> {% trans "Back" %}
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm mb-4">
                <div class="card-header bg-white border-bottom-0 pt-4 px-4">
                    <h5 class="card-title text-primary-theme fw-bold mb-0">{% trans "Configuration" %}</h5>
                </div>
                <div class="card-body p-4">
                    <div class="mb-4">
                        <label class="text-muted small fw-bold text-uppercase tracking-wider mb-2">{% trans "Internal Key" %}</label>
                        <div class="p-2 bg-light rounded border d-flex justify-content-between align-items-center">
                            <code class="text-primary-theme fs-5">{{ setting.key }}</code>
                            <button class="btn btn-link btn-sm text-secondary" onclick="copyToClipboard('{{ setting.key|escapejs }}', this)">
                                <i class="fas fa-copy"></i>
                            </button>
                        </div>
                    </div>

                    <div class="mb-0">
                        <label class="text-muted small fw-bold text-uppercase tracking-wider mb-2">{% trans "Sensitive Value" %}</label>
                        <div class="p-3 bg-light rounded border">
                            <div class="d-flex justify-content-between align-items-start">
                                <div class="font-monospace text-break" id="revealContainer" style="word-break: break-all;">
                                    <span class="reveal-toggle text-muted fs-5" 
                                          data-full-value="{{ setting.value }}" 
                                          data-masked="••••••••••••••••••••••••"
                                          style="user-select: none;">
                                        ••••••••••••••••••••••••
                                    </span>
                                </div>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-light btn-sm border" onclick="toggleSecret(document.querySelector('.reveal-toggle'))" title="{% trans 'Show/Hide' %}">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button type="button" class="btn btn-light btn-sm border" onclick="copyToClipboard('{{ setting.value|escapejs }}', this)" title="{% trans 'Copy' %}">
                                        <i class="fas fa-copy"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4">
                    <h6 class="text-dark fw-bold mb-3">{% trans "Metadata" %}</h6>
                    
                    <div class="mb-3">
                        <label class="text-muted small d-block">{% trans "Category" %}</label>
                        <span class="badge rounded-pill bg-light text-dark border">{{ setting.get_category_display }}</span>
                    </div>

                    <hr class="text-light">

                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0 bg-light p-2 rounded-circle me-3">
                            <i class="fas fa-calendar-alt text-muted"></i>
                        </div>
                        <div>
                            <label class="text-muted small d-block">{% trans "Created" %}</label>
                            <span class="text-dark small">{{ setting.created_at|date:"M d, Y H:i" }}</span>
                        </div>
                    </div>

                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0 bg-light p-2 rounded-circle me-3">
                            <i class="fas fa-history text-muted"></i>
                        </div>
                        <div>
                            <label class="text-muted small d-block">{% trans "Last Updated" %}</label>
                            <span class="text-dark small">{{ setting.updated_at|date:"M d, Y H:i" }}</span>
                        </div>
                    </div>

                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0 bg-light p-2 rounded-circle me-3">
                            <i class="fas fa-user text-muted"></i>
                        </div>
                        <div>
                            <label class="text-muted small d-block">{% trans "Modified By" %}</label>
                            <span class="text-dark small">{{ setting.updated_by.get_full_name|default:"System" }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block customJS %}
<script>
function toggleSecret(element) {
    const fullValue = element.getAttribute('data-full-value');
    const maskedValue = element.getAttribute('data-masked');
    const icon = event.currentTarget.querySelector('i');

    if (element.textContent.trim() === maskedValue) {
        element.textContent = fullValue;
        element.classList.replace('text-muted', 'text-dark');
        if(icon) icon.classList.replace('fa-eye', 'fa-eye-slash');
    } else {
        element.textContent = maskedValue;
        element.classList.replace('text-dark', 'text-muted');
        if(icon) icon.classList.replace('fa-eye-slash', 'fa-eye');
    }
}

function copyToClipboard(text, btn) {
    navigator.clipboard.writeText(text).then(() => {
        const icon = btn.querySelector('i');
        const originalClass = icon.className;
        icon.className = 'fas fa-check text-success';
        setTimeout(() => { icon.className = originalClass; }, 2000);
    });
}
</script>
{% endblock %}