<div id="splash-screen" class="ol-dialog" oncontextmenu="return false;">
    <div id="splash-content" class="ol-dialog-content">
        <div id="app-summary">
            <h2>DCS Olympus</h2>
            <h4>Dynamic Unit Command</h4>
            <div class="app-version">Version <span class="app-version-number">v0.3.0</span></div>
        </div>

        <div id="authentication-form">
            <div><h5>Username</h5> <input type="text" id="username" name="username" required autocomplete="username" placeholder="Enter username..."></div>
            <div><h5>Password</h5> <input type="password" id="password" name="password" minlength="8" required autocomplete="current-password" placeholder="Enter password..."></div>
            <button id="connection-button" class="ol-button-apply" data-on-click="tryConnection">Connect</button>
        </div>

        <h5 id="connection-status"><br></h5>

        <div id="legal-stuff">
            <h5>DISCLAIMER</h5>
            <p> DCS Olympus (the "MATERIAL" or "Software") is provided completely free to users subject to the terms of the <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0 Licence</a> except where such terms conflict with this disclaimer, in which case, the terms of this disclaimer shall prevail. 
                The authors and/or copyright holders of the Software have not received any financial benefit in connection with the Software. In any event, the Software is provided “as is”, without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose and non-infringement. In no event shall the authors and/or copyright holders be liable for any claim, damages or other liability, whether in an action of contract, tort or otherwise, arising from, out of or in connection with the Software or the use or other dealings in the Software.  Any party making use of the Software in any manner agrees to be bound by the terms set out in this disclaimer. THIS MATERIAL IS NOT MADE OR SUPPORTED BY EAGLE DYNAMICS SA.
        </div>
    </div>
</div>

<div id="advanced-settings-dialog" class="ol-panel ol-dialog olympus-dialog-close hide" oncontextmenu="return false;">
    <div class="ol-dialog-close" data-on-click="closeDialog"></div>

    <div class="ol-dialog-header">
        <h3 id="unit-name">Olympus 1-1</h3>
    </div>

    <div class="ol-dialog-content">

        <!-- General settings -->
        <div id="general-settings">
            <div class="ol-group">
                <h4>General settings</h4>
                <hr>
            </div>
            <div id="general-settings-grid">
                <div id="prohibit-jettison-checkbox" class="ol-checkbox">
                    <label title="The unit will not jettison external stores">
                        <input type="checkbox"/>
                        Prohibit jettison
                    </label>
                </div>
            
                <div id="prohibit-afterburner-checkbox" class="ol-checkbox">
                    <label title="The unit will not engage the afterburner">
                        <input type="checkbox" />
                        Prohibit afterburner
                    </label>
                </div>
            
                <div id="prohibit-AA-checkbox" class="ol-checkbox">
                    <label title="The unit will not engage airborne targets">
                        <input type="checkbox" />
                        Prohibit A/A
                    </label>
                </div>
            
                <div id="prohibit-AG-checkbox" class="ol-checkbox">
                    <label title="The unit will not engage ground targets">
                        <input type="checkbox" />
                        Prohibit A/G
                    </label>
                </div>

                <div id="prohibit-air-wpn-checkbox" class="ol-checkbox">
                    <label title="The unit will not engage air weapons (e.g. SAM sites will not engage HARMs)">
                        <input type="checkbox" />
                        Prohibit air wpn engage
                    </label>
                </div>
            </div>
        </div>

        <!-- Tasking -->
        <div id="tasking">
            <div class="ol-group">
                <h4>Tasking</h4>
                <hr>
            </div>
            
            <div id="tanker-checkbox" class="ol-checkbox">
                <label title="The unit will operate as Air to Air Refueling tanker for airplanes that have a compatible refueling system">
                    <input type="checkbox" />
                    Operate as AAR tanker
                </label>
            </div>

            <div id="AWACS-checkbox" class="ol-checkbox">
                <label title="The unit will operate as AWACS on datalink">
                    <input type="checkbox" />
                    Operate as AWACS
                </label>
            </div>
        </div>

        <!-- TACAN options -->
        <div id="TACAN-options">
            <div class="ol-group">
                <h4>TACAN options</h4>
                <hr>
            </div>
            <div id="TACAN-checkbox" class="ol-checkbox">
                <label title="Turn ON the A/A TACAN">
                    <input type="checkbox" />
                    Use A/A TACAN
                </label>
            </div>

            <div class="ol-group">
                <label>A/A TACAN: </label>
        
                <div class="ol-group">
                    <div id="TACAN-channel" class="ol-text-input">
                        <input type="number" min="1" max="126" step="1" value="40">
                    </div>
                
                    <div id="TACAN-XY" class="ol-select">
                        <div class="ol-select-value">X</div>
                        <div class="ol-select-options">
                        </div>
                    </div>

                    <div id="TACAN-callsign" class="ol-text-input">
                        <input type="text" maxlength="3" value="TKR" style="width: 50px">
                    </div>
                </div>
            </div>
        </div>

        <!-- Radio options -->
        <div id="radio-options">
            <div class="ol-group">
                <h4>Radio options</h4>
                <hr>
            </div>
        
            <div class="ol-group">
                <label> Radio frequency: </label>
            
                <div class="ol-group">
                    <div id="radio-mhz" class="ol-text-input">
                        <input type="number" min="1" max="999" step="1" value="260">
                    </div>
                                    
                    <div id="radio-decimals" class="ol-select">
                        <div class="ol-select-value">.000</div>
                        <div class="ol-select-options">
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="ol-group">
                <label> Radio callsign: </label>

                <div class="ol-group">
                    <div id="radio-callsign" class="ol-select">
                        <div class="ol-select-value"></div>
                        <div class="ol-select-options">
                        </div>
                    </div>

                    <label>
                        -
                    </label>
                
                    <div id="radio-callsign-number" class="ol-text-input">
                        <input type="number" min="1" max="999" step="1" value="1">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="ol-dialog-footer ol-group">
        <button class="ol-button-apply" data-on-click="applyAdvancedSettings">Apply</button>
        <button class="ol-button-close" data-on-click="closeDialog">Close</button>
    </div>

</div>


<div id="custom-formation-dialog" class="ol-panel ol-dialog olympus-dialog-close hide" oncontextmenu="return false;">
    <div class="ol-dialog-close" data-on-click="closeDialog"></div>

    <div class="ol-dialog-header">
        <h3 id="unit-name">Custom formation</h3>
    </div>

    <div class="ol-dialog-content">
        <div class="formation-position-clock">
            <div class="clock-hand" style="top: 0px;   left: 50px;"><input  type="radio" id="formation-1" name="formation-position" value="1"></div>
            <div class="clock-hand" style="top: 14px;  left: 14px;"><input  type="radio" id="formation-2" name="formation-position" value="2"></div>
            <div class="clock-hand" style="top: 50px;  left: 0px; "><input  type="radio" id="formation-3" name="formation-position" value="3"></div>
            <div class="clock-hand" style="top: 86px;  left: 14px;"><input  type="radio" id="formation-4" name="formation-position" value="4"></div>
            <div class="clock-hand" style="top: 100px; left: 50px;"><input  type="radio" id="formation-5" name="formation-position" value="5"></div>
            <div class="clock-hand" style="top: 86px;  left: 86px;"><input  type="radio" id="formation-6" name="formation-position" value="6" checked></div>
            <div class="clock-hand" style="top: 50px;  left: 100px"><input  type="radio" id="formation-7" name="formation-position" value="7"></div>
            <div class="clock-hand" style="top: 14px;  left: 86px;"><input  type="radio" id="formation-8" name="formation-position" value="8"></div>
            <div style="top: 50px; left: 50px;" id="reference-system"></div>
        </div>

        <div class="ol-group">
            <label>Distance: </label>
            
            <div class="ol-group">
                <div id="distance" class="ol-text-input">
                    <input type="number" min="0" max="999999" step="1" value="150">
                </div>
                <label>ft</label>
            </div>
        </div>

        <div class="ol-group">
            <label>Up-down: </label>
            
            <div class="ol-group">
                <div id="up-down" class="ol-text-input">
                    <input type="number" min="-99999" max="99999" step="1" value="30">
                </div>
                <label>ft</label>
            </div>
        </div>
    </div>

    <div class="ol-dialog-footer ol-group">
        <button class="ol-button-apply" data-on-click="applyCustomFormation">Apply</button>
        <button class="ol-button-close" data-on-click="closeDialog">Close</button>
    </div>
</div>