{{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: 560px;
    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;
}
.info_text {
    padding-bottom: 20px;
    padding-right: 20px;
    font-size: 12px;
}

.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;
}
.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 backTodeBug" href="{{.RepoLink}}/debugjob?debugListType={{if eq $.debugListType "NPU"}}NPU{{else if eq $.debugListType "CPU/GPU"}}CPU/GPU{{else}}all{{end}}">
                    {{$.i18n.Tr "repo.modelarts.notebook"}}
                </a>
                <div class="divider"> / </div>
				<div class="active section">{{.displayJobName}}</div>
			</div>
        </h4>
        {{range $k ,$v := .version_list_task}}
        <div class="ui accordion border-according"  id="accordion{{.VersionName}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}" data-version="{{.VersionName}}">
            <input type="hidden" id="jobId_input" name="jobId_input" value="{{.JobID}}">
            <div class="{{if eq $k 0}}active{{end}} 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">
                                      {{if not (eq .StartTime 0)}}
										 <td>{{TimeSinceUnix1 .StartTime}}</td>
										{{else}}
										 <td>{{TimeSinceUnix1 .CreatedUnix}}<td>
										{{end}}
									</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>

                                </div>
                            </span>
                        </span>
                    </div>
                </div>
            </div>
            <div class="{{if eq $k 0}}active{{end}} 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{{$k}}">{{$.i18n.Tr "repo.modelarts.train_job.config"}}</a>
                        <a class="item" data-tab="second{{$k}}">{{$.i18n.Tr "repo.cloudbrain.runinfo"}}</a>
                    </div>
                    <div class="ui tab active" data-tab="first{{$k}}">
                        <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.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}}
																{{TimeSinceUnix1 .CreatedUnix}}
																{{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">
                                                            {{$.duration}}
                                                        </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">
                                                            {{.Image}}
                                                        </div>
                                                    </td>
                                                </tr>

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

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="dataset_storage_path">
                                                           {{$.dataset_path}}
                                                        </div>
                                                    </td>
                                                </tr>

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

                                                    <td class="ti-text-form-content">
                                                        <div class="text-span text-span-w" id="code_storage_path">
                                                           {{$.code_path}}
                                                        </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 "cloudbrain.gpu_type"}}
                                                        </td>

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                {{$.resource_type}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                           ExitCode
                                                        </td>

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w">
                                                                {{$.result.JobStatus.AppExitCode}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr class="ti-no-ng-animate">
                                                        <td class="ti-no-ng-animate ti-text-form-label text-width80">
                                                         {{$.i18n.Tr "repo.cloudbrain.endtime"}}
                                                        </td>

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w" id="{{.VersionName}}-BenchmarkTypeName">
                                                                {{if not (eq .EndTime 0)}}
																 {{TimeSinceUnix1 .EndTime}}
																{{else}}
                                                                    --
																{{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.dataset"}}
                                                        </td>

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w" id="{{.VersionName}}-BenchmarkTypeName">
                                                                {{$.datasetname}}
                                                            </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">
                                                            <div class="text-span text-span-w">
                                                                {{$.i18n.Tr "cloudbrain.gpu_num"}}：{{$.GpuNum}}，{{$.i18n.Tr "cloudbrain.cpu_num"}}：{{$.CpuNum}}，{{$.i18n.Tr "cloudbrain.memory"}}(MB)：{{$.MemMiB}}，{{$.i18n.Tr "cloudbrain.shared_memory"}}(MB)：{{$.ShareMemMiB}}
                                                            </div>
                                                        </td>
                                                    </tr>

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

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w" id="{{.VersionName}}-mirror">
                                                                {{.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.model_storage_path"}}
                                                        </td>

                                                        <td class="ti-text-form-content">
                                                            <div class="text-span text-span-w" id="model_storage_path">
                                                            {{$.model_path}}
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                </div>
                                <div class="ac-grid ac-grid-col2">
                                        <div class="ac-grid-col">
                                        <span class="ti-text-form-label">{{$.i18n.Tr "repo.cloudbrain.exitinfo"}}</span>
                                        
                                        </div>
                                </div>
                                <div class="ac-grid-col">
                                   <span class="info_text">
                                        {{$.result.JobStatus.AppExitDiagnostics}}
                                    </span>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="ui tab" data-tab="second{{$k}}">
                        <div>
                            <div class="ui message message{{.VersionName}}" style="display: none;">
                                <div id="header"></div>
                            </div>
                            <div class="ui attached  log"  id="log{{.VersionName}}" style="height: 300px !important; overflow: auto;">
                                <span class="info_text">
                                        {{$.result.JobStatus.AppExitDiagnostics}}
                                </span>
                            </div>

                        </div>

                    </div>

                </div>
            </div>
        </div>
        {{end}} {{template "base/paginate" .}}
    </div>
    <!-- 确认模态框 -->
    <div id="deletemodel">
        <div class="ui basic modal">
            <div class="ui icon header">
                <i class="trash icon"></i> {{.i18n.Tr "cloudbrain.delete_task"}}
            </div>

            <div class="content">
                <p>{{.i18n.Tr "cloudbrain.task_delete_confirm"}}</p>
            </div>
            <div class="actions">
                <div class="ui red basic inverted cancel button">
                    <i class="remove icon"></i> {{.i18n.Tr "cloudbrain.operate_cancel"}}
                </div>
                <div class="ui green basic inverted ok button">
                    <i class="checkmark icon"></i> {{.i18n.Tr "cloudbrain.operate_confirm"}}
                </div>
            </div>
        </div>
    </div>


</div>
{{template "base/footer" .}}

<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 jobName
    $(document).ready(function(){
        let url = window.location.href;
        let urlArr = url.split('/')
        userName = urlArr.slice(-5)[0]
        repoPath = urlArr.slice(-4)[0]
        jobName = urlArr.slice(-1)[0]
    })

    function loadLog(version_name){
        document.getElementById("mask").style.display = "block"
        $.get(`/api/v1/repos/${userName}/${repoPath}/cloudbrain/${jobName}/log?version_name=${version_name}&lines=50&order=asc`, (data) => {
            $('input[name=end_line]').val(data.EndLine)
            $('input[name=start_line]').val(data.StartLine)
            $(`#log_file${version_name}`).text(data.Content)
            document.getElementById("mask").style.display = "none"
        }).fail(function(err) {
            console.log(err);
            document.getElementById("mask").style.display = "none"
        });
    }

</script>