{% extends 'generic/object.html' %}
{% load helpers %}
{% load static %}

{% block content %}
<div class="row">
    <div class="col col-12 col-xl-6">
        <div class="card">
            <h2 class="card-header">Device Config Sync Status</h2>
            <table class="table table-hover attr-table">
                <tr>
                    <th scope="row">Device</th>
                    <td>{{ object.device|linkify }}</td>
                </tr>
                <tr>
                    <th scope="row">Connection</th>
                    <td>{{ object.connection|linkify }}</td>
                </tr>
                <tr>
                    <th scope="row">Lines Added</th>
                    <td>
                        {% if object.lines_added > 0 %}
                        <span class="badge text-bg-success">{{ object.lines_added }}</span>
                        {% else %}
                        <span class="text-muted">{{ object.lines_added }}</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Lines Removed</th>
                    <td>
                        {% if object.lines_removed > 0 %}
                        <span class="badge text-bg-danger">{{ object.lines_removed }}</span>
                        {% else %}
                        <span class="text-muted">{{ object.lines_removed }}</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Lines Changed</th>
                    <td>
                        {% if object.lines_changed > 0 %}
                        <span class="badge text-bg-info">{{ object.lines_changed }}</span>
                        {% else %}
                        <span class="text-muted">{{ object.lines_changed }}</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Config Render OK</th>
                    <td>
                        {% if object.config_render_ok %}
                        <span class="badge text-bg-success">Yes</span>
                        {% else %}
                        <span class="badge text-bg-danger">No</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Last Pull</th>
                    <td>
                        {% if object.last_pull %}
                        {{ object.last_pull|date:"Y-m-d H:i:s" }}
                        {% else %}
                        <span class="text-muted">Never</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Last Push</th>
                    <td>
                        {% if object.last_push %}
                        {{ object.last_push|date:"Y-m-d H:i:s" }}
                        {% else %}
                        <span class="text-muted">Never</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Latest Sync Job</th>
                    <td>
                        {% if object.sync_job %}
                        {{ object.sync_job|linkify }}
                        {% else %}
                        <span class="text-muted">None</span>
                        {% endif %}
                    </td>
                </tr>
                <tr>
                    <th scope="row">Deduce XPaths</th>
                    <td>
                        {% if object.deduce_xpaths %}
                        <span class="badge text-bg-success">Yes</span>
                        {% else %}
                        <span class="badge text-bg-danger">No</span>
                        {% endif %}
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <div class="col col-12 col-xl-6">
        {% include 'inc/panels/custom_fields.html' %}
        {% include 'inc/panels/tags.html' %}
        {% include 'inc/panels/comments.html' %}
    </div>
</div>
<div class="row">
    <div class="col col-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center w-100">
                    {% if object.deduce_xpaths %}
                    <h2 class="card-header mb-0 flex-grow-1">XPath Entries (deduced automatically)</h2>
                    {% else %}
                    <h2 class="card-header mb-0 flex-grow-1">Manual XPath Entries</h2>
                    {% endif %}
                </div>
            </div>
            <div class="card-body">
                {% if object.get_xpath_entries %}
                <pre class="mb-0" style="white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;">
{% for xp in object.get_xpath_entries %}{{ xp }}
{% endfor %}</pre>
                {% else %}
                <span class="text-muted">None</span>
                {% endif %}
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col col-12">
        <div class="card">
            <div class="card-header">
                <div class="d-flex align-items-center w-100">
                    <h2 class="card-header mb-0 flex-grow-1">Panorama Configuration</h2>
                </div>
            </div>
            <div class="card-body" style="height: 500px;">
                <div id="monaco-editor" style="width: 100%; height: 100%; border: 1px solid #ddd;"></div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block javascript %}
{{ block.super }}
<!-- Monaco Editor loader -->
<script src="https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs/loader.js"></script>
<script>
    require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor@0.44.0/min/vs' } });
    require(["vs/editor/editor.main"], function () {
        // Get theme from localStorage, fallback to 'vs' (white theme)
        const theme = localStorage.getItem('monaco-editor-theme') || 'vs';

        monaco.editor.create(document.getElementById('monaco-editor'), {
            value: `{{ object.panorama_configuration|escapejs }}`,
            language: "xml",
            theme: theme,
            readOnly: true,
            renderSideBySide: true,
            originalEditable: false,
            renderWhitespace: 'boundary',
            diffWordWrap: 'on',
            scrollBeyondLastLine: false,
            automaticLayout: true,
            lineNumbers: 'on',
            wordWrap: 'on',
            matchBrackets: 'always'
        });
    });
</script>
{% endblock %}