{{ 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">
        {% if error.warning %}
            <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error.warning }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}
        {% if success %}
            <div class="alert alert-success"><i class="fa fa-exclamation-circle"></i> {{ success }}
                <button type="button" class="close" data-dismiss="alert">&times;</button>
            </div>
        {% endif %}
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-pencil"></i> {{ text_form }}</h3>
            </div>
            <div class="panel-body">
                <form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form" class="form-horizontal">
                    <div class="text-center">{{ text_installation_progress }}</div>
                    <div class="progress">
                        <div id="progress-create-cache" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                            <span class="sr-only"></span>
                        </div>
                    </div>.
                    <div class="progress-info text-center"></div>
                </form>  
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(document).ready(function(){
        function update(data){
            var text_progress = 'Step: '+data.step+'/'+data.steps+', Progress:'+data.progress+' - 100%';
            $('.progress-info').text(text_progress);
            $('#progress-create-cache').attr('style', 'width:'+data.progress+'%');
        }
        function install(){
            $.ajax({
                url:'{{ create_cache }}',
                dataType:'json',
                type:'post',
                success:function(json){
                    update(json);
                    if(json['success']){
                        location.href='{{ create_complete }}';
                    }
                    else{
                        install();
                    }

                }
                
            });
        }
        install();
    });
</script>
{{ footer }}
