<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JSON-LD Representation</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <!--    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>-->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

    <script>
        // Function to copy the JSON-LD content to the clipboard
        function copyToClipboard() {
            const jsonLdContent = document.getElementById('jsonld-content').textContent;
            navigator.clipboard.writeText(jsonLdContent).then(() => {
                alert('JSON-LD copied to clipboard!');
            }).catch(err => {
                alert('Failed to copy text: ', err);
            });
        }
    </script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="/">SNT-Config</a>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="/reload">Form</a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">JSON-LD</a>
            </li>
        </ul>
    </div>
</nav>

<div class="container mt-4">
    <h2>JSON-LD Representation</h2>
    {% if error_messages %}
    <div class="alert alert-danger" role="alert">
        <strong>{{ error_messages | length }} Error(s) found</strong>

        {% for category, messages in error_messages.items() %}
        <div class="card mb-3">
            <div class="card-header">
                <button class="btn btn-link" type="button" data-toggle="collapse"
                        data-target="#collapse-{{ loop.index }}" aria-expanded="false"
                        aria-controls="collapse-{{ loop.index }}">
                    {{ category }} ({{ messages|length }} Errors)
                </button>
            </div>

            <div id="collapse-{{ loop.index }}" class="collapse">
                <div class="card-body">
                    <ul>
                        {% for message in messages %}
                        <li>{{ message }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <button class="btn btn-primary mb-3" onclick="copyToClipboard()"><i class="material-icons mr-1">content_copy</i>
        Copy to Clipboard
    </button>
    <button class="btn btn-primary mb-3" onclick="downloadJSON()"><i class="material-icons mr-1">file_download</i>
        Save to File
    </button>
    <button class="btn btn-primary mb-3" onclick="openJsonInNewTab()"
            title="Opens a new tab with the JSON data only. If you are using chrome, consider installing a viewer extension for a better and interactive experience: https://chromewebstore.google.com/detail/json-viewer/efknglbfhoddmmfabeihlemgekhhnabb?hl=en">
        <i class="material-icons mr-1">tab</i>
        View Raw
    </button>
    <pre id="jsonld-content">{{ json_data | tojson(indent=2) }}</pre>
</div>
</body>

<script>
    function openJsonInNewTab() {
        const jsonUrl = "{{ url_for('data') }}";
        window.open(jsonUrl, '_blank');
    }
</script>
<script>
    function downloadJSON() {
        const jsonString = document.getElementById('jsonld-content').textContent;
        const blob = new Blob([jsonString], { type: 'application/json' });
        const url = URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = url;
        link.download = 'snt.jsonld';
        link.click();
        URL.revokeObjectURL(url);
    }
</script>

</html>
