<commit_before>{% extends "translator/base.html" %}
{% block head %}
<!--<link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
-->
<link rel="stylesheet" href="/static/lib/hljs.themes/tomorrow.css">
<link rel='stylesheet' href='/static/css/perfect-scrollbar.css'>
<link href="/static/lib/jquery.upvote/jquery.upvote.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="/static/css/translate.css">
<link rel="stylesheet" href="/static/css/introjs.min.css">
{% endblock %}
{% block body %}
<div class="translate-panel">
    {% if nl_request %}
    <div class="form-group">
        <form class="form-block" action="/translate/" method="POST">{% csrf_token %}
            <div class="input-group">
                <input id="nl_request_input" class="form-control search-box" type="text" name="request_str"
                       autocapitalize="off" autocorrect="off" value="{{nl_request.request_str}}">
                <span class="input-group-btn">
                    <button id="submit-to-tellina" class="btn btn-default" type="submit">Tellina</button>
                    <button id="google-command" type="button" class="btn btn-default" target="_blank">Google </button>
                </span>
            </div>
        </form>
    </div>
    {% endif %}
    <div id="suggestions">
        <div class="center-block">
            {% if trans_list %}
            {% for translation, to_expl_cmd, html_str in trans_list %}
            <div class="well offset1 span10" id="intro1">
                <table class="cmd-result">
                    <tr>
                        <td>
                            <code style="background-color:#f8f8f8" class="bash hljs" id="oneliner-{{forloop.counter}}">
                                <span id="pred-cmd-{{forloop.counter}}" class="command">
                                    {{html_str | safe}}
                                </span>
                            </code>
                        </td>
                        <td align="right" style="width: 100px;">
                            <button type="button" class="btn btn-default btn-copy"
                                                  data-clipboard-target="#pred-cmd-{{forloop.counter}}"
                                                  id="copy-btn-{{forloop.counter}}">
                                <img src="/static/img/clippy.svg" width="14">
                            </button>
                            <button type="button" class="btn btn-default btn-expl"
                                                  id="expl-btn-{{forloop.counter}}"
                                                  onclick="window.open('http://explainshell.com/explain?cmd={{to_expl_cmd}}')">
                                <img src="/static/img/gear.svg" width="14">
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            {% endfor %}
            {% else %}
            <div class="translation-error">
                <p>I'm very sorry, I don't know how to translate this command at the moment.</p>

                <p>Please rephrase your query or try Google Search instead.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
{% block other-js %}
<script src='/static/js/clipboard.min.js'></script>
<script src='/static/js/perfect-scrollbar.js'></script>
<script src='/static/js/perfect-scrollbar.jquery.js'></script>
<script src="/static/lib/jquery.upvote/jquery.upvote.js"></script>
<script src="/static/js/hljs-9.8.0.min.js"></script>
<script src="/static/lib/hljs.themes/bash.js"></script>
<script>

$(document).ready(function() {
    // We don't need to use the following function call anymore:
    // our tool renders highlights automatically in backend.
    /*$('div code').each(
      function(i, block) {
      hljs.highlightBlock(block);
      }
      );*/

    // set tooltip for each span inside command
    $('.command span').tooltip({
        placement: 'bottom',
        html: true,
        // Hover over the tooltip will trigger the code to access the code
        title: function () {

            var local_data = "error";

            $.ajax({
                type: 'get',
                async: false,
                url: '/explain_cmd',
                data: { 
                    cmd_head : $(this).attr("dominate_cmd"), 
                    flag_name : $(this).attr("dominate_flag"),
                    node_kind : $(this).attr("node_kind")
                },
                success: function (data) {
                    local_data = data;
                }
            });

            if (local_data == "") {
                return "";
            }

            return  "<div class='cmd-expl'>" 
                + htmlForTextWithEmbeddedNewlines(local_data) 
                + "</div>";
        }
    });

    var num_suggestions = 100;
    for (var i=1; i<=num_suggestions; i++) {
        $('#copy-btn-' + i).height($('#oneliner-' + i).height() + 4);
        $('#expl-btn-' + i).height($('#oneliner-' + i).height() + 4);
        $('#copy-btn-' + i).attr({
            'data-original-title': 'Copy to clipboard'
        });
        $('#expl-btn-' + i).attr({
            'data-original-title': 'Explain the command'
        });
    }
});
</script>
<script>
var clipboard = new Clipboard('.btn-copy');

function setTooltip(btn, message) {
    $(btn).tooltip('hide')
        .attr('data-original-title', message)
        .tooltip('show');
}

function hideTooltip(btn) {
    i = btn.id.split('-').slice(-1)[0];
    if (i == '1') {
        setTimeout(function() {
            $(btn).tooltip('hide')
                .attr('data-original-title', 'Copy to clipboard');
        }, 1000);
    } else {
        setTimeout(function() {
            $(btn).tooltip('hide')
                .attr('data-original-title', '');
        }, 1000);
    }
}

clipboard.on('success', function(e) {
    // console.info('Action:', e.action);
    // console.info('Text:', e.text);
    e.clearSelection();
    setTooltip(e.trigger, 'Copied!');
    hideTooltip(e.trigger);
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});
</script>
<script type="text/javascript" src="/static/js/intro.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.btn-copy').tooltip({
        placement: 'top'
    });
    $('.btn-expl').tooltip({
        placement: 'bottom'
    });

    // get user's ip address when the page is loaded
    var ip_address;
    $.get("http://ipinfo.io", function(response) {
        ip_address = response.ip;
        $.get(`/remember_ip_address`, {ip_address: ip_address});
        console.log('IP Address for study session logged: ' + ip_address);
    }, "jsonp");

    $("#google-command").click(function() {
        nl_cmd = $("#translate").val();
        href="https://www.google.com/search?q=" + nl_cmd;
        window.open(href);
    });

    $("#submit-to-tellina").click(function() {
        // show waiting icon
        $("body").addClass("loading");
    });
});

function startIntro(){
    var intro = introJs();
    intro.setOptions({
        steps: [
        {
            element: '#intro1',
            intro: "This is a bash one-liner. Hover over any part of the command for more information.",
            position: 'right'
        },
        {
            element: '#oneliner-1',
            intro: "Bash commands are <span style=\"color:#f5871f\">orange</span>"
        },
        {
            element: '#oneliner-1',
            intro: "Command flags are <span style=\"color:#8959a8\">purple</span>."
        },
        {
            element: '#oneliner-1',<commit_msg>fix bug for Google button<commit_after>{% extends "translator/base.html" %}
{% block head %}
<!--<link rel="stylesheet"
    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/styles/default.min.css">
-->
<link rel="stylesheet" href="/static/lib/hljs.themes/tomorrow.css">
<link rel='stylesheet' href='/static/css/perfect-scrollbar.css'>
<link href="/static/lib/jquery.upvote/jquery.upvote.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="/static/css/translate.css">
<link rel="stylesheet" href="/static/css/introjs.min.css">
{% endblock %}
{% block body %}
<div class="translate-panel">
    {% if nl_request %}
    <div class="form-group">
        <form class="form-block" action="/translate/" method="POST">{% csrf_token %}
            <div class="input-group">
                <input id="nl_request_input" class="form-control search-box" type="text" name="request_str"
                       autocapitalize="off" autocorrect="off" value="{{nl_request.request_str}}">
                <span class="input-group-btn">
                    <button id="submit-to-tellina" class="btn btn-default" type="submit">Tellina</button>
                    <button id="google-command" type="button" class="btn btn-default" target="_blank">Google </button>
                </span>
            </div>
        </form>
    </div>
    {% endif %}
    <div id="suggestions">
        <div class="center-block">
            {% if trans_list %}
            {% for translation, to_expl_cmd, html_str in trans_list %}
            <div class="well offset1 span10" id="intro1">
                <table class="cmd-result">
                    <tr>
                        <td>
                            <code style="background-color:#f8f8f8" class="bash hljs" id="oneliner-{{forloop.counter}}">
                                <span id="pred-cmd-{{forloop.counter}}" class="command">
                                    {{html_str | safe}}
                                </span>
                            </code>
                        </td>
                        <td align="right" style="width: 100px;">
                            <button type="button" class="btn btn-default btn-copy"
                                                  data-clipboard-target="#pred-cmd-{{forloop.counter}}"
                                                  id="copy-btn-{{forloop.counter}}">
                                <img src="/static/img/clippy.svg" width="14">
                            </button>
                            <button type="button" class="btn btn-default btn-expl"
                                                  id="expl-btn-{{forloop.counter}}"
                                                  onclick="window.open('http://explainshell.com/explain?cmd={{to_expl_cmd}}')">
                                <img src="/static/img/gear.svg" width="14">
                            </button>
                        </td>
                    </tr>
                </table>
            </div>
            {% endfor %}
            {% else %}
            <div class="translation-error">
                <p>I'm very sorry, I don't know how to translate this command at the moment.</p>

                <p>Please rephrase your query or try Google Search instead.</p>
            </div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}
{% block other-js %}
<script src='/static/js/clipboard.min.js'></script>
<script src='/static/js/perfect-scrollbar.js'></script>
<script src='/static/js/perfect-scrollbar.jquery.js'></script>
<script src="/static/lib/jquery.upvote/jquery.upvote.js"></script>
<script src="/static/js/hljs-9.8.0.min.js"></script>
<script src="/static/lib/hljs.themes/bash.js"></script>
<script>

$(document).ready(function() {
    // We don't need to use the following function call anymore:
    // our tool renders highlights automatically in backend.
    /*$('div code').each(
      function(i, block) {
      hljs.highlightBlock(block);
      }
      );*/

    // set tooltip for each span inside command
    $('.command span').tooltip({
        placement: 'bottom',
        html: true,
        // Hover over the tooltip will trigger the code to access the code
        title: function () {

            var local_data = "error";

            $.ajax({
                type: 'get',
                async: false,
                url: '/explain_cmd',
                data: { 
                    cmd_head : $(this).attr("dominate_cmd"), 
                    flag_name : $(this).attr("dominate_flag"),
                    node_kind : $(this).attr("node_kind")
                },
                success: function (data) {
                    local_data = data;
                }
            });

            if (local_data == "") {
                return "";
            }

            return  "<div class='cmd-expl'>" 
                + htmlForTextWithEmbeddedNewlines(local_data) 
                + "</div>";
        }
    });

    var num_suggestions = 100;
    for (var i=1; i<=num_suggestions; i++) {
        $('#copy-btn-' + i).height($('#oneliner-' + i).height() + 4);
        $('#expl-btn-' + i).height($('#oneliner-' + i).height() + 4);
        $('#copy-btn-' + i).attr({
            'data-original-title': 'Copy to clipboard'
        });
        $('#expl-btn-' + i).attr({
            'data-original-title': 'Explain the command'
        });
    }
});
</script>
<script>
var clipboard = new Clipboard('.btn-copy');

function setTooltip(btn, message) {
    $(btn).tooltip('hide')
        .attr('data-original-title', message)
        .tooltip('show');
}

function hideTooltip(btn) {
    i = btn.id.split('-').slice(-1)[0];
    if (i == '1') {
        setTimeout(function() {
            $(btn).tooltip('hide')
                .attr('data-original-title', 'Copy to clipboard');
        }, 1000);
    } else {
        setTimeout(function() {
            $(btn).tooltip('hide')
                .attr('data-original-title', '');
        }, 1000);
    }
}

clipboard.on('success', function(e) {
    // console.info('Action:', e.action);
    // console.info('Text:', e.text);
    e.clearSelection();
    setTooltip(e.trigger, 'Copied!');
    hideTooltip(e.trigger);
});

clipboard.on('error', function(e) {
    console.error('Action:', e.action);
    console.error('Trigger:', e.trigger);
});
</script>
<script type="text/javascript" src="/static/js/intro.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.btn-copy').tooltip({
        placement: 'top'
    });
    $('.btn-expl').tooltip({
        placement: 'bottom'
    });

    // get user's ip address when the page is loaded
    var ip_address;
    $.get("http://ipinfo.io", function(response) {
        ip_address = response.ip;
        $.get(`/remember_ip_address`, {ip_address: ip_address});
        console.log('IP Address for study session logged: ' + ip_address);
    }, "jsonp");

    $("#google-command").click(function() {
        nl_cmd = $("#nl_request_input").val();
        href="https://www.google.com/search?q=" + nl_cmd;
        window.open(href);
    });

    $("#submit-to-tellina").click(function() {
        // show waiting icon
        $("body").addClass("loading");
    });
});

function startIntro(){
    var intro = introJs();
    intro.setOptions({
        steps: [
        {
            element: '#intro1',
            intro: "This is a bash one-liner. Hover over any part of the command for more information.",
            position: 'right'
        },
        {
            element: '#oneliner-1',
            intro: "Bash commands are <span style=\"color:#f5871f\">orange</span>"
        },
        {
            element: '#oneliner-1',
            intro: "Command flags are <span style=\"color:#8959a8\">purple</span>."
        },
        {
            element: '#oneliner-1',
{'fraction_non_alphanumeric': 0.1714613765388786, 'fraction_numerical': 0.006378771448618996, 'mean_word_length': 1.7568137858273254, 'pattern_counts': {'":': 0, '<': 159, '<?xml version=': 0, '>': 157, 'https://': 2, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 18, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '814364', 'n_tokens_mistral': 4675, 'n_tokens_neox': 4412, 'n_words': 865}