{
  "name": "App Creator",
  "icon": `<span class="material-symbols-outlined">build</span>`,
  "desc": "Create your own native GopalOS apps! This program handles everything from file creation and editing to application packaging.",
  "id": "app-creator",
  "defaultRelease": "alpha",
  "releases": {
    "alpha": {
      "version": "v0.2.1-alpha.1",
      "app-files": {
        "app-creator": {
          type: "pgm",
          content: function() {
            if (document.getElementById("app_app-creator_window")) {
              document.getElementById("app_app-creator_window").style.display = "block";
            }
            else {
              document.getElementById("windows").insertAdjacentHTML("beforeend", getRef("/apps/app-creator/window"));
              getRef("/apps/app-creator/load")();
            }
            focusWin(document.getElementById("app_app-creator_window"));
            regTbarIcon("/apps/app-creator/app-creator", "app_app-creator_window", "<span style=\"font-family: 'Consolas', monospace;\">&lt;/&gt;</span>");
            refreshWindows();
          }
        },
        "load": {
          type: "js",
          content: function() {}
        },
        "window": {
          type: "html",
          content: `<div class="window" id="app_app-creator_window" style="top: 50px; left: 50px;">
  <div class="window-title">App Creator</div>
  <div class="window-controls">
    <div class="window-control window-control-minimize"><span>&#x1F5D5;</span></div>
    <div class="window-control window-control-maximize"><span>&#x1F5D6;</span></div>
    <div class="window-control window-control-close"><span>&#x274C;&#xFE0E;</span></div>
  </div>
  <div class="window-content" style="font-family: 'Segoe UI', 'Arial', sans-serif; overflow: hidden; float: left;">
    <div class="menubar">
      <button id="app_app-creator_filebtn" class="noborder popup-btn" data-popup-id="app_app-creator_file">File</button>
      <button id="app_app-creator_editbtn" class="noborder popup-btn" data-popup-id="app_app-creator_edit">Edit</button>
      <button id="app_app-creator_toolsbtn" class="noborder popup-btn" data-popup-id="app_app-creator_tools">Tools</button>
      <button id="app_app-creator_projectbtn" class="noborder popup-btn" data-popup-id="app_app-creator_project">Project</button>
      <button id="app_app-creator_helpbtn" class="noborder popup-btn" data-popup-id="app_app-creator_help">Help</button>
    </div>
    <div id="app_app-creator_file" class="popup-menu" data-popup-origin-id="app_app-creator_filebtn" style="position: absolute; top: 26px; left: 0;">
      <div class="popup-menu-item" onclick="getRef('/apps/app-creator/new-project')();">New Project&hellip;</div>
      <div class="popup-menu-item popup-menu-item-submenu popup-btn" data-popup-id="app_app-creator_file-newproj" onclick="">New Project from Template</div>
      <div class="popup-menu-item" onclick="getRef('/apps/app-creator/open-project')();">Open Project&hellip;</div>
      <div class="popup-menu-item" onclick="msgbox('Unfinished', 'App Creator');">New Project from App URL&hellip;</div>
      <div class="popup-menu-item" onclick="let fromAppID = prompt('New App Creator Project\\nApp ID of installed app you want to create the project from:'); getRef('/apps/app-creator/new-project')({fromInstalledApp: fromAppID});">New Project from Installed App&hellip;</div>
      <div class="popup-menu-item" onclick="document.getElementById('app_app-creator_window').querySelector('.window-control-close').click();">Exit</div>
    </div>
    <div id="app_app-creator_file-newproj" class="popup-menu" style="position: absolute; top: 56px; left: 232px;">
      <div class="popup-menu-item" onclick="getRef('/apps/app-creator/new-project')({template: 'basic'});">Basic</div>
      <div class="popup-menu-item" onclick="getRef('/apps/app-creator/new-project')({template: 'menubar-and-statusbar'});">Menubar & status bar</div>
    </div>
    <div id="app_app-creator_edit" class="popup-menu" data-popup-origin-id="app_app-creator_editbtn" style="position: absolute; top: 26px; left: 60px;">
      <div class="popup-menu-item" onclick="document.execCommand('copy');" data-disabled>Copy</div>
      <div class="popup-menu-item" onclick="document.execCommand('cut');" data-disabled>Cut</div>
      <div class="popup-menu-item" onclick="document.execCommand('paste');" data-disabled>Paste</div>
      <div class="popup-menu-item" onclick="document.execCommand('delete');" data-disabled>Delete</div>
      <div class="popup-menu-item" onclick="msgbox('Please use the context (right-click) menu or the keyboard shortcuts to copy, cut, paste, and delete.', 'App Creator');">Editing help</div>
    </div>
    <div id="app_app-creator_tools" class="popup-menu" data-popup-origin-id="app_app-creator_toolsbtn" style="position: absolute; top: 26px; left: 120px;">
      <div class="popup-menu-item" onclick="msgbox('Unfinished', 'App Creator');">Find/Replace&hellip;</div>
    </div>
    <div id="app_app-creator_project" class="popup-menu" data-popup-origin-id="app_app-creator_projectbtn" style="position: absolute; top: 26px; left: 180px;">
    <div class="popup-menu-item" onclick="msgbox('Unfinished', 'App Creator');">Install & Run</div>
    <div class="popup-menu-item" onclick="msgbox('Unfinished', 'App Creator');">Find/Replace&hellip;</div>
      <div class="popup-menu-item" onclick="let appIDOfProject = prompt('App ID of App Creator project you want to install:'); createRef('/apps/' + appIDOfProject, 'dir', {}); writeRef('/apps/' + appIDOfProject, getRef('/home/appdata/app-creator/projects/' + appIDOfProject)); os.apps[appIDOfProject] = {name: appIDOfProject, desc: '', version: 'v0.0.0'};">Install a project (temporary)&hellip;</div>
    </div>
    <div id="app_app-creator_help" class="popup-menu" data-popup-origin-id="app_app-creator_helpbtn" style="position: absolute; top: 26px; left: 240px;">
      <div class="popup-menu-item" onclick="if (getRef('/apps/dev-manual/dev-manual')) {getRef('/apps/dev-manual/dev-manual')();} else {getRef('/system/pkg-install/pkg-install')('https://cerebraldatabank.neocities.org/gopalos-packages/gopalos-pkg_dev-manual.txt');}">Open Developer Manual</div>
      <div class="popup-menu-item" onclick="msgbox('<b>GopalOS App Creator</b><br><br>Version: v0.1.0-alpha', 'App Creator Version Information');">About App Creator</div>
      <div class="popup-menu-item" onclick="getRef('/apps/settings/settings')();">GopalOS Settings</div>
      <div class="popup-menu-item" onclick="getRef('/apps/app-manager/app-manager')();">GopalOS App Manager</div>
    </div>
    <div id="app_app-creator_sidebar" style="position: absolute; top: 26px; left: 0; width: 110px; height: calc(100% - 47px); border: none; resize: none;">
      <details id="app_app-creator_project-root">
        <summary class="app_app-creator_item">App Root</summary>
      </details>
      <details id="app_app-creator_project-appdata">
        <summary class="app_app-creator_item">App Data</summary>
      </details>
    </div>
    <textarea id="app_app-creator_editor" class="noborder" style="position: absolute; top: 25px; left: 110px; width: calc(100% - 120px); height: calc(100% - 59px); resize: none;"></textarea>
    <div id="app_app-creator_statbar" style="position: absolute; bottom: 0; left: 0; padding: 2px; width: calc(100% - 4px); font-size: 14px;">Ready</div>
    <style>
    #app_app-creator_sidebar {
      background: #CCC;
    }
    .app_app-creator_item {
      display: block;
      padding: 5px;
      background: #CCC;
      font-size: 14px;
    }
    .app_app-creator_item:hover {
      background: #BBB;
    }
    .app_app-creator_item:active {
      background: #AAA;
    }
    summary.app_app-creator_item {
      list-style: none;
    }
    summary.app_app-creator_item::before {
      content: "\u25B6\u00A0";
      font-family: "Segoe UI" , "Arial", sans-serif;
    }
    summary.app_app-creator_item::-webkit-details-marker {
      display: none;
    }
    details[open] summary.app_app-creator_item::before {
      content: "\u25BC\u00A0";
      font-family: "Segoe UI" , "Arial", sans-serif;
    }
    details div.app_app-creator_item {
      padding-left: 10px;
    }
    .dark-theme #app_app-creator_sidebar {
      background: #2A2A2A;
    }
    .dark-theme .app_app-creator_item {
      display: block;
      padding: 5px;
      background: #2A2A2A;
      font-size: 14px;
    }
    .dark-theme .app_app-creator_item:hover {
      background: #3A3A3A;
    }
    .dark-theme .app_app-creator_item:active {
      background: #4A4A4A;
    }
    #app_app-creator_statbar {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 2px;
      width: calc(100% - 4px);
      background: #EEE;
      font-size: 14px;
    }
    .dark-theme #app_app-creator_statbar {
      background: #444;
      color: #FFF;
    }
    </style>
  </div>
  </div>`
        },
        "new-project": {
          type: "js",
          content: function(options = {}) {
            let projName = prompt("New App Creator Project\nChoose an app ID (e.g. \"my-cool-app\") for the new app...");
            if (!projName) {
              projName = `app-${randInt(0, 16777215).toString(16)}`;
            }
            else {}
            projName = projName.trim();
            if (getRef(`/home/appdata/app-creator/projects/${projName}`)) {
              if (confirm(`New App Creator Project\nProject ${projName} already exists. Do you want to overwrite it?\nWARNING: This action is irreversible.`)) {
                delRef(`/home/appdata/app-creator/projects/${projName}`);
              }
              else {
                return;
              }
            }
            else {}
            if (options.fromInstalledApp) {
              createRef(`/home/appdata/app-creator/projects/${projName}`, "dir", getRef(`/apps/${options.fromInstalledApp}`));
            }
            else if (options.template) {
              createRef(`/home/appdata/app-creator/projects/${projName}`, "dir", getRef(`/apps/app-creator/templates/${options.template}`)(projName));
            }
            else {
              createRef(`/home/appdata/app-creator/projects/${projName}`, "dir", getRef("/apps/app-creator/templates/basic")(projName));
            }
          }
        },
        "open-project": {
          type: "js",
          content: function() {
            document.getElementById("app_app-creator_editor").value = "";
          }
        },
        "templates": {
          type: "dir",
          content: {
            "basic": {
              type: "js",
              content: function(projName) {
                return {
                  [projName]: {
                    type: "pgm",
                    content: eval(`(function() {
                      if (document.getElementById("app_${projName}_window")) {
                        document.getElementById("app_${projName}_window").style.display = "block";
                      }
                      else {
                        document.getElementById("windows").insertAdjacentHTML("beforeend", getRef("/apps/${projName}/window"));
                        getRef("/apps/${projName}/load")();
                      }
                      focusWin(document.getElementById("app_${projName}_window"));
                      regTbarIcon("/apps/${projName}/${projName}", "app_${projName}_window", getRef("/apps/${projName}/icon"));
                      refreshWindows();
                    })`)
                  },
                  "load": {
                    type: "js",
                    content: function() {}
                  },
                  "icon": {
                    type: "var",
                    content: "\u{1F5D4}"
                  },
                  "window": {
                    type: "html",
                    content: `<div class="window" id="app_${projName}_window" style="top: 200px; left: 200px; width: 700px; height: 500px;">
          <div class="window-title">App</div>
          <div class="window-controls">
            <div class="window-control window-control-minimize"><span>&#x1F5D5;</span></div>
            <div class="window-control window-control-maximize"><span>&#x1F5D6;</span></div>
            <div class="window-control window-control-close"><span>&#x274C;&#xFE0E;</span></div>
          </div>
          <div class="window-content" style="font-family: 'Segoe UI', 'Arial', sans-serif; padding: 10px; width: calc(100% - 40px); height: calc(100% - 60px);">
            <div>Content</div>
          </div>
        </div>`
                  }
                };
              }
            },
            "menubar-and-statusbar": {
              type: "js",
              content: function(projName) {
                return {
                  [projName]: {
                    type: "pgm",
                    content: eval(`(function() {
                      if (document.getElementById("app_${projName}_window")) {
                        document.getElementById("app_${projName}_window").style.display = "block";
                      }
                      else {
                        document.getElementById("windows").insertAdjacentHTML("beforeend", getRef("/apps/${projName}/window"));
                        getRef("/apps/${projName}/load")();
                      }
                      focusWin(document.getElementById("app_${projName}_window"));
                      regTbarIcon("/apps/${projName}/${projName}", "app_${projName}_window", getRef("/apps/${projName}/icon"));
                      refreshWindows();
                    })`)
                  },
                  "load": {
                    type: "js",
                    content: function() {}
                  },
                  "icon": {
                    type: "var",
                    content: "\u{1F5D4}"
                  },
                  "window": {
                    type: "html",
                    content: `<div class="window" id="app_${projName}_window" style="top: 200px; left: 200px; width: 700px; height: 500px;">
          <div class="window-title">App</div>
          <div class="window-controls">
            <div class="window-control window-control-minimize"><span>&#x1F5D5;</span></div>
            <div class="window-control window-control-maximize"><span>&#x1F5D6;</span></div>
            <div class="window-control window-control-close"><span>&#x274C;&#xFE0E;</span></div>
          </div>
          <div class="window-content" style="font-family: 'Segoe UI', 'Arial', sans-serif; overflow: hidden; float: left;">
            <div class="menubar">
              <button id="app_${projName}_filebtn" class="noborder popup-btn" data-popup-id="app_${projName}_file">File</button>
              <button id="app_${projName}_editbtn" class="noborder popup-btn" data-popup-id="app_${projName}_edit">Edit</button>
              <button id="app_${projName}_viewbtn" class="noborder popup-btn" data-popup-id="app_${projName}_view">View</button>
              <button id="app_${projName}_helpbtn" class="noborder popup-btn" data-popup-id="app_${projName}_help">Help</button>
            </div>
            <div id="app_${projName}_file" class="popup-menu" data-popup-origin-id="app_${projName}_filebtn" style="position: absolute; top: 26px; left: 0;">
              <div class="popup-menu-item" onclick="msgbox('New action', 'App');">New</div>
              <div class="popup-menu-item" onclick="msgbox('Open action', 'App');">Open</div>
              <div class="popup-menu-item popup-menu-item-submenu popup-btn" data-popup-id="app_${projName}_file-submenu">Submenu</div>
              <div class="popup-menu-item" onclick="document.getElementById('app_${projName}_window').querySelector('.window-control-close').click();">Exit</div>
            </div>
            <div id="app_${projName}_file-submenu" class="popup-menu" style="position: absolute; top: 84px; left: 202px;">
              <div class="popup-menu-item" onclick="msgbox('Submenu Action 1', 'App');">Submenu Item 1</div>
              <div class="popup-menu-item" onclick="msgbox('Submenu Action 2', 'App');">Submenu Item 2</div>
              <div class="popup-menu-item" onclick="msgbox('Submenu Action 3', 'App');">Submenu Item 3</div>
            </div>
            <div id="app_${projName}_edit" class="popup-menu" data-popup-origin-id="app_${projName}_editbtn" style="position: absolute; top: 26px; left: 60px;">
              <div class="popup-menu-item" onclick="msgbox('Please use the context (right-click) menu or the keyboard shortcuts to copy, cut, paste, and delete.', 'App Creator');">Edit action 1</div>
              <div class="popup-menu-item" data-disabled>Edit action 2</div>
            </div>
            <div id="app_${projName}_view" class="popup-menu" data-popup-origin-id="app_${projName}_viewbtn" style="position: absolute; top: 26px; left: 120px;">
              <div class="popup-menu-item popup-menu-item-checked" onclick="msgbox('Item toggle action')">Checked toggle item</div>
              <div class="popup-menu-item" onclick="msgbox('List item select action')">List item 1</div>
              <div class="popup-menu-item popup-menu-item-selected" onclick="msgbox('List item select action')">List item 2</div>
              <div class="popup-menu-item" onclick="msgbox('List item select action')">List item 3</div>
            </div>
            <div id="app_${projName}_help" class="popup-menu" data-popup-origin-id="app_${projName}_helpbtn" style="position: absolute; top: 26px; left: 180px;">
              <div class="popup-menu-item" onclick="getRef('/apps/settings/settings')();">Open Settings</div>
              <div class="popup-menu-item" onclick="getRef('/apps/file-manager/file-manager')();">Open File Manager</div>
              <div class="popup-menu-item" onclick="msgbox('<b>App</b><br><br>Version: v0.0.0', 'App Version Information');">About App</div>
            </div>
            <div id="app_${projName}_content" style="position: absolute; top: 25px; left: 110px; width: calc(100% - 120px); height: calc(100% - 59px);"></div>
            <div id="app_${projName}_statbar" style="position: absolute; bottom: 0; left: 0; padding: 2px; width: calc(100% - 4px); font-size: 14px;">Ready</div>
            <style>
            #app_${projName}_statbar {
              position: absolute;
              bottom: 0;
              left: 0;
              padding: 2px;
              width: calc(100% - 4px);
              background: #EEE;
              font-size: 14px;
            }
            .dark-theme #app_${projName}_statbar {
              background: #444;
              color: #FFF;
            }
            </style>
          </div>
        </div>`
                  }
                };
              }
            },
            "current-project": {
              type: "var",
              content: ""
            },
            "current-path": {},
            "open": {
              type: "js",
              content: function(path) {
                if (document.getElementById("app_text-editor_window") == null) {
                  getRef("/apps/text-editor/text-editor")();
                }
                else {}
                if (getRef("/apps/text-editor/unsaved-changes") == true) {
                  if (confirm("Are you sure you want to open a new file? You have unsaved changes.")) {
                    writeRef("/apps/text-editor/unsaved-changes", false);
                  }
                  else {
                    return;
                  }
                }
                else {}
                document.getElementById("app_text-editor_filepath").value = path;
                if (getRef(path) == null) {
                  msgbox("This file does not exist or cannot be edited.");
                }
                else if (["txt", "cfg", "css", "html", "c", "cpp", "h", "java", "cfg", "asm"].includes(getRef(path, true).type)) {
                  document.getElementById("app_text-editor_editor").value = getRef(path);
                }
                else if (getRef(path, true).type == "js") {
                  document.getElementById("app_text-editor_editor").value = String(getRef(path));
                }
                else if (getRef(path, true).type == "pgm" && getRef("/home/appdata/text-editor/options").allowPGMEditing == true) {
                  document.getElementById("app_text-editor_editor").value = String(getRef(path));
                }
                else if (getRef(path, true).type == "json") {
                  document.getElementById("app_text-editor_editor").value = JSON.stringify(getRef(path), null, 2);
                }
                else {
                  msgbox("Text Editor does not support this file type.", "Text Editor");
                }
              }
            },
            "save": {
              type: "js",
              content: function(path) {
                let fileTypeNotSupported = false;
                if (["txt", "cfg", "css", "html", "c", "cpp", "o", "h", "java", "cfg", "asm"].includes(getRef(path, true).type)) {
                  writeRef(path, document.getElementById("app_text-editor_editor").value);
                }
                else if (getRef(path, true).type == "js") {
                  writeRef(path, eval(`(${document.getElementById("app_text-editor_editor").value})`));
                }
                else if (getRef(path, true).type == "pgm" && getRef("/home/appdata/text-editor/options").allowPGMEditing == true) {
                  writeRef(path, eval(`(${document.getElementById("app_text-editor_editor").value})`));
                }
                else if (getRef(path, true).type == "json") {
                  let isValidJSON = true;
                  try {
                    JSON.parse(document.getElementById("app_text-editor_editor").value);
                  }
                  catch(err) {
                    document.getElementById("app_text-editor_statbar").innerHTML = `${err.name}: ${err.message}`;
                    isValidJSON = false;
                  }
                  finally {
                    if (!isValidJSON) {}
                    else {
                      document.getElementById("app_text-editor_statbar").innerHTML = "Saving...";
                      writeRef(path, JSON.parse(document.getElementById("app_text-editor_editor").value));
                      document.getElementById("app_text-editor_statbar").innerHTML = "Ready";
                    }
                  }
                }
                else {
                  msgbox("Text Editor does not support this file type.", "Text Editor");
                  fileTypeNotSupported = true;
                }
                if (fileTypeNotSupported) {}
                else {
                  writeRef("/apps/text-editor/unsaved-changes", false);
                }
              }
            }
          }
        }
      }
    }
  }
}