{{template "base/head" .}}
<style>

.unite{
    font-family: SourceHanSansSC-medium !important;
    color: rgba(16, 16, 16, 100) !important;
}

.title{
    font-size: 16px !important;
    padding-left: 3rem !important;
}
.min_title{
    font-size: 14px !important;
    padding-left: 6rem !important;
    margin-bottom: 2rem !important;

}
.width{
    width:100% !important;
}
.width80{
    width: 80.7% !important;
}
.width85{
    width: 85% !important;
    margin-left: 4.5rem !important;
}
.width35{
    width: 35.5% !important;
}

.add{font-size: 18px;
    padding: 0.5rem;
    border: 1px solid rgba(187, 187, 187, 100);
    border-radius: 0px 5px 5px 0px;
    line-height: 21px;
    text-align: center;
    color: #C2C7CC;
}
.min{
    font-size: 18px;
    padding: 0.5rem;
    border: 1px solid rgba(187, 187, 187, 100);
    border-radius: 5px 0px 0px 5px;
    line-height: 21px;
    text-align: center;
    color: #C2C7CC;
}
.nowrap {
    white-space: nowrap !important;
}
</style>
<!-- <div class="ui page dimmer">
    <div class="ui text loader">{{.i18n.Tr "loading"}}</div>
</div> -->
<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">
        {{template "base/alert" .}}
        <h4 class="ui top attached header">
            {{.i18n.Tr "repo.modelarts.train_job.new"}}
        </h4>
        <div class="ui attached segment">
            <!-- equal width  -->
            <form class="ui form" action="{{.Link}}" method="post">
                {{.CsrfTokenHtml}}
                <input type="hidden" name="action" value="update">
                <input type="hidden" id="ai_engine_name" name="engine_names" value="">
                <input type="hidden" id="ai_flaver_name" name="flaver_names" value="">
                <h4 class="unite title ui header ">{{.i18n.Tr "repo.modelarts.train_job.basic_info"}}:</h4>
                <div class="required unite min_title inline field">
                    <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
                    <input style="width: 60%;" name="job_name" id="trainjob_job_name" placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.job_name}}" tabindex="3" autofocus required maxlength="254">
                </div>
                
                <div class="unite min_title inline field">
                    <label style="font-weight: normal;" for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}&nbsp;&nbsp;</label>
                    <textarea style="width: 80%;" id="description" name="description" rows="3" maxlength="254" placeholder={{.i18n.Tr "repo.modelarts.train_job.new_place"}} onchange="this.value=this.value.substring(0, 255)" onkeydown="this.value=this.value.substring(0, 255)" onkeyup="this.value=this.value.substring(0, 255)"></textarea>
                </div>
                <div class="ui divider"></div>

                <h4 class="unite title ui header ">{{.i18n.Tr "repo.modelarts.train_job.parameter_setting"}}:</h4>
                
                <div class="required unite inline min_title  fields" style="width: 90%;">
                    <div class="required eight wide field">
                        <label style="font-weight: normal;white-space: nowrap;">{{.i18n.Tr "repo.modelarts.infer_job.select_model"}}&nbsp;&nbsp;</label>
                        <!-- <select class="ui fluid selection dropdown" id="select_model">
                            <option value="">选择当前项目下的模型</option>
                            <option value="0">Cat</option>
                            <option value="1">Dog</option>
                            <option value="2">Bird</option>
                            <option value="3">Rabbit</option>
                            <option value="4">Squirrel</option>
                            <option value="5">Horse</option>
                            <option value="6">Turtle</option>
                            <option value="7">Parrot</option>
                        </select> -->
                        <div class="ui search selection dropdown" id="select_model">
                                <div class="text">Search</div>
                        </div>
                      </div>
                      <div class="three wide field">
                        <select class="ui fluid selection dropdown">
                            <option value="">选择版本</option>
                            <option value="0">Cat</option>
                            <option value="1">Dog</option>
                            <option value="2">Bird</option>
                            <option value="3">Rabbit</option>
                            <option value="4">Squirrel</option>
                            <option value="5">Horse</option>
                            <option value="6">Turtle</option>
                            <option value="7">Parrot</option>
                          </select>
                      </div>
                      <div class="five wide field">
                        <select class="ui fluid selection dropdown">
                            <option value="">选择模型.ckpt文件</option>
                            <option value="0">Cat</option>
                            <option value="1">Dog</option>
                            <option value="2">Bird</option>
                            <option value="3">Rabbit</option>
                            <option value="4">Squirrel</option>
                            <option value="5">Horse</option>
                            <option value="6">Turtle</option>
                            <option value="7">Parrot</option>
                          </select>
                      </div>
                </div>
                <div class="required unite inline min_title  fields" style="width: 90%;">
                    <div class="required eight wide field">
                        <label style="font-weight: normal;white-space: nowrap;">{{.i18n.Tr "repo.modelarts.train_job.AI_driver"}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                        <select class="ui fluid selection search dropdown" id="trainjob_engines">
                            {{range .engines}}
                                <option value="{{.Value}}">{{.Value}}</option>
                            {{end}}
                          </select>
                      </div>
                      <div class="eight wide field">
                        <select class="ui fluid selection dropdown nowrap" id="trainjob_engine_versions" name="engine_id" style="white-space: nowrap;">
                            {{range .engine_versions}}
                                <option name="engine_id" value="{{.ID}}">{{.Value}}</option>
                            {{end}}
                        </select>
                      </div>
                </div>

                <div class="required unite min_title inline field">
                        <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.code_version"}}&nbsp;</label>
                        <select class="ui dropdown width35" id="code_version" name="branch_name">
                            {{if .branch_name}}
                                <option name="branch_name" value="{{.branch_name}}">{{.branch_name}}</option>
                                {{range $k, $v :=.Branches}}
                                    {{ if ne $v $.branch_name }}
                                    <option name="branch_name" value="{{$v}}">{{$v}}</option>
                                    {{end}}
                                {{end}}
                            {{else}}
                                <option name="branch_name" value="{{.branchName}}">{{.branchName}}</option>
                                {{range $k, $v :=.Branches}}
                                    {{ if ne $v $.branchName }}
                                    <option name="branch_name" value="{{$v}}">{{$v}}</option>
                                    {{end}}
                                {{end}}
                            {{end}}
                        </select>
                </div>
                <div class="required unite min_title inline field">
                    <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.dataset"}}&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <select class="ui dropdown width35" id="trainjob_datasets" name="attachment" placeholder="选择数据集">
                        {{if $.uuid}}
                            <option name="attachment" value="{{$.uuid}}">{{$.datasetName}}</option>
                        {{end}}
                        {{range .attachments}}
                            <option value="">选择数据集</option>
                            <option name="attachment" value="{{.UUID}}">{{.Attachment.Name}}</option>
                        {{end}}
                    </select>
                    <span class="tooltips" style="display: block;">数据集位置存储在环境变量data_url中，训练输出路径存储在环境变量train_url中。</span>
                </div>

                <div class="inline unite min_title field required">
                        <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.start_file"}}</label>
                        {{if .bootFile}}
                            <input style="width: 35.5%;" name="boot_file" id="trainjob_boot_file" value="{{.bootFile}}" tabindex="3" autofocus required maxlength="254" >
                        {{else}}
                            <input style="width: 35.5%;" name="boot_file" id="trainjob_boot_file" value="" tabindex="3" autofocus required maxlength="254" >
                        {{end}}
                        <span>
                            <i class="question circle icon  link" data-content={{.i18n.Tr "repo.modelarts.train_job.boot_file_helper"}} data-position="right center" data-variation="mini"></i>
                        </span>
                        <a  href="https://git.openi.org.cn/OpenIOSSG/MINIST_Example" target="_blank">查看样例</a>
                </div>
                
                
                <div class="inline unite min_title field">
                    <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.run_parameter"}}</label>
                    <span id="add_run_para" style="margin-left: 0.5rem;cursor:pointer;color: rgba(3, 102, 214, 100);font-size: 14px;line-height: 26px;font-family: SourceHanSansSC-medium;"><i class="plus square outline icon"></i>{{.i18n.Tr "repo.modelarts.train_job.add_run_parameter"}}</span>
                    <input  id="store_run_para" type="hidden" name="run_para_list">
                    <div class="dynamic field" style="margin-top: 1rem;">
                    {{if ne 0 (len .params)}}
                        {{range $k ,$v := .params}}
                            <div class="two fields width85" id="para{{$k}}">
                                <div class="field">
                                    <input type="text" name="shipping_first-name" value={{$v.Label}} required>
                                </div>
                                <div class="field">
                                    <input type="text" name="shipping_last-name" value={{$v.Value}} required>
                                </div>
                                <span>
                                    <i class="trash icon"></i>
                                </span>

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


                <div class="required field " style="display: none;">
                    <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.resource_pool"}}</label>
                    <select class="ui dropdown" id="trainjob_resource_pool" style='width:385px' name="pool_id">
                        {{range .resource_pools}}
                            <option value="{{.ID}}">{{.Value}}</option>
                        {{end}}
                    </select>
                </div>

                <div class="required unite min_title inline field" id="flaver_name">
                    <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.standard"}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
                    <select class="ui dropdown width80" id="trainjob-flavor" name="flavor">
                        {{range .flavor_infos}}
                            <option name="flavor" value="{{.Code}}">{{.Value}}</option>
                        {{end}}
                    </select>
                </div>
                <div class="inline required unite min_title field">
                    <label style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.amount_of_compute_node"}}</label>
                    
                    <div class="ui labeled input" style="width: 5%;">
                        <input style="border-radius: 0;text-align: center;" name="work_server_number" id="trainjob_work_server_num" tabindex="3" autofocus required maxlength="254" value="1" readonly>
                    </div>
                </div>
                
                <div class="inline unite min_title field">
                    <button class="ui create_train_job green button">
                    {{.i18n.Tr "repo.cloudbrain.new"}}
                    </button>
                    <a class="ui button" href="/">{{.i18n.Tr "repo.cloudbrain.cancel"}}</a>
                </div>
                
                <!-- 模态框 -->
                
            </form>
        </div>
    </div>
</div>
{{template "base/footer" .}}

<script>
    console.log({{.RepoLink}})
    const RepoLink = {{.RepoLink}}
    const url_href = window.location.pathname.split('create')[0]
    $(".ui.button").attr('href',url_href)
    const changeOwner = function () {
        console.log($('#select_model'))
        
        $('#select_model')
        .dropdown({
            filterRemoteData: true,
            apiSettings: {
            
            url: `${RepoLink}/modelmanage/query_model_for_predict`,
            onResponse(response) {
                console.log(response)
            }
            },
        });
    };
    changeOwner();
    // $(function(){
    //     $('#select_model').dropdown({
    //     onChange:function(value){
    //         $(".ui.dropdown.selection.search.width70").addClass("loading")
    //         $('#choice_version').dropdown('clear')
    //         $("#job-version").empty()
    //         loadTrainVersion(value)
    //         },
    //     apiSettings: {
        
    //     url: `${RepoLink}/modelmanage/query_model_for_predict`
    //     },
    //     })
    // })
</script>