{{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;
        margin-bottom: 2rem !important;
    }

    .width81 {
        margin-left: 1.5rem;
        width: 81% !important;
    }

    .width48 {
        width: 48.5% !important;
    }

    .nowrapx {
        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.evaluate_job.new_job"}}
        </h4>
        <div class="ui attached segment">
            <input type="hidden" name="benchmarkMode" value="{{.benchmarkMode}}">

            {{if eq .benchmarkMode "model"}}
            <form class="ui form model_form" action="{{.Link}}?benchmarkMode=model" method="post">
                {{.CsrfTokenHtml}}
                <input type="hidden" name="action" value="update">
                <div class="required min_title inline field">
                    <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_scenes"}}</label>
                    <div class="ui blue small menu compact selectcloudbrain">
                        <a class="item alogrithm_benchmark"
                            href="{{.Link}}?benchmarkMode=alogrithm">{{.i18n.Tr "repo.cloudbrain.benchmark.algorithm"}}</a>
                        <a class="active item model_benchmark"
                            href="{{.Link}}?benchmarkMode=model">{{.i18n.Tr "repo.cloudbrain.benchmark.model"}}</a>
                    </div>
                    {{template "custom/wait_count_train" Dict "ctx" $ "type" .benchmark_gpu_types}}
                </div>
                <div>
                    <div class="required min_title inline field">
                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
                        <input style="width: 80%;" name="display_job_name" id="trainjob_job_name"
                            placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.display_job_name}}"
                            tabindex="3" autofocus required maxlength="254">
                        <span class="tooltips" style="display: block;margin-left:11.5rem;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>
                    </div>
                    <div class="required min_title inline field">
                        <label class="label-fix-width" style="font-weight: normal;"
                            for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</label>
                        <textarea style="width: 80%;" id="description" name="description" rows="3" required
                            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 min_title inline field">
                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.gpu_type"}}</label>
                        <select id="cloudbrain_gpu_type" class="ui search dropdown width48" placeholder="选择GPU类型"
                            name="gpu_type">
                            {{range .benchmark_gpu_types}}
                            <option value="{{.Queue}}">{{.Value}}</option>
                            {{end}}
                        </select>
                    </div>
                    <div class="required unite min_title two inline fields" style="margin-left: 80px;">
                        <div class="required ten wide field" style="width: 26.5% !important;">
                            <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.task_type"}}</label>&nbsp;
                            <select id="cloudbrain_job_type" class="ui search dropdown  job_type"
                                placeholder="select {{.i18n.Tr "cloudbrain.task_type"}}" name="job_type">
                                <option value="SNN4IMAGENET">SNN4IMAGENET</option>
                                <option value="BRAINSCORE">BRAINSCORE</option>
                            </select>
                        </div>
                        <div class="required six widde field" id="brainscore_child_type"
                            style="width: 15% !important;display: none;">
                            <label style="font-weight: normal;">{{.i18n.Tr "cloudbrain.brain_area"}}</label>
                            <select class="ui search dropdown" placeholder="select {{.i18n.Tr "cloudbrain.brain_area"}}"
                                name="benchmark_child_types_id">
                                <option value="0">V1</option>
                                <option value="1">V2</option>
                                <option value="2">V4</option>
                                <option value="3">IT</option>
                            </select>
                        </div>
                        <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 id="benchmark_model_example" href="https://git.openi.org.cn/BDIP/snn4imagenet"
                            target="_blank">{{.i18n.Tr "cloudbrain.view_sample"}}</a>
                    </div>

                    <div id="images-new-cb">
                    </div>
                    {{template "custom/select_dataset_train" .}}
                    <div class="required min_title inline field" style="margin-top:2rem;">
                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.resource_specification"}}</label>
                        <select id="cloudbrain_resource_spec" class="ui search dropdown"
                            placeholder="{{.i18n.Tr "cloudbrain.select_specification"}}" style='width:385px'
                            name="resource_spec_id">
                            {{range .benchmark_resource_specs}}
                            <option name="resource_spec_id" value="{{.Id}}">
                                {{$.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}}
                            </option>
                            {{end}}
                        </select>
                    </div>
                    <div class="inline min_title field">
                        <label class="label-fix-width" style="font-weight: normal;"></label>
                        <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>
                </div>
            </form>
            {{else}}
            <form class="ui form alogrithm_form" action="{{.Link}}?benchmarkMode=alogrithm" method="post">
                {{.CsrfTokenHtml}}
                <input type="hidden" name="action" value="update">
                <input type="hidden" name="job_type" value="BENCHMARK">
                <div class="required min_title inline field">
                    <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_scenes"}}</label>
                    <div class="ui blue small menu compact selectcloudbrain">
                        <a class="active item alogrithm_benchmark"
                            href="{{.Link}}?benchmarkMode=alogrithm">{{.i18n.Tr "repo.cloudbrain.benchmark.algorithm"}}</a>
                        <a class="item model_benchmark"
                            href="{{.Link}}?benchmarkMode=model">{{.i18n.Tr "repo.cloudbrain.benchmark.model"}}</a>
                    </div>
                    {{template "custom/wait_count_train" Dict "ctx" $ "type" .benchmark_gpu_types}}
                </div>

                <div>
                    <div class="required min_title inline field">
                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "repo.modelarts.train_job.job_name"}}</label>
                        <input style="width: 80%;" name="display_job_name" id="trainjob_job_name"
                            placeholder={{.i18n.Tr "repo.modelarts.train_job.job_name"}} value="{{.display_job_name}}"
                            tabindex="3" autofocus required maxlength="254">
                        <span class="tooltips" style="display: block;margin-left: 11.5rem;">{{.i18n.Tr "cloudbrain.job_name_rule"}}</span>
                    </div>
                    <div class="min_title inline field">
                        <label class="label-fix-width" style="font-weight: normal;"
                            for="description">{{.i18n.Tr "repo.modelarts.train_job.description"}}</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 min_title inline field">
                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.gpu_type"}}</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%;margin-left: 5.7rem;">&nbsp;
                        <div class="required eight wide field">
                            <label
                                style="font-weight: normal;white-space: nowrap;">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_type"}}</label>
                            
                            <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 nowrapx" id="benchmark_child_types_id"
                                style='width: 100%;' name="benchmark_child_types_id">
                            </select>
                        </div>
                    </div>
                    <div id="images-new-cb">
                    </div>

                    <div class="required min_title inline field">
                        <label class="label-fix-width" style="font-weight: normal;">{{.i18n.Tr "cloudbrain.resource_specification"}}</label>
                        <select id="cloudbrain_resource_spec" class="ui search dropdown"
                            placeholder="{{.i18n.Tr "cloudbrain.select_specification"}}" style='width:385px'
                            name="resource_spec_id">
                            {{range .benchmark_resource_specs}}
                            <option name="resource_spec_id" value="{{.Id}}">
                                {{$.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}}
                            </option>
                            {{end}}
                        </select>
                    </div>

                    <div class="inline min_title field required">
                        <label class="label-fix-width" 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 id="train_href_id" href="https://git.openi.org.cn/CV_benchmark/CV_reID_benchmark"
                            target="_blank">{{.i18n.Tr "repo.cloudbrain.benchmark.evaluate_train"}}</a>
                    </div>

                    <div class="inline min_title field required">
                        <label class="label-fix-width" 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 id="test_href_id" href="https://git.openi.org.cn/CV_benchmark/CV_reID_benchmark"
                            target="_blank">{{.i18n.Tr "cloudbrain.view_sample"}}</a>
                    </div>


                    <div class="inline unite min_title field">
                        <label class="label-fix-width" style="font-weight: normal;"></label>
                        <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>
                </div>
            </form>
            {{end}}
        </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();
    })
    $(document).ready(() => {
        $('.ui.search.dropdown.job_type').dropdown({
            onChange: function (value, text, $selectedItem) {
                if (value === "BRAINSCORE") {
                    $('#brainscore_child_type').css('display', 'block')
                    $('#benchmark_model_example').attr('href', 'https://git.openi.org.cn/BDIP/similarity2brain_ann')
                } else {
                    $('#brainscore_child_type').css('display', 'none')
                    $('#benchmark_model_example').attr('href', 'https://git.openi.org.cn/BDIP/snn4imagenet')
                }
            }
        })
    })
    function setChildType() {
        let type_id = $('#benchmark_types_id').val();
        if (type_id == 3) {
            $('#train_href_id').attr('href', 'https://git.openi.org.cn/CV_benchmark/CV_MOT_benchmark');
            $('#test_href_id').attr('href', 'https://git.openi.org.cn/CV_benchmark/CV_MOT_benchmark');
        } else {
            $('#train_href_id').attr('href', 'https://git.openi.org.cn/CV_benchmark/CV_reID_benchmark');
            $('#test_href_id').attr('href', 'https://git.openi.org.cn/CV_benchmark/CV_reID_benchmark');
        }
        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") {
            if ($('input[name=benchmarkMode]').val() === 'alogrithm' || $('input[name=benchmarkMode]').val() === '') {
                setChildType();
            }
        }
    }
    function validate() {
        $('.ui.form')
            .form({
                on: 'blur',
                fields: {
                    image: {
                        identifier: 'image',
                        rules: [
                            {
                                type: 'empty',
                                promt: ''
                            }
                        ]
                    },
                    display_job_name: {
                        identifier: 'display_job_name',
                        rules: [
                            {
                                type: 'regExp[/^[a-zA-Z0-9-_]{1,64}[a-zA-Z0-9_]$/]',
                                promt: ''
                            }
                        ]
                    },
                },
                onSuccess: function () {
                    // $('.ui.page.dimmer').dimmer('show')
                    document.getElementById("mask").style.display = "block"
                },
                onFailure: function (e) {
                    return false;
                }
            })
    }

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