{{ header }} {{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="form-inline pull-right">
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default">
                    <i class="fa fa-reply"></i>
                </a>
            </div>
            <h1>{{ heading_title }} {{ version }}</h1>
            <ul class="breadcrumb">
                {% for breadcrumb in breadcrumbs %}
                    <li>
                        <a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    <i class="fa fa-pencil"></i> {{ text_edit }}</h3>
            </div>
            <div class="panel-body">
                <style>
                    a#button-menu {
                        -webkit-appearance: none !important;
                    }

                    .welcome {
                        background: url('view/image/d_ajax_filter/icons/icons_in_footer.svg');
                        background-position: bottom;
                        background-repeat: repeat-x;
                        background-size: 70%;
                        min-height: 1025px;
                        padding-top: 50px;
                        padding-bottom: 475px;
                    }

                    .welcome-into {
                        text-align: center;
                        max-width: 500px;
                        margin: auto;
                    }

                    .welcome-into-logo {
                        padding-bottom: 15px;
                    }

                    .welcome-into-logo img {
                        max-height: 176px;
                    }

                    .welcome-into-heading {
                        font-size: 30px;
                        font-weight: bold;
                        padding-bottom: 15px;
                    }

                    .welcome-into-text {
                        font-size: 18px;
                        padding-bottom: 30px;
                    }

                    .welcome-into-start {
                        padding-bottom: 30px;
                    }

                    .welcome-features {
                        padding: 30px;
                    }

                    .welcome-features-icon {
                        padding: 20px;
                        height: 130px;
                        text-align: center;
                    }

                    .welcome-features img {
                        width: 80px;
                        height: 80px;
                    }

                    .welcome-features-text {
                        text-align: center;
                        font-weight: bold;
                        font-size: 16px;
                    }

                    .panel .panel-body {
                        padding: 0px;
                    }
                </style>
                <div class="welcome">
                    <div class="welcome-into">
                        <div class="welcome-into-logo">
                            <img src="view/image/d_ajax_filter/icons/main_icon_af.svg"/>
                        </div>
                        <div class="welcome-into-heading">{{ text_welcome_title }}</div>
                        <div class="welcome-into-text">{{ text_welcome_description }}</div>

                        <div class="welcome-into-start">
                            <a class="btn btn-primary btn-lg addSetting">{{ button_setup }}</a>
                        </div>
                    </div>
                    <div class="welcome-features">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="welcome-features-icon">
                                    <img src="view/image/d_ajax_filter/icons/easy_setup.svg"/>
                                </div>
                                <div class="welcome-features-text">{{ text_welcome_easy_setup }}</div>
                            </div>
                            <div class="col-md-3">
                                <div class="welcome-features-icon">
                                    <img src="view/image/d_ajax_filter/icons/filter_attributes.svg"/>
                                </div>
                                <div class="welcome-features-text">{{ text_welcome_filter_by }}</div>
                            </div>
                            <div class="col-md-3">
                                <div class="welcome-features-icon">
                                    <img src="view/image/d_ajax_filter/icons/vertical_horizontal.svg"/>
                                </div>
                                <div class="welcome-features-text">{{ text_welcome_vertical_and_horizontal }}</div>
                            </div>
                            <div class="col-md-3">
                                <div class="welcome-features-icon">
                                    <img src="view/image/d_ajax_filter/icons/100000_products.svg"/>
                                </div>
                                <div class="welcome-features-text">{{ text_welcome_fast }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).on('click', '.addSetting', function () {
        $.ajax({
            type: 'post',
            url: '{{ quick_setup }}',
            dataType: 'json',
            beforeSend: function () {
                $('#form').fadeTo('slow', 0.5);
            },
            complete: function () {
                $('#form').fadeTo('slow', 1);
            },
            success: function (json) {
                location.href = json.redirect;
            }
        });

    })
</script>
{{ footer }}