{#{% extends 'base.html' %}#}
{% extends '_base_create_update.html' %}
{% load static %}
{% load bootstrap3 %}
{% load i18n %}
{% load common_tags %}

{% block content %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>{{ action }}</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>

                    <div class="ibox-content">
                        <form action="" method="POST" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-md-2 control-label" for="id_type">{% trans "Type" %}</label>
                                <div class="col-md-9">
                                    <select id="id_type" class="selector form-control">
                                        <option value ="server" selected="selected">server</option>
                                        <option value ="s3">s3</option>
                                        <option value="oss">oss</option>
                                        <option value ="azure">azure</option>
{#                                        <option value="ceph">ceph</option>#}
                                    </select>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-md-2 control-label" for="id_name">{% trans "Name" %}</label>
                                <div class="col-md-9">
                                    <input id="id_name" class="form-control" type="text" name="NAME" value="">
                                    <div id="id_error" style="color: red;"></div>
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_host">{% trans "Host" %}</label>
                                <div class="col-md-9">
                                    <input id="id_host" class="form-control" type="text" name="HOSTNAME" value="" placeholder="Host">
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_port">{% trans "Port" %}</label>
                                <div class="col-md-9">
                                    <input id="id_port" class="form-control" type="text" name="PORT" value="" placeholder="7480">
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_bucket">{% trans "Bucket" %}</label>
                                <div class="col-md-9">
                                    <input id="id_bucket" class="form-control" type="text" name="BUCKET" value="" placeholder="Bucket">
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_access_key">{% trans "Access key" %}</label>
                                <div class="col-md-9">
                                    <input id="id_access_key" class="form-control" type="text" name="ACCESS_KEY" value="" placeholder="Access key">
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_secret_key">{% trans "Secret key" %}</label>
                                <div class="col-md-9">
                                    <input id="id_secret_key" class="form-control" type="text" name="SECRET_KEY" value="", placeholder="Secret key">
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_container_name">{% trans "Container name" %}</label>
                                <div class="col-md-9">
                                    <input id="id_container_name" class="form-control" type="text" name="CONTAINER_NAME" value="" placeholder="Container">
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_account_name">{% trans "Account name" %}</label>
                                <div class="col-md-9">
                                    <input id="id_account_name" class="form-control" type="text" name="ACCOUNT_NAME" value="" placeholder="Account name">
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_account_key">{% trans "Account key" %}</label>
                                <div class="col-md-9">
                                    <input id="id_account_key" class="form-control" type="text" name="ACCOUNT_KEY" value="" placeholder="Account key">
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_endpoint">{% trans "Endpoint" %}</label>
                                <div class="col-md-9">
                                    <input id="id_endpoint" class="form-control" type="text" name="ENDPOINT" value="" placeholder="Endpoint">
                                    <div id="endpoint_error" style="color: red;"></div>
                                    <div class="help-block">
                                        <span class="oss">
                                            {% trans 'OSS: http://{REGION_NAME}.aliyuncs.com' %}
                                            <br>
                                            {% trans 'Example: http://oss-cn-hangzhou.aliyuncs.com' %}
                                        </span>
                                        <span class="s3">{% trans 'S3: http://s3.{REGION_NAME}.amazonaws.com' %}<br></span>
                                        <span class="s3">{% trans 'S3(China): http://s3.{REGION_NAME}.amazonaws.com.cn' %}<br></span>
                                        <span class="s3">{% trans 'Example: http://s3.cn-north-1.amazonaws.com.cn' %}<br></span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_endpoint_suffix">{% trans "Endpoint suffix" %}</label>
                                <div class="col-md-9">
                                    <select id="id_endpoint_suffix" name="ENDPOINT_SUFFIX" class="endpoint-suffix-selector form-control">
                                        <option value="core.chinacloudapi.cn" selected="selected">core.chinacloudapi.cn</option>
                                        <option value="core.windows.net">core.windows.net</option>
                                    </select>
                                </div>
                            </div>

                            <div class="form-group" style="display: none;" >
                                <label class="col-md-2 control-label" for="id_region">{% trans "Region" %}</label>
                                <div class="col-md-9">
                                    <input id="id_region" class="form-control" type="text" name="REGION" value="" placeholder="">
                                    <div class="help-block">
                                        <span class="s3">
                                            {% trans 'Beijing: cn-north-1' %}
                                            {% trans 'Ningxia: cn-northwest-1' %}
                                            <a href="https://docs.aws.amazon.com/zh_cn/general/latest/gr/rande.html">{% trans 'More' %}</a>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-default" type="reset"> {% trans 'Reset' %}</button>
                                    <a class="btn btn-primary" type="" id="id_submit_button" >{% trans 'Submit' %}</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block custom_foot_js %}
<script>

var field_of_all, need_get_field_of_server, need_get_field_of_s3,
    need_get_field_of_oss, need_get_field_of_azure, need_get_field_of_ceph;

function showField(field){
    $.each(field, function(index, value){
        $(value).parent('div').parent('div').css('display', '');
    });
}

function hiddenField(field){
    $.each(field, function(index, value){
        $(value).parent('div').parent('div').css('display', 'none');
    })
}

function getFieldByType(type){
    if(type === 'server'){
        return need_get_field_of_server
    }
    else if(type === 's3'){
        return need_get_field_of_s3
    }
    else if(type === 'oss'){
        return need_get_field_of_oss
    }
    else if(type === 'azure'){
        return need_get_field_of_azure
    }
    else if(type === 'ceph'){
        return need_get_field_of_ceph
    }
}

function ajaxAPI(url, data, success, error){
    $.ajax({
        url: url,
        data: data,
        method: 'POST',
        contentType: 'application/json; charset=utf-8',
        success: success,
        error: error
    })
}

$(document).ready(function() {
    var name_id = '#id_name';
    var host_id = '#id_host';
    var port_id = '#id_port';
    var bucket_id = '#id_bucket';
    var access_key_id = '#id_access_key';
    var secret_key_id = '#id_secret_key';
    var container_name_id = '#id_container_name';
    var account_name_id = '#id_account_name';
    var account_key_id = '#id_account_key';
    var endpoint_id = '#id_endpoint';
    var endpoint_suffix_id = '#id_endpoint_suffix';
    var region_id = '#id_region';

    field_of_all = [name_id, host_id, port_id, bucket_id, access_key_id, secret_key_id, container_name_id, account_name_id, account_key_id, endpoint_id, endpoint_suffix_id, region_id];
    need_get_field_of_server = [name_id];
    need_get_field_of_s3 = [name_id, bucket_id, access_key_id, secret_key_id, endpoint_id];
    need_get_field_of_oss = [name_id, bucket_id, access_key_id, secret_key_id, endpoint_id];
    need_get_field_of_azure = [name_id, container_name_id, account_name_id, account_key_id, endpoint_suffix_id];
    need_get_field_of_ceph = [name_id, host_id, port_id, bucket_id, access_key_id, secret_key_id, region_id];
})
.on('change', '.selector', function(){
    var type = $('.selector').val();
    $("." + type).show();
    hiddenField(field_of_all);
    $('.help-block').children().hide();
    $('.help-block ' + '.' + type).show();
    var field = getFieldByType(type);
    showField(field)
})

.on('click', '#id_submit_button', function(){
    $('#id_error').html('');
    var submitBtn = $("#id_submit_button");
    var origin_text = submitBtn.html();
    submitBtn.addClass('disabled');
    submitBtn.html("{% trans 'Submitting' %}");
    var type = $('.selector').val();
    var field = getFieldByType(type);
    var data = {'TYPE': type};
    $.each(field, function(index, id_field){
        var name = $(id_field).attr('name');
        data[name] = $(id_field).val();
    });
    if (data['ENDPOINT'] && data['ENDPOINT'].indexOf('http') === -1) {
        var msg = "{% trans 'Endpoint need contain protocol, ex: http' %}";
        $("#endpoint_error").html(msg);
        submitBtn.removeClass('disabled');
        submitBtn.html(origin_text);
        return
    }
    var url = "{% url 'api-settings:replay-storage-create' %}";
    var success = function(data, textStatus) {
        location = "{% url 'settings:terminal-setting' %}";
        submitBtn.removeClass('disabled');
        submitBtn.html(origin_text);
    };
    var error = function(data,  textStatus) {
        var error_msg = data.responseJSON.error;
        $('#id_error').html(error_msg);
        submitBtn.removeClass('disabled');
        submitBtn.html(origin_text);
    };
    ajaxAPI(url, JSON.stringify(data), success, error);
})
</script>
{% endblock %}
