<commit_before><!--
<html xmlns:th="http://www.thymeleaf.org">
-->
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment :: header (title=${title} + ' - bluefairy')"></head>
<body>
<nav th:replace="_fragment :: navigator"></nav>
<div class="container">
    <!-- #action-modal -->
    <div id="action-modal" class="modal fade" tabindex="-1" role="dialog"
         aria-labelledby="action-modal-label" aria-hidden="true"
         data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            data-loading-text="&times;" autocomplete="off"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="modal-title">Run container</h4>
                </div>
                <div class="modal-body">
                    <form action="run" method="POST" class="form-horizontal"
                          th:action="@{/container/run}">
                        <div class="form-group">
                            <label for="actionModalId" class="col-sm-4 control-label">Id</label>
                            <div class="col-sm-8">
                                <p class="form-control-static action-modal-id">id</p>
                                <input type="hidden" name="id" class="action-modal-id"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="actionModalRepotags" class="col-sm-4 control-label">Repo Tags</label>
                            <div class="col-sm-8">
                                <p class="form-control-static action-modal-repotags">repo tags</p>
                                <input type="hidden" name="repoTags" class="action-modal-repotags"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exposablePorts" class="col-sm-4 control-label">Name</label>
                            <div class="col-sm-6">
                                <input type="text" name="name" placeholder="/?[a-zA-Z0-9-]+"
                                       class="action-modal-name form-control input-sm"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exposablePorts" class="col-sm-4 control-label">Exposable Ports</label>
                            <div class="col-sm-8">
                                <div id="exposable-ports"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="envVars" class="col-sm-4 control-label">Environment variables</label>
                            <div class="col-sm-8">
                                <div id="env-vars"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="binds" class="col-sm-4 control-label">Volume binds</label>
                            <div class="col-sm-6">
                                <div id="binds"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                            data-loading-text="Cancel" autocomplete="off">Cancel</button>
                    <button type="button" class="btn btn-primary" id="action-modal-btn"
                            data-loading-text="Please wait.." autocomplete="off">Run</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /#action-modal -->
    <div class="subject">
        <h1 th:text="${title}">title</h1>
        <p class="lead"></p>
    </div>
    <div>
        <table class="table table-hover table-condensed table-list">
            <thead>
            <tr class="active">
                <th class="fott-col-id">Id</th>
                <th class="fott-col-repo">Repo Tags</th>
                <th class="fott-col-size">Size</th>
                <th class="fott-col-vsize">Virtual Size</th>
                <th class="fott-col-pid">Parent Id</th>
                <th class="fott-col-created">Created</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="image : ${images}">
                <td class="fott-id filter-value"
                    th:text="${image.idToShort}" th:attr="data-id=${image.id}">id</td>
                <td class="fott-repo filter-value ellipsis cell-repoTags"
                    data-container="body" data-toggle="popover"
                    data-placement="top" data-trigger="hover">
                    <span th:each="repoTag, status : ${image.repoTags}"
                          th:text="${status.first} ? ${repoTag} : ${', ' + repoTag}">repoTag</span>
                </td>
                <td class="fott-size filter-value" th:text="${image.size}">size</td>
                <td class="fott-vsise filter-value" th:text="${image.virtualSize}">virtualSize</td>
                <td class="fott-pid filter-value" th:text="${image.parentIdToShort}" th:attr="data-id=${image.parentId}">parentId</td>
                <td class="fott-created filter-value" th:text="${#dates.format(image.createdToDate, 'yyyy-MM-dd HH:mm')}">created</td>
                <td>
                    <button type="button" class="btn btn-default btn-xs"
                            data-toggle="modal" data-target="#action-modal"
                            th:attr="data-id=${image.idToShort}, data-repotags=${!#arrays.isEmpty(image.repoTags)}? ${image.repoTags[0]} :'' "
                            th:if="${not #arrays.contains(image.repoTags, '&lt;none&gt;:&lt;none&gt;')}"
                            >Run</button>
                    <button type="button" class="btn btn-default btn-xs btn-warning"
                            data-toggle="modal" data-target="#action-modal"
                            th:attr="data-id=${image.idToShort}, data-repotags=${!#arrays.isEmpty(image.repoTags)}? ${image.repoTags[0]} :'' "
                            th:if="${#arrays.contains(image.repoTags, '&lt;none&gt;:&lt;none&gt;')}"
                            >Run</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div><!-- /.container -->

<footer th:replace="_fragment :: footer"></footer>
<script th:inline="javascript">
/*<![CDATA[*/
$.ajaxSetup({
    headers: {
        "X-CSRF-TOKEN": /*[[ ${_csrf.token} ]]*/ "<PASSWORD>",
        "X-LOGIN-USER": /*[[ ${#authentication.name} ]]*/ "username"
    }
});

/**
 * fott
 */
$(".fott-col-id").fott({fieldFilter: "fott-id", inputClasses: "form-control input-sm", placeholder: "id"});
$(".fott-col-repo").fott({fieldFilter: "fott-repo", inputClasses: "form-control input-sm", placeholder: "tags"});
$(".fott-col-size").fott({fieldFilter: "fott-size", inputClasses: "form-control input-sm", placeholder: "size"});
$(".fott-col-vsize").fott({fieldFilter: "fott-vsize", inputClasses: "form-control input-sm", placeholder: "vsize"});
$(".fott-col-pid").fott({fieldFilter: "fott-pid", inputClasses: "form-control input-sm", placeholder: "parent"});
$(".fott-col-created").fott({fieldFilter: "fott-created", inputClasses: "form-control input-sm", placeholder: "created"});

/**
 * popover
 */
$("[data-toggle='popover']").popover({
    content:function() {
        return $(this).text();
    }
});

$("#action-modal-btn").click(function() {
    var $portGroup = $("#action-modal form div:has(input[name='exposablePorts'])");

    var exposedPorts = {};
    var portBindings = {};

    $portGroup.each(function() {
        var exposablePorts = $(this).find("input[name='exposablePorts']").val();
        var exposePorts = $(this).find("input[name='exposePorts']").val();

        exposedPorts[exposablePorts] = {};
        portBindings[exposablePorts] = new Array();
        portBindings[exposablePorts].push({
            "HostPort" : exposePorts
        });
    });

    var envVars = new Array();

    $("#action-modal form input[name='env']").each(function() {
        envVars.push($(this).val());
    });

    var volumes = {};
    var binds = new Array();

    $("#action-modal form #binds .input-group").each(function() {
        var bindsHost = $(this).find("[name=bindsHost]").val();
        var bindsContainer = $(this).find("[name=bindsContainer]").val();
        var bindsMode = $(this).find("[name=bindsMode]").val();

        if (bindsHost === '' || bindsContainer === '' || bindsMode === '') {
            return false;
        }

        volumes[bindsHost] = {};
        binds.push(bindsHost + ":" + bindsContainer + ":" + bindsMode);
    });

    var submitData = {
        Hostname        : null,
        Domainname      : null,
        User            : null,
        Memory          : 0,
        MemorySwap      : 0,
        CpuShares       : 0,
        Cpuset          : null,
        AttachStdin     : false,
        AttachStdout    : false,
        AttachStderr    : false,
        Tty             : false,
        OpenStdin       : false,
        StdinOnce       : false,
        Env             : envVars,
        Cmd             : null,
        Entrypoint      : null,
        Image           : $("#action-modal form input[name='repoTags']").val(),
        Volumes         : volumes, // :HashMap<String, HashMap<String, String>>
        WorkingDir      : null,//"",
        NetworkDisabled : false,
        MacAddress      : null,
        ExposedPorts    : exposedPorts, // :HashMap<protoAndPort:String, HashMap<expIp:String, expPort:String>>
        SecurityOpts    : [],
        HostConfig      : {
            Binds           : binds,
            //IpcMode         : null,
            //PidMode         : null,
            Links           : [],
            LxcConf         : [],
            PortBindings    : portBindings,
            PublishAllPorts : true,
            Privileged      : false,
            ReadonlyRootfs  : false,
            Dns             : [],
            DnsSearch       : [],
            ExtraHosts      : null,
            VolumesFrom     : [],
            CapAdd          : [],
            CapDrop         : [],
            //ContainerIDFile : null,
            RestartPolicy   : {
                Name              : "",
                MaximumRetryCount : 0
            },
            NetworkMode     : "bridge",
            //SecurityOpt     : null,
            Devices         : []
        }
    };

    var alertRunError = function() {
        var $alert = $("<div class='alert alert-danger alert-dismissible' role='alert'>" +
        "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>" +
        "<span aria-hidden='true'>&times;</span></button>" +
        "<strong>Error:</strong> Failed to run the container.</div>");
        $("#action-modal .modal-body").prepend($alert);
    };

    var url = /*[[ @{/api/v1/container/create} ]]*/ "#";
    var name = $("#action-modal form input[name='name']").val();

    if (name !== "" && !name.match(/^\/?[a-zA-Z0-9_-]+$/)) {
        alertRunError();
        return;
    }

    $("#action-modal button").button('loading');

    $.ajax({
        // endpoint
        type    : "POST",
        url     : url + "?name=" + name,
        // request
        contentType : "application/json",
        processData : false,
        data        : JSON.stringify(submitData),
        // response
        dataType: "json",
        statusCode: {
            404: function() {
                alert("page not found");
            }
        }
    }).done(function(data, textStatus, jqXHR) {
        var url = /*[[ @{/container/} ]]*/ "#";
        location.href = url + data.Id;
    }).fail(function(jqXHR, textStatus, errorThrown) {
        alertRunError();
    }).always(function() {
        $("#action-modal button").button('reset');
    });
});

$("#action-modal").on("show.bs.modal", function (event) {
    var button = $(event.relatedTarget);
    var actionModalId = button.data("id");
    var actionModalRepoTags = button.data("repotags");

    var url = /*[[ @{/api/v1/image/} ]]*/ "#";

    $.ajax({
        // endpoint
        type    : "GET",
        url     : url + actionModalId,
        // request
        contentType : "application/json",
        processData : false,
        // response
        dataType: "json",
        statusCode: {
            404: function() {
                alert("page not found");
            }
        }
    }).done(function(data, textStatus, jqXHR) {
        // data:PlainObject, textStatus:String, jqXHR:jqXHR
        var $expPorts = $("#exposable-ports");
        $expPorts.children().remove();

        for (key in data.ContainerConfig.ExposedPorts){
            var $expPortsGroup = $("<div class='form-inline'></div>");
            var $expPortsHidden = $("<input type='hidden' name='exposablePorts'/>");
            var $expPortsInput = $("<input type='input' name='exposePorts' class='form-control input-sm'/>");
            var $expPortsSpan = $("<span> -&gt; </span>");
            var $expPortsLabel = $("<p class='form-control-static' style='padding-left:0;'></p>");

            $expPortsInput.attr("placeholder", key.replace(/\/.*/, ""));
            $expPortsLabel.text(key);
            $expPortsHidden.val(key);

            $expPortsGroup.append($expPortsHidden).append($expPortsInput)
                    .append($expPortsSpan).append($expPortsLabel);
            $expPorts.append($expPortsGroup);
        }
    });

    var appendEnvVars = function($envVars) {
        var $envVarsGroup = $('<div class="form-inline"></div>');
        var $envVarsInputGroup = $('<div class="input-group input-group-sm"></div>');
        var $envVarsInput = $('<input type="text" name="env" class="form-control" placeholder="VAR=value"/>');
        var $envVarsBtnGroup = $('<span class="input-group-btn"></span>');
        var $envVarsBtn = $('<button class="btn btn-default" type="button">+</button>');
        var $envVarsLabel = $("<p class='form-control-static' style='padding-left:0;'>&nbsp;</p>");

        $envVarsBtn.on('click', function(event) {
            var existsEmpty = false;

            $(event.target).closest('#env-vars').find('[name=env]').each(function() {
                if ($(this).val() === '') {
                    existsEmpty = true;
                    return false;
                }
            });

            if (existsEmpty) {
                return;
            }

            appendEnvVars($envVars);
        });

        $envVars.append($envVarsGroup);
        $envVarsGroup.append($envVarsInputGroup).append($envVarsLabel);
        $envVarsInputGroup.append($envVarsInput).append($envVarsBtnGroup);
        $envVarsBtnGroup.append($envVarsBtn);
    };

    var $envVars = $("#env-vars");
    $envVars.children().remove();
    appendEnvVars($envVars);

    var appendBinds = function($binds) {
        var $bindsGroup = $('<div class="form"></div>');
        var $bindsInputGroup = $('<div class="input-group input-group-sm"></div>');
        var $bindsHostInput = $('<input type="text" name="bindsHost" class="form-control" placeholder="/mount/host/dir">');
        var $bindsContainerInput = $('<input type="text" name="bindsContainer" class="form-control" placeholder="/mount/container/dir">');
        var $bindsModeInput = $('<select name="bindsMode" class="form-control"><option value="ro">read only</option><option value="rw">read write</option></select>');
        var $bindsBtnGroup = $('<span class="input-group-btn"></span>');
        var $bindsBtn = $('<button class="btn btn-default" type="button">+</button>');

        $bindsBtn.on('click', function(event) {
            var existsEmpty = false;

            $(event.target).closest('#binds').find('input').each(function() {
                if ($(this).val() === '') {
                    existsEmpty = true;
                    return false;
                }
            });

            if (existsEmpty) {
                return;
            }

            appendBinds($binds);
        });

        $binds.append($bindsGroup);
        $bindsGroup.append($bindsInputGroup);
        $bindsInputGroup.append($bindsHostInput).append($bindsContainerInput)
                .append($bindsModeInput).append($bindsBtnGroup);
        $bindsBtnGroup.append($bindsBtn);
    };

    var $binds = $("#binds");
    $binds.children().remove();
    appendBinds($binds);

    var modal = $(this)
    modal.find('p.action-modal-id').text(actionModalId);
    modal.find('p.action-modal-repotags').text(actionModalRepoTags);
    modal.find('input.action-modal-id').val(actionModalId);
    modal.find('input.action-modal-repotags').val(actionModalRepoTags);
});

$(".table-list td:not(:has(button))").on("click", function() {
    var url = /*[[ @{/image/} ]]*/ "#";
    var $row = $(this).closest("tr");
    var $cell = $row.find("td[data-id]");

    location.href = url + $cell.data("id");
});
/*]]>*/
</script>
</body>
</html>
<commit_msg>doctype宣言を元に戻す<commit_after><html xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment :: header (title=${title} + ' - bluefairy')"></head>
<body>
<nav th:replace="_fragment :: navigator"></nav>
<div class="container">
    <!-- #action-modal -->
    <div id="action-modal" class="modal fade" tabindex="-1" role="dialog"
         aria-labelledby="action-modal-label" aria-hidden="true"
         data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"
                            data-loading-text="&times;" autocomplete="off"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="modal-title">Run container</h4>
                </div>
                <div class="modal-body">
                    <form action="run" method="POST" class="form-horizontal"
                          th:action="@{/container/run}">
                        <div class="form-group">
                            <label for="actionModalId" class="col-sm-4 control-label">Id</label>
                            <div class="col-sm-8">
                                <p class="form-control-static action-modal-id">id</p>
                                <input type="hidden" name="id" class="action-modal-id"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="actionModalRepotags" class="col-sm-4 control-label">Repo Tags</label>
                            <div class="col-sm-8">
                                <p class="form-control-static action-modal-repotags">repo tags</p>
                                <input type="hidden" name="repoTags" class="action-modal-repotags"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exposablePorts" class="col-sm-4 control-label">Name</label>
                            <div class="col-sm-6">
                                <input type="text" name="name" placeholder="/?[a-zA-Z0-9-]+"
                                       class="action-modal-name form-control input-sm"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="exposablePorts" class="col-sm-4 control-label">Exposable Ports</label>
                            <div class="col-sm-8">
                                <div id="exposable-ports"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="envVars" class="col-sm-4 control-label">Environment variables</label>
                            <div class="col-sm-8">
                                <div id="env-vars"></div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="binds" class="col-sm-4 control-label">Volume binds</label>
                            <div class="col-sm-6">
                                <div id="binds"></div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"
                            data-loading-text="Cancel" autocomplete="off">Cancel</button>
                    <button type="button" class="btn btn-primary" id="action-modal-btn"
                            data-loading-text="Please wait.." autocomplete="off">Run</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /#action-modal -->
    <div class="subject">
        <h1 th:text="${title}">title</h1>
        <p class="lead"></p>
    </div>
    <div>
        <table class="table table-hover table-condensed table-list">
            <thead>
            <tr class="active">
                <th class="fott-col-id">Id</th>
                <th class="fott-col-repo">Repo Tags</th>
                <th class="fott-col-size">Size</th>
                <th class="fott-col-vsize">Virtual Size</th>
                <th class="fott-col-pid">Parent Id</th>
                <th class="fott-col-created">Created</th>
                <th></th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="image : ${images}">
                <td class="fott-id filter-value"
                    th:text="${image.idToShort}" th:attr="data-id=${image.id}">id</td>
                <td class="fott-repo filter-value ellipsis cell-repoTags"
                    data-container="body" data-toggle="popover"
                    data-placement="top" data-trigger="hover">
                    <span th:each="repoTag, status : ${image.repoTags}"
                          th:text="${status.first} ? ${repoTag} : ${', ' + repoTag}">repoTag</span>
                </td>
                <td class="fott-size filter-value" th:text="${image.size}">size</td>
                <td class="fott-vsise filter-value" th:text="${image.virtualSize}">virtualSize</td>
                <td class="fott-pid filter-value" th:text="${image.parentIdToShort}" th:attr="data-id=${image.parentId}">parentId</td>
                <td class="fott-created filter-value" th:text="${#dates.format(image.createdToDate, 'yyyy-MM-dd HH:mm')}">created</td>
                <td>
                    <button type="button" class="btn btn-default btn-xs"
                            data-toggle="modal" data-target="#action-modal"
                            th:attr="data-id=${image.idToShort}, data-repotags=${!#arrays.isEmpty(image.repoTags)}? ${image.repoTags[0]} :'' "
                            th:if="${not #arrays.contains(image.repoTags, '&lt;none&gt;:&lt;none&gt;')}"
                            >Run</button>
                    <button type="button" class="btn btn-default btn-xs btn-warning"
                            data-toggle="modal" data-target="#action-modal"
                            th:attr="data-id=${image.idToShort}, data-repotags=${!#arrays.isEmpty(image.repoTags)}? ${image.repoTags[0]} :'' "
                            th:if="${#arrays.contains(image.repoTags, '&lt;none&gt;:&lt;none&gt;')}"
                            >Run</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div><!-- /.container -->

<footer th:replace="_fragment :: footer"></footer>
<script th:inline="javascript">
/*<![CDATA[*/
$.ajaxSetup({
    headers: {
        "X-CSRF-TOKEN": /*[[ ${_csrf.token} ]]*/ "tokentoken",
        "X-LOGIN-USER": /*[[ ${#authentication.name} ]]*/ "username"
    }
});

/**
 * fott
 */
$(".fott-col-id").fott({fieldFilter: "fott-id", inputClasses: "form-control input-sm", placeholder: "id"});
$(".fott-col-repo").fott({fieldFilter: "fott-repo", inputClasses: "form-control input-sm", placeholder: "tags"});
$(".fott-col-size").fott({fieldFilter: "fott-size", inputClasses: "form-control input-sm", placeholder: "size"});
$(".fott-col-vsize").fott({fieldFilter: "fott-vsize", inputClasses: "form-control input-sm", placeholder: "vsize"});
$(".fott-col-pid").fott({fieldFilter: "fott-pid", inputClasses: "form-control input-sm", placeholder: "parent"});
$(".fott-col-created").fott({fieldFilter: "fott-created", inputClasses: "form-control input-sm", placeholder: "created"});

/**
 * popover
 */
$("[data-toggle='popover']").popover({
    content:function() {
        return $(this).text();
    }
});

$("#action-modal-btn").click(function() {
    var $portGroup = $("#action-modal form div:has(input[name='exposablePorts'])");

    var exposedPorts = {};
    var portBindings = {};

    $portGroup.each(function() {
        var exposablePorts = $(this).find("input[name='exposablePorts']").val();
        var exposePorts = $(this).find("input[name='exposePorts']").val();

        exposedPorts[exposablePorts] = {};
        portBindings[exposablePorts] = new Array();
        portBindings[exposablePorts].push({
            "HostPort" : exposePorts
        });
    });

    var envVars = new Array();

    $("#action-modal form input[name='env']").each(function() {
        envVars.push($(this).val());
    });

    var volumes = {};
    var binds = new Array();

    $("#action-modal form #binds .input-group").each(function() {
        var bindsHost = $(this).find("[name=bindsHost]").val();
        var bindsContainer = $(this).find("[name=bindsContainer]").val();
        var bindsMode = $(this).find("[name=bindsMode]").val();

        if (bindsHost === '' || bindsContainer === '' || bindsMode === '') {
            return false;
        }

        volumes[bindsHost] = {};
        binds.push(bindsHost + ":" + bindsContainer + ":" + bindsMode);
    });

    var submitData = {
        Hostname        : null,
        Domainname      : null,
        User            : null,
        Memory          : 0,
        MemorySwap      : 0,
        CpuShares       : 0,
        Cpuset          : null,
        AttachStdin     : false,
        AttachStdout    : false,
        AttachStderr    : false,
        Tty             : false,
        OpenStdin       : false,
        StdinOnce       : false,
        Env             : envVars,
        Cmd             : null,
        Entrypoint      : null,
        Image           : $("#action-modal form input[name='repoTags']").val(),
        Volumes         : volumes, // :HashMap<String, HashMap<String, String>>
        WorkingDir      : null,//"",
        NetworkDisabled : false,
        MacAddress      : null,
        ExposedPorts    : exposedPorts, // :HashMap<protoAndPort:String, HashMap<expIp:String, expPort:String>>
        SecurityOpts    : [],
        HostConfig      : {
            Binds           : binds,
            //IpcMode         : null,
            //PidMode         : null,
            Links           : [],
            LxcConf         : [],
            PortBindings    : portBindings,
            PublishAllPorts : true,
            Privileged      : false,
            ReadonlyRootfs  : false,
            Dns             : [],
            DnsSearch       : [],
            ExtraHosts      : null,
            VolumesFrom     : [],
            CapAdd          : [],
            CapDrop         : [],
            //ContainerIDFile : null,
            RestartPolicy   : {
                Name              : "",
                MaximumRetryCount : 0
            },
            NetworkMode     : "bridge",
            //SecurityOpt     : null,
            Devices         : []
        }
    };

    var alertRunError = function() {
        var $alert = $("<div class='alert alert-danger alert-dismissible' role='alert'>" +
        "<button type='button' class='close' data-dismiss='alert' aria-label='Close'>" +
        "<span aria-hidden='true'>&times;</span></button>" +
        "<strong>Error:</strong> Failed to run the container.</div>");
        $("#action-modal .modal-body").prepend($alert);
    };

    var url = /*[[ @{/api/v1/container/create} ]]*/ "#";
    var name = $("#action-modal form input[name='name']").val();

    if (name !== "" && !name.match(/^\/?[a-zA-Z0-9_-]+$/)) {
        alertRunError();
        return;
    }

    $("#action-modal button").button('loading');

    $.ajax({
        // endpoint
        type    : "POST",
        url     : url + "?name=" + name,
        // request
        contentType : "application/json",
        processData : false,
        data        : JSON.stringify(submitData),
        // response
        dataType: "json",
        statusCode: {
            404: function() {
                alert("page not found");
            }
        }
    }).done(function(data, textStatus, jqXHR) {
        var url = /*[[ @{/container/} ]]*/ "#";
        location.href = url + data.Id;
    }).fail(function(jqXHR, textStatus, errorThrown) {
        alertRunError();
    }).always(function() {
        $("#action-modal button").button('reset');
    });
});

$("#action-modal").on("show.bs.modal", function (event) {
    var button = $(event.relatedTarget);
    var actionModalId = button.data("id");
    var actionModalRepoTags = button.data("repotags");

    var url = /*[[ @{/api/v1/image/} ]]*/ "#";

    $.ajax({
        // endpoint
        type    : "GET",
        url     : url + actionModalId,
        // request
        contentType : "application/json",
        processData : false,
        // response
        dataType: "json",
        statusCode: {
            404: function() {
                alert("page not found");
            }
        }
    }).done(function(data, textStatus, jqXHR) {
        // data:PlainObject, textStatus:String, jqXHR:jqXHR
        var $expPorts = $("#exposable-ports");
        $expPorts.children().remove();

        for (key in data.ContainerConfig.ExposedPorts){
            var $expPortsGroup = $("<div class='form-inline'></div>");
            var $expPortsHidden = $("<input type='hidden' name='exposablePorts'/>");
            var $expPortsInput = $("<input type='input' name='exposePorts' class='form-control input-sm'/>");
            var $expPortsSpan = $("<span> -&gt; </span>");
            var $expPortsLabel = $("<p class='form-control-static' style='padding-left:0;'></p>");

            $expPortsInput.attr("placeholder", key.replace(/\/.*/, ""));
            $expPortsLabel.text(key);
            $expPortsHidden.val(key);

            $expPortsGroup.append($expPortsHidden).append($expPortsInput)
                    .append($expPortsSpan).append($expPortsLabel);
            $expPorts.append($expPortsGroup);
        }
    });

    var appendEnvVars = function($envVars) {
        var $envVarsGroup = $('<div class="form-inline"></div>');
        var $envVarsInputGroup = $('<div class="input-group input-group-sm"></div>');
        var $envVarsInput = $('<input type="text" name="env" class="form-control" placeholder="VAR=value"/>');
        var $envVarsBtnGroup = $('<span class="input-group-btn"></span>');
        var $envVarsBtn = $('<button class="btn btn-default" type="button">+</button>');
        var $envVarsLabel = $("<p class='form-control-static' style='padding-left:0;'>&nbsp;</p>");

        $envVarsBtn.on('click', function(event) {
            var existsEmpty = false;

            $(event.target).closest('#env-vars').find('[name=env]').each(function() {
                if ($(this).val() === '') {
                    existsEmpty = true;
                    return false;
                }
            });

            if (existsEmpty) {
                return;
            }

            appendEnvVars($envVars);
        });

        $envVars.append($envVarsGroup);
        $envVarsGroup.append($envVarsInputGroup).append($envVarsLabel);
        $envVarsInputGroup.append($envVarsInput).append($envVarsBtnGroup);
        $envVarsBtnGroup.append($envVarsBtn);
    };

    var $envVars = $("#env-vars");
    $envVars.children().remove();
    appendEnvVars($envVars);

    var appendBinds = function($binds) {
        var $bindsGroup = $('<div class="form"></div>');
        var $bindsInputGroup = $('<div class="input-group input-group-sm"></div>');
        var $bindsHostInput = $('<input type="text" name="bindsHost" class="form-control" placeholder="/mount/host/dir">');
        var $bindsContainerInput = $('<input type="text" name="bindsContainer" class="form-control" placeholder="/mount/container/dir">');
        var $bindsModeInput = $('<select name="bindsMode" class="form-control"><option value="ro">read only</option><option value="rw">read write</option></select>');
        var $bindsBtnGroup = $('<span class="input-group-btn"></span>');
        var $bindsBtn = $('<button class="btn btn-default" type="button">+</button>');

        $bindsBtn.on('click', function(event) {
            var existsEmpty = false;

            $(event.target).closest('#binds').find('input').each(function() {
                if ($(this).val() === '') {
                    existsEmpty = true;
                    return false;
                }
            });

            if (existsEmpty) {
                return;
            }

            appendBinds($binds);
        });

        $binds.append($bindsGroup);
        $bindsGroup.append($bindsInputGroup);
        $bindsInputGroup.append($bindsHostInput).append($bindsContainerInput)
                .append($bindsModeInput).append($bindsBtnGroup);
        $bindsBtnGroup.append($bindsBtn);
    };

    var $binds = $("#binds");
    $binds.children().remove();
    appendBinds($binds);

    var modal = $(this)
    modal.find('p.action-modal-id').text(actionModalId);
    modal.find('p.action-modal-repotags').text(actionModalRepoTags);
    modal.find('input.action-modal-id').val(actionModalId);
    modal.find('input.action-modal-repotags').val(actionModalRepoTags);
});

$(".table-list td:not(:has(button))").on("click", function() {
    var url = /*[[ @{/image/} ]]*/ "#";
    var $row = $(this).closest("tr");
    var $cell = $row.find("td[data-id]");

    location.href = url + $cell.data("id");
});
/*]]>*/
</script>
</body>
</html>

{'fraction_non_alphanumeric': 0.17713300775639185, 'fraction_numerical': 0.0022694627980465384, 'mean_word_length': 1.8073387096774194, 'pattern_counts': {'":': 8, '<': 386, '<?xml version=': 0, '>': 386, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 4}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7545152', 'n_tokens_mistral': 10249, 'n_tokens_neox': 9991, 'n_words': 1628}