{{template "base/head" .}}
<style>
    .according-panel-heading {
        box-sizing: border-box;
        padding: 8px 16px;
        color: #252b3a;
        background-color: #f2f5fc;
        line-height: 1.5;
        cursor: pointer;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
    }

    .accordion-panel-title {
        margin-top: 0;
        margin-bottom: 0;
        color: #252b3a;
    }

    .accordion-panel-title-content {
        vertical-align: middle;
        display: inline-block;
        width: calc(100% - 32px);
        cursor: default;
    }

    .acc-margin-bottom {
        margin-bottom: 5px;
    }

    .title_text {
        font-size: 12px;
    }

    .ac-display-inblock {
        display: inline-block;
    }

    .cti-mgRight-sm {
        margin-right: 8px;
    }

    .ac-text-normal {
        font-size: 14px;
        color: #575d6c;
    }

    .uc-accordionTitle-black {
        color: #333;
    }

    .accordion-border {
        border: 1px solid #cce2ff;
    }

    .padding0 {
        padding: 0 !important;
    }

    .content-pad {
        padding: 15px 35px;
    }

    .content-margin {
        margin: 10px 5px;
    }

    .tab_2_content {
        min-height: 360px;
        margin-left: 10px;
    }

    .ac-grid {
        display: block;
        *zoom: 1;
    }

    .ac-grid-col {
        float: left;
        width: 100%;
    }

    .ac-grid-col2 .ac-grid-col {
        width: 50%;
    }

    .ti-form {
        text-align: left;
        max-width: 100%;
        vertical-align: middle;
    }

    .ti-form>tbody {
        font-size: 12px;
    }

    .ti-form>tbody,
    .ti-form>tbody>tr {
        vertical-align: inherit;
    }

    .ti-text-form-label {

        padding-bottom: 20px;
        padding-right: 20px;
        color: #8a8e99;
        font-size: 12px;
        white-space: nowrap !important;
        width: 80px;
        line-height: 30px;
    }

    .ti-text-form-content {
        line-height: 30px;
        padding-bottom: 20px;
    }

    .ti-form>tbody>tr>td {
        vertical-align: top;
        white-space: normal;
    }

    td,
    th {
        padding: 0;
    }

    .info_text {
        padding-bottom: 20px;
        padding-right: 20px;
        font-size: 12px;
    }

    .ac-grid-col .text-span {
        width: 450px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .redo-color {
        color: #3291F8;
    }

    .ti-action-menu-item:not(:last-child) {
        margin-right: 10px;
        padding-right: 11px;
        text-decoration: none !important;
        color: #526ecc;
        cursor: pointer;
        display: inline-block;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        -khtml-user-select: none;
        user-select: none;
        position: relative;
    }

    .ti-action-menu-item:not(:last-child):after {
        content: "";
        display: inline-block;
        position: absolute;
        height: 12px;
        right: 0;
        top: 50%;
        -webkit-transform: translateY(-6px);
        -ms-transform: translateY(-6px);
        -o-transform: translateY(-6px);
        transform: translateY(-6px);
        border-right: 1px solid #dfe1e6;
    }

    .text-width80 {
        width: 100px;
        line-height: 30px;
    }

    .border-according {
        border: 1px solid #dfe1e6;
    }

    .disabled {
        cursor: default;
        pointer-events: none;
        color: rgba(0, 0, 0, .6) !important;
        opacity: .45 !important;
    }

    .pad20 {

        border: 0px !important;
    }

    .model_file_bread {
        margin-bottom: -0.5rem !important;
        padding-left: 1rem;
        padding-top: 0.5rem;
    }
</style>
<div id="mask">
    <div id="loadingPage">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</div>
<div class="repository">
    {{template "repo/header" .}}
    <div class="ui container">
        <h4 class="ui header" id="vertical-segment">
            <div class="ui breadcrumb">
                <a class="section" href="{{.RepoLink}}/debugjob?debugListType=all">
                    {{.i18n.Tr "repo.cloudbrain"}}
                </a>
                <div class="divider"> / </div>
                <a class="section" href="{{$.RepoLink}}/modelarts/inference-job">
                    {{$.i18n.Tr "repo.modelarts.infer_job"}}
                </a>
                <div class="divider"> / </div>
                <div class="active section">{{.displayJobName}}</div>
            </div>
        </h4>
        {{with .task}}
        <div class="ui accordion border-according" id="accordion{{.VersionName}}"
            data-repopath="{{$.RepoRelPath}}/cloudbrain" data-jobid="{{.ID}}" data-version="{{.VersionName}}">
            <input type="hidden" id="jobId_input" name="jobId_input" value="{{.JobID}}">
            <div class="active title padding0">
                <div class="according-panel-heading">
                    <div class="accordion-panel-title">
                        <i class="dropdown icon"></i>
                        <span class="accordion-panel-title-content">
                            <span>
                                <div class="ac-display-inblock title_text acc-margin-bottom">
                                    <span class="cti-mgRight-sm">{{TimeSinceUnix1 .CreatedUnix}}</span>

                                    <span class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.status"}}：
                                        <span id="{{.VersionName}}-status-span"><i id="icon"
                                                style="vertical-align: middle;" class="{{.Status}}"></i><span id="text"
                                                style="margin-left: 0.4em;font-size: 12px;">{{.Status}}</span></span>
                                    </span>
                                    <span
                                        class="cti-mgRight-sm">{{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}：</span>
                                    <span class="cti-mgRight-sm uc-accordionTitle-black"
                                        id="{{.VersionName}}-duration-span">{{$.duration}}</span>
                                        <span class="refresh-status" data-tooltip="刷新" style="cursor: pointer;" data-inverted="" data-version="{{.VersionName}}"><i
										class="redo icon redo-color"></i></span>

                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="active content">
                <div class="content-pad">
                    <div class="ui pointing secondary menu" style="border-bottom: 1px solid rgba(34,36,38,.15);">
                        <a class="active item"
                            data-tab="first">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
                        <a class="item" data-tab="second"
                            onclick="javascript:parseInfo()">{{$.i18n.Tr "repo.cloudbrain.runinfo"}}</a>
                        <a class="item log_bottom" data-tab="third"
                            data-version="{{.VersionName}}">{{$.i18n.Tr "repo.modelarts.log"}}</a>
                        <a class="item load-model-file" data-tab="four"
                        data-gpu-flag="true" data-download-flag="{{$.canDownload}}" data-path="{{$.RepoLink}}/cloudbrain/inference-job/{{.JobID}}/result_list" data-version="{{.VersionName}}" data-parents="" data-filename="" data-init="init" >{{$.i18n.Tr "repo.model_download"}}</a>
                    </div>
                    <div class="ui tab active" data-tab="first">
                        <div style="padding-top: 10px;">
                            <div class="tab_2_content">
                                <div class="ac-grid ac-grid-col2">
                                    <div class="ac-grid-col">
                                        <table class="ti-form">
                                            <tbody class="ti-text-form">
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.cloudbrain_task"}}
                                                    </td>
                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.DisplayJobName}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.status"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-status">
                                                            {{.Status}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <!-- <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.run_version"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            {{.VersionName}}
                                                        </div>
                                                    </td>
                                                </tr> -->
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.start_time"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w">
                                                            <span style="font-size: 12px;" class="">
                                                            {{if not (eq .StartTime 0)}}
                                                                {{TimeSinceUnix1 .StartTime}}
                                                            {{else}}
                                                                --
                                                            {{end}}
                                                            </span>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.dura_time"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-duration">
                                                            {{.TrainJobDuration}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">

                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.modelarts.train_job.resource_type"}}
                                                    </td>
                                                    <td class="ti-text-form-content resorce_type">
                                                        <div class="text-span text-span-w"></div>
                                                    </td>

                                                </tr>

                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "repo.model.manage.description"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-desc" style="width: 380px;">
                                                            {{if .Description}}
                                                            <span title="{{.Description}}">{{.Description}}</span>
                                                            {{else}}
                                                            <span>--</span>
                                                            {{end}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        创建人
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-creator">
                                                            {{.User.Name}}
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr class="ti-no-ng-animate">
                                                    <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                        {{$.i18n.Tr "cloudbrain.mirror"}}
                                                    </td>

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="{{.VersionName}}-mirror">
                                                            <span class="ui poping up clipboard"  data-position="top center" id="clipboard-btn" style="cursor:pointer" 
                                                                data-clipboard-text="{{.Image}}"
                                                                data-success="{{$.i18n.Tr "repo.copy_link_success"}}" 
                                                                data-error="{{$.i18n.Tr "repo.copy_link_error"}}"
                                                                data-content="{{$.i18n.Tr "repo.copy_link"}}"
                                                                data-variation="inverted tiny"
                                                            >
                                                            <span title="{{.Image}}">{{.Image}}</span> 
                                                            </span>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    <div class="ac-grid-col">
                                            <table class="ti-form">
                                                <tbody class="ti-text-form">
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            {{$.i18n.Tr "repo.modelarts.infer_job_model"}}
                                                        </td>
                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                            <span>{{.ModelName}}</span>&nbsp;&nbsp;
                                                            <span style="color: #8a8e99">{{$.i18n.Tr "repo.modelarts.version"}}：</span><span>{{.ModelVersion}}</span>&nbsp;&nbsp;

                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            {{$.i18n.Tr "repo.modelarts.infer_job_model_file"}}
                                                        </td>
                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                {{.CkptName}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            {{$.i18n.Tr "repo.modelarts.model_label"}}
                                                        </td>

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w" id="{{.VersionName}}-labels">
                                                                {{if .LabelName}}
                                                                    {{range $.LabelName}}
                                                                    <a class="ui label" title="{{.}}">{{.}}</a>
                                                                    {{end}}
                                                                {{else}}
                                                                <span>--</span>
                                                                {{end}}
                                                            </div>
                                                        </td>
                                                    </tr>

                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            {{$.i18n.Tr "repo.modelarts.code_version"}}
                                                        </td>

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                {{.BranchName}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                            {{$.i18n.Tr "repo.modelarts.train_job.start_file"}}
                                                        </td>

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                {{.BootFile}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80" >
                                                            {{$.i18n.Tr "repo.modelarts.train_job.run_parameter"}}
                                                        </td>

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w" title="{{.Parameters}}">
                                                                {{if .Parameters}}
                                                                <span>{{.Parameters}}</span>
                                                                {{else}}
                                                                <span>--</span>
                                                                {{end}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                                {{$.i18n.Tr "repo.modelarts.train_job.standard"}}
                                                        </td>

                                                        <td class="ti-text-form-content spec">
                                                            <div class="text-span text-span-w"></div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                </div>
                                <div style="clear:both">
                                        <table style="border:none" class="ui fixed small stackable table">
                                        <thead>
                                            <tr><th style="color: #8a8e99;font-size:12px" class="three wide left aligned">{{$.i18n.Tr "dataset.file"}}</th>
                                        </tr></thead>
                                        <tbody>
                                            {{range $m ,$n := $.datasetDownload}}
                                            <tr>
                                                <td style="word-wrap: break-word;word-break: break-all;">
                                                {{if eq .IsDelete true}}
                                                        {{.DatasetName}}({{$.i18n.Tr "dataset.file_deleted"}})
                                                 {{else}}
                                                        <a href="{{.RepositoryLink}}" target="_blank">{{.DatasetName}}</a>
                                                 {{end}}
                                                </td>
                                            </tr>
                                                                    
                                            {{end}}				

                                        </tbody>
                                        </table>
							    </div>
                            </div>

                        </div>
                    </div>

                    <div class="ui tab" data-tab="second">
                        <div>
                            <div class="ui message message{{.VersionName}}" style="display: none;">
                                <div id="header"></div>
                            </div>
                            <div class="ui attached"
                                style="height: 390px !important; overflow: auto;">
                                <input type="hidden" id="json_value" value="{{$.result.JobStatus.AppExitDiagnostics}}">
                                <input type="hidden" id="ExitDiagnostics" value="{{$.ExitDiagnostics}}">
                                <span id="info_display" class="info_text">

                                </span>
                            </div>

                        </div>

                    </div>

                    <div class="ui tab" data-tab="third">
                        <div>
                             <a id="{{.VersionName}}-log-down"
                                 class='{{if $.canDownload}}ti-download-file{{else}}disabled{{end}}'
                                 href="/api/v1/repos/{{$.RepoRelPath}}/cloudbrain/{{.ID}}/download_log_file">
                                 <i class="ri-download-cloud-2-line"></i>
                                 <span style="margin-left: 0.3rem;">{{$.i18n.Tr "repo.modelarts.download_log"}}</span>
                             </a>
 
                         </div>
                         <div
                             style="position: relative;border: 1px solid rgba(0,0,0,.2);padding: 0 10px;margin-top: 10px;">
                             <span>
                                 <a title="滚动到顶部" style="position: absolute; right: -32px;cursor: pointer;"
                                     class="log_top" data-version="{{.VersionName}}"><i class="icon-to-top"></i></a>
                             </span>
                             <span class="log-info-{{.VersionName}}">
                                 <a title="滚动到底部" style="position: absolute; bottom: 10px;right: -32px;cursor: pointer;"
                                     class="log_bottom" data-version="{{.VersionName}}"><i
                                         class="icon-to-bottom"></i></a>
                             </span>
                             <div class="ui message message{{.VersionName}}" style="display: none;">
                                 <div id="header"></div>
                             </div>
                             <div class="ui attached  log log-scroll" id="log{{.VersionName}}" data-version="{{.VersionName}}"
                                 style="height: 300px !important; overflow: auto;">
                                 <div class="ui inverted active dimmer">
                                     <div class="ui loader"></div>
                                 </div>
                                 <input type="hidden" name="end_line" value>
                                 <input type="hidden" name="start_line" value>
                                 <pre id="log_file{{.VersionName}}"></pre>
                             </div>
 
                         </div>
                         
 
                     </div>

                    <div class="ui tab" data-tab="four">
                        <input type="hidden" name="model{{.VersionName}}" value="-1">
                        <input type="hidden" name="modelback{{.VersionName}}" value="-1">
                        <div class='ui breadcrumb model_file_bread' id='file_breadcrumb{{.VersionName}}'>
                            <div class="active section">{{.VersionName}}</div>
                            <div class="divider"> / </div>

                        </div>
                        <div id="dir_list{{.VersionName}}">

                        </div>
                    </div>

                </div>
            </div>
        </div>
        
        {{end}}
    </div>

</div>
{{template "base/footer" .}}
<script src="{{StaticUrlPrefix}}/js/specsuse.js?v={{MD5 AppVer}}" type="text/javascript"></script>

<script>
    $('.menu .item').tab()

    $(document).ready(function () {
        $('.ui.accordion').accordion({ selector: { trigger: '.icon' } });
    });
    $(document).ready(function () {
        $('.secondary.menu .item').tab();
    });

    let userName
    let repoPath
    let jobID
    let downlaodFlag = {{ $.canDownload }}
    let taskID = {{ $.task.ID }}
    let realJobName = {{ $.task.JobName }}
    function parseInfo() {
        let jsonValue = document.getElementById("json_value").value;
        let jsonObj = JSON.parse(jsonValue);
        let podRoleName = jsonObj["podRoleName"];
        let html = "";
        if (podRoleName != null) {
            let task0 = podRoleName["task1-0"];
            let podEvents = jsonObj["podEvents"];
            let podEventArray = podEvents[task0];
            if (podEventArray != null) {
                for (var i = 0; i < podEventArray.length; i++) {
                    if (podEventArray[i]["reason"] != "") {
                        html += "<p><b>[" + podEventArray[i]["reason"] + "]</b></p>";
                        html += "<p>" + podEventArray[i]["message"] + "</p>";
                        html += "<p>" + podEventArray[i]["action"] + "</p>";
                    }
                }
            }
            let extras = jsonObj["extras"];
            if (extras != null) {
                for (var i = 0; i < extras.length; i++) {
                    if (extras[i]["reason"] != "") {
                        html += "<p><b>[" + extras[i]["reason"] + "]</b></p>";
                        html += "<p>" + extras[i]["message"] + "</p>";
                        html += "<p>" + extras[i]["action"] + "</p>";
                    }
                }
            }
        }

        let string = document.getElementById("ExitDiagnostics").value;
        string = string.replace(/\r\n/g, "<br>")
        string = string.replace(/\n/g, "<br>");
        string = string.replace(/(\r\n)|(\n)/g, '<br>');

        if (string != "") {
            html += "<p><b>[ExitDiagnostics]</b></p>";
            html += "<p>" + string + "</p>";
        }

        document.getElementById("info_display").innerHTML = html;
    }

    ;(function() {
        var SPEC = {{ .Spec }};
        var showPoint = false;
        var specStr = window.renderSpecStr(SPEC, showPoint, {
            gpu_memory: {{$.i18n.Tr "cloudbrain.gpu_memory"}},
            free: {{$.i18n.Tr "cloudbrain.free"}},
            point_hr: {{$.i18n.Tr "cloudbrain.point_hr"}},
            memory: {{$.i18n.Tr "cloudbrain.memory"}},
            shared_memory: {{$.i18n.Tr "cloudbrain.shared_memory"}},
        });
        $('td.ti-text-form-content.spec div').text(specStr);
        SPEC && $('td.ti-text-form-content.resorce_type div').text(getListValueWithKey(ACC_CARD_TYPE, SPEC.AccCardType));
    })();
</script>