{{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;
    margin-left: 10px;
}
.width85{
    width: 85% !important;
    margin-left: 4.5rem !important;
}
.width81{
    margin-left: 1.5rem;
    width: 81% !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;
}

</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.evaluate_job.new_job"}}
        </h4>
        <div class="ui attached segment">
            <!-- equal width  -->
            <form class="ui form" action="{{.Link}}" method="post">
                {{.CsrfTokenHtml}}
                <input type="hidden" name="action" value="update">
  
                
                <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: 80%;" 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)">{{.description}}</textarea>
                </div>

                 <div class="required unite min_title inline field">
                        <label style="font-weight: normal;">GPU类型</label>
                        <select id="cloudbrain_gpu_type" class="ui search dropdown" placeholder="选择GPU类型" style='width:385px' name="gpu_type">
                            {{range .benchmark_gpu_types}}
                                <option value="{{.Queue}}">{{.Value}}</option>
                            {{end}}
                        </select>
                </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.cloudbrain.benchmark.evaluate_type"}}</label>
                         <span>&nbsp;</span>
                         <select class="ui fluid selection search dropdown" id="benchmark_types_id" name="benchmark_types_id" >
                            {{range .benchmark_types}}
                                {{if eq .Id $.benchmarkTypeID}}
                                    <option value="{{.Id}}" selected="true">{{.First}}</option>
                                {{else}}
                                    <option value="{{.Id}}">{{.First}}</option>
                                {{end}}
                            {{end}}
                        </select>
                      </div>
                      <div class="eight wide field" id="engine_name">
                        <input type="hidden" id="benchmark_child_types_id_hidden" name="benchmark_child_types_id_hidden" value="{{.benchmark_child_types_id_hidden}}">
                        <label style="font-weight: normal;white-space: nowrap;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_child_type"}}</label>
                        <select class="ui fluid selection dropdown nowrap" id="benchmark_child_types_id" style='width: 100%;' name="benchmark_child_types_id">
                        </select>
                      </div>
                </div>

                <div class="required unite min_title inline field">
                     <label style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_mirror"}}</label>
                     <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                        <input type="text" list="cloudbrain_image" placeholder="选择镜像" name="image" value="{{.image}}" class="required autofocus" style='width:492px;' maxlength="254">
                        <i class="times circle outline icon icons" style="visibility: hidden;" onclick="clearValue()"></i>
                        <datalist class="ui search" id="cloudbrain_image" style='width:385px;' name="image">
                            {{range .images}}
                                <option name="image" value="{{.Place}}">{{.PlaceView}}</option>
                            {{end}}
                            {{range .public_images}}
                                <option name="image" value="{{.Place}}">{{.PlaceView}}</option>
                            {{end}}
                        </datalist>
                </div>

               

                <div class="required unite min_title inline field">
                        <label style="font-weight: normal;">资源规格</label>
                        <select id="cloudbrain_resource_spec" class="ui search dropdown" placeholder="选择资源规格" style='width:385px' name="resource_spec_id">
                            {{range .benchmark_resource_specs}}
                                <option name="resource_spec_id" value="{{.Id}}">GPU数：{{.GpuNum}}，CPU数：{{.CpuNum}}，内存(MB)：{{.MemMiB}}，共享内存(MB)：{{.ShareMemMiB}}</option>
                            {{end}}
                        </select>
                </div>

                <div class="inline unite min_title field required">
                        <label style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_train"}}</label>
                        <input disabled="disabled" style="width: 33.5%;" name="train_file" id="train_file" value="train.py" tabindex="3" autofocus required maxlength="254" >
                        <a  href="https://git.openi.org.cn/CV_benchmark/CV_reID_benchmark" target="_blank">查看样例</a>
                </div>

                <div class="inline unite min_title field required">
                        <label style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_test"}}</label>
                        <input disabled="disabled" style="width: 33.5%;" name="test_file" id="test_file" value="test.py" tabindex="3" autofocus required maxlength="254" >
                        <a  href="https://git.openi.org.cn/CV_benchmark/CV_reID_benchmark" target="_blank">查看样例</a>
                </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>
    let repolink =  {{.RepoLink}}

    let url_href = window.location.pathname.split('create')[0]
    $(".ui.button").attr('href',url_href)

    $('.menu .item')
        .tab();

    $('#benchmark_types_id').change(function(){
        setChildType();
    })

    function setChildType(){
        let type_id = $('#benchmark_types_id').val();
        let child_selected_id =  $('#benchmark_child_types_id_hidden').val();
        $.get(`${repolink}/cloudbrain/benchmark/get_child_types?benchmark_type_id=${type_id}`, (data) => {
            const n_length = data['child_types'].length
            let html=''
            for (let i=0;i<n_length;i++){
                if(child_selected_id == data['child_types'][i].id){
                    html += `<option value="${data['child_types'][i].id}" selected="true">${data['child_types'][i].value}</option>`;
                }else{
                    html += `<option value="${data['child_types'][i].id}">${data['child_types'][i].value}</option>`;
                }
            }
            document.getElementById("benchmark_child_types_id").innerHTML=html;
        })
    }

    document.onreadystatechange = function() {
        if (document.readyState === "complete") {
           setChildType();
        }
    }
  
    function validate(){
        $('.ui.form')
        .form({
            on: 'blur',
            inline:true,
            fields: {
                image:{
                    identifier  : 'image',
                    rules: [
                    {
                        type: 'empty',
                        prompt : '选择一个镜像'
                    }
                    ]

                }
            },
            onSuccess: function(){
                // $('.ui.page.dimmer').dimmer('show')
                document.getElementById("mask").style.display = "block"
            },
            onFailure: function(e){	
                return false;
            }
        })
    }


    $('.ui.create_train_job.green.button').click(function(e) {
        validate() 
    })
</script>