<commit_before><style>
    .navigation-cross {
        min-width: 200px;
        min-height: 200px;
    }

    .navigation-cross .btn {
        width: 50px;
        height: 50px;
        margin: 5px;
    }

    .tooltip.left {
        padding: 0 5px;
        margin-left: -3px;
    }

    .overlay-message-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9998;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .overlay-message-content {
        z-index: 9999;
        font-size: 36px;
        font-weight: bold;
        color: white;
    }

    .btn.btn-alt:not(.btn-success){
        background-color: #bbbbbb;
    }
</style>

<div ng-show="overlayMessage.message.length > 0">
    <div class="overlay-message-backdrop"></div>
    <div class="overlay-message-content centered">{{ overlayMessage.message }}</div>
</div>

<div style="position: absolute; left: 4px; top: 4px;" id="settings" ng-click="openSettings()">
    <i class="fa fa-cog fa-2x" aria-hidden="true"></i>
</div>
<div class="centered">
    <div id="controls-container">
        <div id="btn-controls" ng-show="settings.navigationType=='button'">
            <div class="center-block text-center navigation-cross">
                <div>
                    <button class="btn-control btn" id="btn-control-up" data-keycode="38" ng-disabled="!session.initialized" ng-click="sendControl(38)">
                        <i class="fa fa-arrow-up" aria-hidden="true"></i>
                    </button>
                </div>
                <div>
                    <button class="btn-control btn" id="btn-control-left" data-keycode="37" ng-disabled="!session.initialized" ng-click="sendControl(37)">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </button>
                    <button class="btn-control btn" id="btn-control-space" data-keycode="32" ng-disabled="!session.initialized" ng-click="sendControl(32)">
                        <i class="fa fa-circle" aria-hidden="true"></i>
                    </button>
                    <button class="btn-control btn" id="btn-control-right" data-keycode="39" ng-disabled="!session.initialized" ng-click="sendControl(39)">
                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                    </button>
                </div>
                <div>
                    <button class="btn-control btn" id="btn-control-down" data-keycode="40" ng-disabled="!session.initialized" ng-click="sendControl(40)">
                        <i class="fa fa-arrow-down" aria-hidden="true"></i>
                    </button>
                </div>
            </div>

            <!--<br/>-->
            <!--<button class="btn-control btn" id="btn-control-pgup" data-keycode="33" ng-disabled="!session.initialized" ng-click="sendControl(33)">-->
            <!--Page Up-->
            <!--</button>-->
            <!--<button class="btn-control btn" id="btn-control-pgdown" data-keycode="34" ng-disabled="!session.initialized" ng-click="sendControl(34)">-->
            <!--Page Down-->
            <!--</button>-->

            <!--<br/>-->
            <!--<button class="btn-control btn" id="btn-control-zoomin" data-keycode="33" ng-disabled="!session.initialized" ng-click="sendControl(107,{ctrl:true})">-->
            <!--Zoom in-->
            <!--</button>-->
            <!--<button class="btn-control btn" id="btn-control-zoomout" data-keycode="34" ng-disabled="!session.initialized" ng-click="sendControl(109,{ctrl:true})">-->
            <!--Zoom out-->
            <!--</button>-->

            <div>
                {{ deviceOrientation.lastGamma }}
            </div>
        </div>

        <div id="swipe-controls" ng-show="settings.navigationType=='swipe'">
            Swipe or tap to navigate
        </div>

        <div id="laser-controls" ng-show="settings.navigationType=='laser'">
            <div class="text-center" style="min-width:200px">
                <div>
                    <button class="btn-control btn" id="btn-control-laser" style="width:64px; height:64px;" ng-disabled="!session.initialized" ng-click="deviceOrientation.sendData()" ng-style="deviceOrientation.laserActive && {'color':settings.laserStyle.color}">
                        <i class="fa fa-circle" aria-hidden="true"></i>
                    </button>
                </div>
                <br/>
                <div>
                    <div class="btn-group">
                        <button class="btn" ng-click="settings.put('laserTool','pointer')" ng-class="{'btn-success':settings.laserTool=='pointer'}"><i class="fa fa-circle" aria-hidden="true"></i></button>
                        <button class="btn" disabled ng-click="settings.put('laserTool','pencil')" ng-class="{'btn-success':settings.laserTool=='pencil'}"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                        <button class="btn" disabled ng-click="settings.put('laserTool','eraser')" ng-class="{'btn-success':settings.laserTool=='eraser'}"><i class="fa fa-eraser" aria-hidden="true"></i></button>
                        <button class="btn" disabled ng-click="settings.put('laserTool','mouse_pointer')" ng-class="{'btn-success':settings.laserTool=='mouse_pointer'}"><i class="fa fa-mouse-pointer" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="settingsModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><!-- TODO: call settings.save() on close -->
                <h5 class="modal-title">Settings</h5>
            </div>

            <div class="modal-body">
                <div>
                    <div>
                        <h3>General</h3>
                        <div>
                            <label for="username"><NAME></label>
                            <input type="text" id="username" placeholder="Username" class="form-control" ng-model="settings.username">
                        </div>
                        <div class="form-group">
                            <div>
                                <label for="navigationTypeButtons">Navigation Method</label>
                            </div>
                            <div class="btn-group" id="navigationTypeButtons">
                                <button class="btn controls-toggle" id="controls-toggle-buttons" ng-click="settings.put('navigationType','button');closeSettings()" ng-class="{'btn-success':settings.navigationType=='button'}">Buttons</button>
                                <button class="btn controls-toggle btn-alt" id="controls-toggle-swipe" ng-click="settings.put('navigationType','swipe');closeSettings()" ng-class="{'btn-success':settings.navigationType=='swipe'}">Swipe</button>
                                <button class="btn controls-toggle" id="controls-toggle-laser" ng-click="settings.put('navigationType','laser');closeSettings()" ng-class="{'btn-success':settings.navigationType=='laser'}">Laser</button><commit_msg>remove button controls option (for now)<commit_after><style>
    .navigation-cross {
        min-width: 200px;
        min-height: 200px;
    }

    .navigation-cross .btn {
        width: 50px;
        height: 50px;
        margin: 5px;
    }

    .tooltip.left {
        padding: 0 5px;
        margin-left: -3px;
    }

    .overlay-message-backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9998;
        background-color: rgba(0, 0, 0, 0.7);
    }

    .overlay-message-content {
        z-index: 9999;
        font-size: 36px;
        font-weight: bold;
        color: white;
    }

    .btn.btn-alt:not(.btn-success){
        background-color: #bbbbbb;
    }
</style>

<div ng-show="overlayMessage.message.length > 0">
    <div class="overlay-message-backdrop"></div>
    <div class="overlay-message-content centered">{{ overlayMessage.message }}</div>
</div>

<div style="position: absolute; left: 4px; top: 4px;" id="settings" ng-click="openSettings()">
    <i class="fa fa-cog fa-2x" aria-hidden="true"></i>
</div>
<div class="centered">
    <div id="controls-container">
        <div id="btn-controls" ng-show="settings.navigationType=='button'">
            <div class="center-block text-center navigation-cross">
                <div>
                    <button class="btn-control btn" id="btn-control-up" data-keycode="38" ng-disabled="!session.initialized" ng-click="sendControl(38)">
                        <i class="fa fa-arrow-up" aria-hidden="true"></i>
                    </button>
                </div>
                <div>
                    <button class="btn-control btn" id="btn-control-left" data-keycode="37" ng-disabled="!session.initialized" ng-click="sendControl(37)">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </button>
                    <button class="btn-control btn" id="btn-control-space" data-keycode="32" ng-disabled="!session.initialized" ng-click="sendControl(32)">
                        <i class="fa fa-circle" aria-hidden="true"></i>
                    </button>
                    <button class="btn-control btn" id="btn-control-right" data-keycode="39" ng-disabled="!session.initialized" ng-click="sendControl(39)">
                        <i class="fa fa-arrow-right" aria-hidden="true"></i>
                    </button>
                </div>
                <div>
                    <button class="btn-control btn" id="btn-control-down" data-keycode="40" ng-disabled="!session.initialized" ng-click="sendControl(40)">
                        <i class="fa fa-arrow-down" aria-hidden="true"></i>
                    </button>
                </div>
            </div>

            <!--<br/>-->
            <!--<button class="btn-control btn" id="btn-control-pgup" data-keycode="33" ng-disabled="!session.initialized" ng-click="sendControl(33)">-->
            <!--Page Up-->
            <!--</button>-->
            <!--<button class="btn-control btn" id="btn-control-pgdown" data-keycode="34" ng-disabled="!session.initialized" ng-click="sendControl(34)">-->
            <!--Page Down-->
            <!--</button>-->

            <!--<br/>-->
            <!--<button class="btn-control btn" id="btn-control-zoomin" data-keycode="33" ng-disabled="!session.initialized" ng-click="sendControl(107,{ctrl:true})">-->
            <!--Zoom in-->
            <!--</button>-->
            <!--<button class="btn-control btn" id="btn-control-zoomout" data-keycode="34" ng-disabled="!session.initialized" ng-click="sendControl(109,{ctrl:true})">-->
            <!--Zoom out-->
            <!--</button>-->

            <div>
                {{ deviceOrientation.lastGamma }}
            </div>
        </div>

        <div id="swipe-controls" ng-show="settings.navigationType=='swipe'">
            Swipe or tap to navigate
        </div>

        <div id="laser-controls" ng-show="settings.navigationType=='laser'">
            <div class="text-center" style="min-width:200px">
                <div>
                    <button class="btn-control btn" id="btn-control-laser" style="width:64px; height:64px;" ng-disabled="!session.initialized" ng-click="deviceOrientation.sendData()" ng-style="deviceOrientation.laserActive && {'color':settings.laserStyle.color}">
                        <i class="fa fa-circle" aria-hidden="true"></i>
                    </button>
                </div>
                <br/>
                <div>
                    <div class="btn-group">
                        <button class="btn" ng-click="settings.put('laserTool','pointer')" ng-class="{'btn-success':settings.laserTool=='pointer'}"><i class="fa fa-circle" aria-hidden="true"></i></button>
                        <button class="btn" disabled ng-click="settings.put('laserTool','pencil')" ng-class="{'btn-success':settings.laserTool=='pencil'}"><i class="fa fa-pencil" aria-hidden="true"></i></button>
                        <button class="btn" disabled ng-click="settings.put('laserTool','eraser')" ng-class="{'btn-success':settings.laserTool=='eraser'}"><i class="fa fa-eraser" aria-hidden="true"></i></button>
                        <button class="btn" disabled ng-click="settings.put('laserTool','mouse_pointer')" ng-class="{'btn-success':settings.laserTool=='mouse_pointer'}"><i class="fa fa-mouse-pointer" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="settingsModal" class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><!-- TODO: call settings.save() on close -->
                <h5 class="modal-title">Settings</h5>
            </div>

            <div class="modal-body">
                <div>
                    <div>
                        <h3>General</h3>
                        <div>
                            <label for="username">Your Name</label>
                            <input type="text" id="username" placeholder="Username" class="form-control" ng-model="settings.username">
                        </div>
                        <div class="form-group">
                            <div>
                                <label for="navigationTypeButtons">Navigation Method</label>
                            </div>
                            <div class="btn-group" id="navigationTypeButtons">
                                <!--<button class="btn controls-toggle" id="controls-toggle-buttons" ng-click="settings.put('navigationType','button');closeSettings()" ng-class="{'btn-success':settings.navigationType=='button'}">Buttons</button>-->
                                <button class="btn controls-toggle btn-alt" id="controls-toggle-swipe" ng-click="settings.put('navigationType','swipe');closeSettings()" ng-class="{'btn-success':settings.navigationType=='swipe'}">Swipe</button>
                                <button class="btn controls-toggle" id="controls-toggle-laser" ng-click="settings.put('navigationType','laser');closeSettings()" ng-class="{'btn-success':settings.navigationType=='laser'}">Laser</button>
{'fraction_non_alphanumeric': 0.17924785393105327, 'fraction_numerical': 0.011718217740836626, 'mean_word_length': 2.0247269730063877, 'pattern_counts': {'":': 0, '<': 283, '<?xml version=': 0, '>': 285, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1172631', 'n_tokens_mistral': 4342, 'n_tokens_neox': 4066, 'n_words': 693}