{{template "base/head" .}}
<style>
    #deletemodel {
        width: 100%;
        height: 100%;   
    }
    .alert {
        display: none;
        position: fixed;
        width: 100%;
        z-index: 1001;
        padding: 15px;
        border: 1px solid transparent;
        border-radius: 4px;
        text-align: center;
        font-weight: bold;
    }

    .alert-success {
        color: #3c763d;
        background-color: #dff0d8;
        border-color: #d6e9c6;
    }

    .alert-danger {
        color: #a94442;
        background-color: #f2dede;
        border-color: #ebccd1;
    }

    /* 

    .disabled {
        cursor: pointer;
        pointer-events: none;
    }

    .ui.segment.bottom.attached {
        border: none;
    }
    
    .ui.secondary.vertical.pointing.menu{
        border-right-width: 0px !important;
    }

    .vertical.menu .item {
        border-right-color: white !important;
    }

    .vertical.menu .activate.item {
        font-weight: 700;
    } */
</style>
<div class="modelarts">
    <div class="repository release  modelarts train_job view container">
        <div class="alert"></div>  
        {{template "repo/header" .}}
        
        <div class="ui container">
                 
            <div class="ui grid">
                {{template "repo/modelarts/navbar" .}}            
                <!-- 右侧 -->
                <div class="ui thirteen wide column"> 
                    <div class="ui three column stackable grid">
                        <div class="column">
                            <h2>{{.i18n.Tr "repo.modelarts.train_job"}}</h2>
                        </div>
                        <div class="column">
                        </div>
                        <div class="column right aligned">
                            <a class="ui green button" href="{{.RepoLink}}/modelarts/train-job/create">{{.i18n.Tr "repo.modelarts.train_job.new"}}</a>
                        </div>
                    </div>
                    <div class="ui divider"></div>
                    <div class="ui grid">
                        <div class="row">
                            <div class="ui sixteen wide column">
                                <div class="ui sixteen wide column">
                                    <div class="ui two column stackable grid">
                                        <div class="column">
                                        </div>
                                        <div class="column right aligned">
                                            <div class="ui right dropdown type jump item">
                                                <span class="text">
                                                    {{.i18n.Tr "repo.issues.filter_sort"}}<i class="dropdown icon"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
            
                                <!-- 任务展示 -->
                                <div class="dataset list">
                                    {{range .Tasks}}
                                    <div class="ui grid stackable item">
                                        <div class="row">
                                            <!-- 任务名 -->
                                            <div class="four wide center column">
                                                <a class="title" href="{{$.Link}}/{{.JobID}}">
                                                    <!-- <span class="fitted">{{svg "octicon-tasklist" 16}}</span> -->
                                                    <span class="fitted">{{.JobName}}</span>
                                                </a>
                                            </div>
            
                                            <!--任务状态 -->
                                            <div class="five wide center column job-status" id="{{.JobID}}" data-repopath="{{$.RepoRelPath}}" data-jobid="{{.JobID}}">
                                                {{.Status}}
                                            </div>

                                            <!-- 运行时长 -->
                                            <div class="three wide center column">
                                                <span class="ui text center">{{svg "octicon-flame" 16}} {{TimeSinceUnix .CreatedUnix $.Lang}}</span>
                                            </div>
            
                                            <!-- 删除 -->
                                            <div class="two wide center column">
                                                <div class="ui text center clipboard">
                                                    <form id="delForm-{{.JobID}}" action="{{$.Link}}/{{.JobID}}/del" method="post">
                                                        {{$.CsrfTokenHtml}}
                                                        <a class="fitted" onclick="assertDelete(this)" style="font-size:16px; font-weight:bold">删除</a>
                                                    </form>
                                                </div>
                                            </div>
            
                                            <!-- 停止 -->
                                            <div class="two wide column">
                                                <div class="ui text center clipboard">
                                                    <form id="stopForm-{{.JobID}}" action="{{if ne .Status "RUNNING"}}javascript:void(0){{else}}{{$.Link}}/{{.JobID}}/stop{{end}}" method="post">
                                                        {{$.CsrfTokenHtml}}
                                                        <a class="fitted" onclick="document.getElementById('stopForm-{{.JobID}}').submit();" style="{{if ne .Status "RUNNING"}}color:#CCCCCC{{end}}; font-size:16px; font-weight:bold">停止</a>
                                                    </form>
                                                </div>
                                            </div>
            
                                        </div>
                                    </div>
                                    {{end}} {{template "base/paginate" .}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 确认模态框 -->
    <div id="deletemodel">
        <div class="ui basic modal">
            <div class="ui icon header">
                <i class="trash icon"></i> 删除任务
            </div>

            <div class="content">
                <p>你确认删除该任务么？此任务一旦删除不可恢复。</p>
            </div>
            <div class="actions">
                <div class="ui red basic inverted cancel button">
                    <i class="remove icon"></i> 取消操作
                </div>
                <div class="ui green basic inverted ok button">
                    <i class="checkmark icon"></i> 确定操作
                </div>
            </div>
        </div>
    </div>
</div>
{{template "base/footer" .}}

<script>
    $(".vertical.menu a").click(function(){
        $(this).siblings().removeClass("activate")
        $(this).addClass("activate")
    })

    
    // 删除时用户确认
    function assertDelete(obj) {
        if (obj.style.color == "rgb(204, 204, 204)") {
            return
        } else {
            var delId = obj.parentNode.id
            flag = 1;
            $('.ui.basic.modal')
                .modal({
                    onDeny: function() {
                        flag = false
                    },
                    onApprove: function() {
                        document.getElementById(delId).submit()
                        flag = true
                    },
                    onHidden: function() {
                        if (flag == false) {
                            $('.alert').html('您已取消操作').removeClass('alert-success').addClass('alert-danger').show().delay(1500).fadeOut();
                        }
                    }
                })
                .modal('show')
        }
    }

    // 加载任务状态
    $(document).ready(function() {
        $(".job-status").each((index, job) => {
            const jobID = job.dataset.jobid;
            const repoPath = job.dataset.repopath;
            if (job.textContent.trim() == 'STOPPED') {
                return
            }

            $.get(`/api/v1/repos/${repoPath}/modelarts/train-job/${jobID}`, (data) => {
                const jobID = data.JobID
                const status = data.JobStatus
                $('#' + jobID).text(status)
                    // console.log(data)
            }).fail(function(err) {
                console.log(err);
            });
        });
    });
</script>