{% extends "layout.html" %}
{% block head %}
    {{ super() }}

    <style type="text/css">

        label>span {
            color: deepskyblue;
        }

        .btn,
        .form-group>div>div,
        .form-control {
            border-radius: 0;
        }

        .form-horizontal > .form-group {
            margin: 0;
        }
    </style>
{% endblock head %}
{% block body %}
<script>
    $(document).ready(function() {
        $('body').addClass('add-transition');
        $('.add-page-transition').on('click', function(){
            var transAttr = $(this).attr('data-transition');
            $('.add-transition').attr('class', 'add-transition');
            $('.add-transition').addClass(transAttr);
        });

        $('#storage_mode').on('changed.bs.select', function (me) {
            if ($('#storage_mode').val() === '2' || $('#storage_mode').val() === '3') {
                $('#dfs_volume_label').css('display', 'unset');
                $('#dfs_volume').css('display', 'unset');
            } else {
                $('#dfs_volume_label').css('display', 'none');
                $('#dfs_volume').css('display', 'none');
            }
        });
    });

    function hdd_type_select(me) {
        var hdd_type = $(me).val();

        if (hdd_type === 'sas') {
            $('#iops_base').val('1000');
            $('#iops_pre_unit').val('1');
            $('#iops_cap').val('2000');
            $('#iops_max').val('3000');
            $('#iops_max_length').val('20');
            // 200 MiB
            $('#bps_base').val('209715200');
            // 0.3 MiB
            $('#bps_pre_unit').val('314572');
            // 500 MiB
            $('#bps_cap').val('524288000');
            // 1 GiB
            $('#bps_max').val('1073741824');
            $('#bps_max_length').val('10')

        } else if (hdd_type === 'ssd') {
            $('#iops_base').val('1000');
            $('#iops_pre_unit').val('30');
            $('#iops_cap').val('10000');
            $('#iops_max').val('20000');
            $('#iops_max_length').val('20');
            $('#bps_base').val('209715200');
            // 1 MiB
            $('#bps_pre_unit').val('1048576');
            $('#bps_cap').val('524288000');
            $('#bps_max').val('1073741824');
            $('#bps_max_length').val('10')

        } else {
            $('#iops_base').val('100');
            $('#iops_pre_unit').val('0');
            $('#iops_cap').val('100');
            $('#iops_max').val('200');
            $('#iops_max_length').val('20');
            // 30 MiB
            $('#bps_base').val('31457280');
            // 0.1 MiB
            $('#bps_pre_unit').val('104857');
            // 50 MiB
            $('#bps_cap').val('52428800');
            // 100 MiB
            $('#bps_max').val('104857600');
            $('#bps_max_length').val('10')
        }
    }
</script>
    <div class="container" style="padding-top: 100px;">
        <div class="panel">
            <div class="panel-body">
                <h3 class="title-hero" style="text-transform: unset;">
                    初始化 JimV
                </h3>
                <div class="example-box-wrapper">
                    <form class="form-horizontal bordered-row" action="/config/create" method="post">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">网桥(业务网络)</label>
                            <div class="col-sm-3">
                                <input title="Guest 业务网络" class="form-control" name="vm_network" type="text" value="net-br0">
                            </div>
                            <label class="col-sm-2 control-label">网桥(管理网络)</label>
                            <div class="col-sm-3">
                                <input title="Guest 管理网络" class="form-control" name="vm_manage_network" type="text" value="net-br0">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">起始 IP</label>
                            <div class="col-sm-3">
                                <input title="起始 IP" class="form-control" name="start_ip" type="text" value="10.10.1.1">
                            </div>
                            <label class="col-sm-2 control-label">截止 IP</label>
                            <div class="col-sm-3">
                                <input title="截止 IP" class="form-control" name="end_ip" type="text" value="10.10.15.253">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">子网掩码</label>
                            <div class="col-sm-3">
                                <input title="子网掩码" class="form-control" name="netmask" type="text" value="255.255.240.0">
                            </div>
                            <label class="col-sm-2 control-label">网关</label>
                            <div class="col-sm-3">
                                <input title="网关" class="form-control" name="gateway" type="text" value="10.10.15.254">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">DNS1</label>
                            <div class="col-sm-3">
                                <input title="DNS1" class="form-control" name="dns1" type="text" value="223.5.5.5">
                            </div>
                            <label class="col-sm-2 control-label">DNS2</label>
                            <div class="col-sm-3">
                                <input title="DNS2" class="form-control" name="dns2" type="text" value="8.8.8.8">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">起始 VNC 端口</label>
                            <div class="col-sm-3">
                                <input title="起始 VNC 端口" class="form-control" name="start_vnc_port" type="text" value="15900">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">虚拟机磁盘存储模式</label>
                            <div class="col-sm-3">
                                <select id="storage_mode" title="虚拟机磁盘存储模式" class="selectpicker" name="storage_mode" data-width="100%">
                                    <option value="0" selected>本地存储</option>
                                    <option value="1" data-subtext="NFS">挂载共享</option>
                                    <option value="2">Ceph</option>
                                    <option value="3">Glusterfs</option>
                                </select>
                            </div>
                            <label id="dfs_volume_label" class="col-sm-2 control-label" style="display: none;">分布式文件系统存储卷</label>
                            <div class="col-sm-3">
                                <input id="dfs_volume" title="分布式文件系统存储卷" class="form-control" name="dfs_volume" type="text" style="display: none;">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">虚拟机磁盘存放路径</label>
                            <div class="col-sm-3">
                                <input title="虚拟机磁盘存放路径" class="form-control" name="storage_path" type="text" value="/opt/Images">
                            </div>
                            <!-- HDD for Hard Disk Drive -->
                            <label id="hdd_type_label" class="col-sm-2 control-label">磁盘类型</label>
                            <div class="col-sm-1">
                                <label>STAT<input class="form-control" name="hdd_type" type="radio" value="stat" onclick="hdd_type_select(this)" /></label>
                            </div>
                            <div class="col-sm-1">
                                <label>SAS<input class="form-control" name="hdd_type" type="radio" checked value="sas" onclick="hdd_type_select(this)" /></label>
                            </div>
                            <div class="col-sm-1">
                                <label>SSD<input class="form-control" name="hdd_type" type="radio" value="ssd" onclick="hdd_type_select(this)" /></label>
                            </div>
                            <div>
                                <input class="form-control" id="iops_base" name="iops_base" type="hidden" value="1000" />
                                <input class="form-control" id="iops_pre_unit" name="iops_pre_unit" type="hidden" value="1" />
                                <input class="form-control" id="iops_cap" name="iops_cap" type="hidden" value="2000" />
                                <input class="form-control" id="iops_max" name="iops_max" type="hidden" value="3000" />
                                <input class="form-control" id="iops_max_length" name="iops_max_length" type="hidden" value="20" />
                                <input class="form-control" id="bps_base" name="bps_base" type="hidden" value="209715200" />
                                <input class="form-control" id="bps_pre_unit" name="bps_pre_unit" type="hidden" value="314572" />
                                <input class="form-control" id="bps_cap" name="bps_cap" type="hidden" value="524288000" />
                                <input class="form-control" id="bps_max" name="bps_max" type="hidden" value="1073741824" />
                                <input class="form-control" id="bps_max_length" name="bps_max_length" type="hidden" value="10" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label"></label>
                            <div class="col-sm-3 pull-right">
                                <button class="btn btn-blue-alt" style="width: 180px; height: 40px; font-size: 16px;">初始化</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock body %}