const n=`<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>JavaScript Programming</title>
</head>
<body>
    <div id="javascript-programming-tab" class="tab-programming">

        <!-- Header -->
        <div class="section">
            <div class="gui_box grey">
                <div class="gui_box_titlebar">
                    <div class="spacer_box_title" i18n="tabJavaScriptProgramming"></div>
                </div>
                <div class="content_wrapper">
                    <div class="note" style="margin-bottom: 10px;">
                        <div class="note_spacer">
                            <p i18n="javascriptProgrammingDescription"></p>
                            <p i18n="javascriptBetaWarning"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Editor Area -->
        <div class="section">
            <div class="gui_box grey">
                <div class="gui_box_titlebar">
                    <div class="spacer_box_title" i18n="javascriptEditorTitle"></div>
                    <div class="spacer_box_title" style="margin-left: auto;">
                       <div class="examples-section" id="js-example-select">
                           <label for="examples-select" i18n="javascriptLoadExample"></label>
                           <select id="examples-select" class="select-example">
                               <option value="" i18n="javascriptSelectExample"></option>
                           </select>
                       </div>

                    </div>
                </div>
                <div class="content_wrapper">
                    <!-- Monaco Editor Container -->
                    <div id="monaco-editor" style="height: 400px; border: 1px solid #ccc;"></div>

                    <!-- Editor Controls -->
                    <div class="default_btn" style="margin-top: 10px;">
                        <div class="btn" style="width: 100%;">
                            <div style="display: flex; gap: 10px;">
                                <a class="transpile" href="#" i18n="javascriptTranspile">Transpile to INAV</a>
                                <a class="load" href="#" i18n="javascriptLoad">Load from FC</a>
                                <a class="save" href="#" i18n="javascriptSave">Save to FC</a>
                                <a class="clear" href="#" i18n="javascriptClear">Clear</a>
                            </div>
                        </div>
                    </div>

                    <!-- Warnings/Errors - Positioned here for immediate visibility -->
                    <div id="transpiler-warnings" class="transpiler-warnings" style="display: none; margin-top: 10px;"></div>
                </div>
            </div>
        </div>

        <!-- Transpiler Output -->
        <div class="section">
            <div class="gui_box grey">
                <div class="gui_box_titlebar">
                    <div class="spacer_box_title" i18n="javascriptOutputTitle"></div>
                    <div class="spacer_box_title" style="margin-left: auto;">
                        <span id="lc-count" class="lc-count">0/64 LCs</span>
                    </div>
                </div>
                <div class="content_wrapper">
                    <!-- Output Display -->
                    <textarea id="transpiler-output"
                              class="transpiler-output"
                              readonly
                              style="width: 100%; height: 200px; font-family: monospace; font-size: 12px;"></textarea>

                    <!-- Optimization Stats -->
                    <div id="optimization-stats" class="optimization-stats" style="display: none; margin-top: 10px;">
                        <div class="note">
                            <div class="note_spacer">
                                <strong i18n="javascriptOptimizationsApplied"></strong>
                                <pre id="optimization-details" style="margin: 5px 0; font-size: 11px;"></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- API Reference (Collapsible) -->
        <div class="section">
            <div class="gui_box grey">
                <div class="gui_box_titlebar">
                    <div class="spacer_box_title">
                        <a href="#" id="api-reference-toggle" style="color: inherit; text-decoration: none;">
                            <span>▶ </span><span i18n="javascriptApiReference"></span>
                        </a>
                    </div>
                </div>
                <div class="content_wrapper" id="api-reference-content" style="display: none;">
                    <div class="note">
                        <div class="note_spacer">
                            <h4 i18n="javascriptQuickReference"></h4>

                            <h5 i18n="javascriptFlightParameters"></h5>
                            <pre>inav.flight.homeDistance  // meters
inav.flight.altitude      // cm
inav.flight.vbat          // centivolts
inav.flight.cellVoltage   // centivolts
inav.flight.rssi          // 0-99
inav.flight.mode.failsafe // boolean</pre>

                            <h5 i18n="javascriptRcChannels"></h5>
                            <pre>inav.rc[5].high   // boolean
inav.rc[5].mid    // boolean
inav.rc[5].low    // boolean
inav.rc[5].value  // 1000-2000</pre>

                            <h5 i18n="javascriptOverrides"></h5>
                            <pre>inav.override.vtx.power = 3;           // 0-4
inav.override.throttleScale = 50;      // 0-100%
inav.override.yaw.angle = 180;         // degrees
inav.override.rcChannel[8] = 2000;     // trigger switch</pre>

                            <h5 i18n="javascriptGlobalVariables"></h5>
                            <pre>inav.gvar[0] = 100;        // write
const x = inav.gvar[0];    // read</pre>


                            <h5 i18n="javascriptCompleteExample"></h5>
                            <pre>if (inav.flight.homeDistance > 100) {
  inav.override.vtx.power = 3;
}</pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</body>
</html>

<style>
.tab-programming {
    width: 100%;
}

.section {
    margin-bottom: 15px;
}

.lc-count {
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 3px;
    background: #e8e8e8;
}

.lc-count.warning {
    background: #ff9800;
    color: white;
}

.lc-count.error {
    background: #f44336;
    color: white;
}

.transpiler-output {
    background: #1e1e1e;
    color: #d4d4d4;
    border: 1px solid #ccc;
    padding: 10px;
    resize: vertical;
}

.optimization-stats .note {
    background: #e7f5e7;
    border-left: 4px solid #4caf50;
}

.transpiler-warnings .note {
    background: #fff3cd;
    border-left: 4px solid #ff9800;
}

.transpiler-warnings .note.error {
    background: #f8d7da;
    border-left: 4px solid #f44336;
}

.example-select {
    padding: 4px 8px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: white;
}

#monaco-editor {
    border-radius: 3px;
    overflow: hidden;
}

.default_btn .btn div {
    justify-content: center;
}

.default_btn .btn a {
    flex: 1;
    text-align: center;
}

.note_spacer p {
    margin-bottom: 10px;
}

/* Active LC gutter marker - green checkmark for true conditions */
.lc-active-true {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="7" fill="%2381c784" opacity="0.3"/><path fill="%2366bb6a" stroke="%23ffffff" stroke-width="0.5" d="M6.5 12L2 7.5l1.5-1.5L6.5 9l6-6L14 4.5z"/></svg>') no-repeat center;
    background-size: 16px 16px;
    width: 16px;
    margin-left: 3px;
    cursor: pointer;
}

/* Inactive LC gutter marker - gray hollow circle for false conditions */
.lc-active-false {
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><circle cx="8" cy="8" r="6" fill="none" stroke="%239e9e9e" stroke-width="1.5" opacity="0.6"/></svg>') no-repeat center;
    background-size: 16px 16px;
    width: 16px;
    margin-left: 3px;
    cursor: pointer;
}

/* Monaco gutter margin styling */
.monaco-editor .margin {
    background-color: #f5f5f5;
}

.monaco-editor .margin-view-overlays .lc-active-true,
.monaco-editor .margin-view-overlays .lc-active-false {
    cursor: pointer;
}

/* Gvar display inline hints */
.gvar-hint {
    opacity: 0.65;
    font-style: italic;
    color: #888;
    white-space: nowrap;
    display: inline;
    vertical-align: baseline;
}
</style>
</html>
`;export{n as default};
