- var theme_customizer      = true;
- var ace_editor            = true;

doctype html
html(lang='en')
    include ../../components/header-files
    body
        include ../../components/loader
        // page-wrapper Start
        #pageWrapper.page-wrapper
            include ../../components/header
            // Page Body Start
            .page-body-wrapper.horizontal-menu
                include ../../components/sidebar
                .page-body
                    .container-fluid
                        .page-header
                            .row
                                .col-sm-6
                                    h3
                                        | ACE Code Editor 
                                    ol.breadcrumb
                                      li.breadcrumb-item
                                        a(href='index.html')
                                         | Home
                                      li.breadcrumb-item Editors
                                      li.breadcrumb-item.active ACE Code Editor
                                .col-sm-6
                                  include ../../components/bookmark
                    // Container-fluid starts
                    .container-fluid
                        .row
                            .col-xl-6
                              .card
                                .card-header.pb-0
                                  h5 Javascript Mode
                                .card-body
                                  #editor.ace-editor
                                    | /* Sample JavaScript edit source */
                                    | // Define a module
                                    | var app = angular.module('app', ['ui.bootstrap']);
                                    | // Define a conroller.
                                    | app.controller('GrokController', ['$scope', '$filter',
                                    | function($scope, $filter) {
                                    | $scope.today = function() {
                                    | $scope.dt = new Date();
                                    | };
                                    | $scope.today();
                                    | $scope.isOpened = false;
                                    | $scope.open = function($event) {
                                    | $event.preventDefault();
                                    | $event.stopPropagation();
                                    | $scope.isOpened = true;
                                    | };
                                    | }]);
                                    | /* End of sample edit source */
                            .col-xl-6
                              .card
                                .card-header.pb-0
                                  h5 Html Mode
                                .card-body
                                  #html-editor.ace-editor
                                    | <!--Page header start-->
                                    | <div class="page-header">
                                    | <div class="row">
                                    | <div class="col-xl-6">
                                    | <h3>Ace Text editor</h3>
                                    | <small>viho Admin panel</small>
                                    | </div>
                                    | <div class="col-xl-6">
                                    | <ol class="breadcrumb pull-right">
                                    | <li class="breadcrumb-item">
                                    a(href='javascript:void(0)')
                                      i.fa.fa-home
                                    | </li>
                                    |             <li class="breadcrumb-item">Editor </li>
                                    |             <li class="breadcrumb-item active">Ace Text editor</li>
                                    |           </ol>
                                    |        </div>
                                    |     </div>
                                    | </div>
                                    | <!--Page header end-->
                            .col-xl-6
                              .card
                                .card-header.pb-0
                                  h5 css Mode
                                .card-body
                                  #css-editor.ace-editor
                                    | .text-layer
                                    | {
                                    | font: 12px Monaco, "Courier New", monospace;
                                    | font-size: 3vmin;
                                    | cursor: text;
                                    | }
                                    | .blinker {
                                    | animation: blink 1s linear infinite alternate;
                                    | }
                                    | @keyframes blink {
                                    | 0%, 40% {
                                    | opacity: 1
                                    | }
                                    | 40.5%, 100% {
                                    | opacity: 1
                                    | }
                                    | }
                                    | @document url(http://c9.io/), url-prefix(http://ace.c9.io/build/),
                                    | domain(c9.io), regexp("https:.*") /**/
                                    | {
                                    | /**/
                                    | img[title]:before
                                    | {
                                    | content: attr(title) "\AImage \retrieved from" attr(src); /**/
                                    | white-space: pre;
                                    | display: block;
                                    | background: url(asdasd); "err
                                    | }
                                    | }
                                    | @viewport {
                                    | min-zoom: 1;
                                    | max-zoom: 200%;
                                    | user-zoom: fixed;
                                    | }
                            .col-xl-6
                              .card
                                .card-header.pb-0
                                  h5 php Mode
                                .card-body
                                  #php-editor.ace-editor
                                    | <?php
                                    | function nfact($n) {
                                    | if ($n == 0) {
                                    | return 1;
                                    | }
                                    | else {
                                    | return $n * nfact($n - 1);
                                    | }
                                    | }
                                    | echo "\n\nPlease enter a whole number ... ";
                                    | $num = trim(fgets(STDIN));
                                    | // ===== PROCESS - Determing the factorial of the input number =====
                                    | $output = "\n\nFactorial " . $num . " = " . nfact($num) . "\n\n";
                                    | echo $output;
                                    | ?>
                    // Container-fluid Ends
                include ../../components/footer
        include ../../components/footer-files