<style>
    .tree-node {
      margin-left: 20px;
      position: relative;
    }
    .toggle {
      cursor: pointer;
      user-select: none;
    }
    .node-actions {
      margin-left: 10px;
    }
    .selected-node {
      background-color: #eef;
      border-left: 3px solid #007bff;
      padding-left: 5px;
    }
    #editorPath {
      font-size: 0.9em;
      color: #555;
      word-break: break-word;
    }
    .key {
      color: #1f618d;
      font-weight: bold;
    }
    .value {
      color: #0d6efd; /* blue */
    }
    .array-index {
      color: #af7ac5 ;
      font-weight: bold;
    }
</style>

<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 text-gray-600">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a id="breadcrumbActivities" href="?">Início</a></li>
                    <li class="breadcrumb-item"><a id="breadcrumbEvent" href=""></a></li>
                    <li class="breadcrumb-item active" aria-current="page" id="breadcrumbEventFile"></li>
                </ol>
            </nav>
        </h6>
    </div>
    <div class="card-body">
        <div class="container mt-4">
            <h2>JSON Tree Viewer</h2>
            <div class="mb-3">
            <button class="btn btn-primary" id="downloadJSON">Save JSON</button>
            </div>
            <div id="jsonTree" class="mb-4"></div>

            <div id="editorPanel" class="card" style="display: none;">
            <div class="card-body">
                <h5 class="card-title">Edit Value</h5>
                <p id="editorKey"></p>
                <p id="editorPath" class="mb-2"></p>
                <input type="text" id="editorInput" class="form-control mb-2">
                <button class="btn btn-success" id="saveEdit">Save</button>
                <button class="btn btn-secondary" id="cancelEdit">Cancel</button>
            </div>
            </div>
        </div>
   </div>
</div>
<h7 class="m-0 text-gray-600">
    <strong>Instruções</strong><br />
</h7>
