{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <h1>{{ heading_title }}</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="row">
            <div class="col-md-3 col-sm-12">
                <div class="theme-option-container">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title">{{ text_dashboard_menu }}</h3>
                        </div>
                        <ul class="nav nav-tabs menu-sections pt-dashboard-menu">
                            {% set i = 0 %}
                            {% for menu in plaza_menus %}
                                {% if menu.child %}
                                    <li {% if menu.active %} class="active" {% endif %}>
                                        <a href="#ptcollapse_{{ i }}" data-toggle="collapse" class="parent {% if not menu.active %} collapsed {% endif %}">{{ menu.title }}</a>
                                        <ul id="ptcollapse_{{ i }}" class="collapse {% if menu.active %} in {% endif %}">
                                            {% for item in menu.child %}
                                                <li {% if item.active %} class="active" {% endif %}><a href="{{ item.url }}">{{ item.title }}</a></li>
                                            {% endfor %}
                                        </ul>
                                    </li>
                                {% else %}
                                    <li {% if menu.active %} class="active" {% endif %}><a href="{{ menu.url }}">{{ menu.title }}</a></li>
                                {% endif %}
                                {% set i = i + 1 %}
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-md-9 col-sm-12">
                <div class="theme-option-container">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            <h3 class="panel-title"><i class="fa fa-puzzle-piece"></i> {{ text_list }}</h3>
                        </div>
                        <div class="panel-body">
                            <div id="extension">
                                <fieldset>
                                    {% if error_warning %}
                                        <div class="alert alert-danger alert-dismissible"><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 alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
                                            <button type="button" class="close" data-dismiss="alert">&times;</button>
                                        </div>
                                    {% endif %}
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-hover">
                                            <thead>
                                            <tr>
                                                <td class="text-left">{{ column_name }}</td>
                                                <td class="text-center" width="200px">{{ column_status }}</td>
                                                <td class="text-right" width="100px">{{ column_action }}</td>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            {% if extensions %}
                                                {% for extension in extensions %}
                                                    <tr>
                                                        <td><b>{{ extension.name }}</b></td>
                                                        <td class="text-center">
                                                            {% if not extension.module %}
                                                                <span class="item-status {% if extension.status %}enabled{% else %}disabled{% endif %}">{{ extension.stt_text }}</span>
                                                            {% endif %}
                                                        </td>
                                                        <td class="text-right">{% if extension.installed %}
                                                                {% if extension.module %} <a href="{{ extension.edit }}" data-toggle="tooltip" title="{{ button_add }}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></a> {% else %} <a href="{{ extension.edit }}" data-toggle="tooltip" title="{{ button_edit }}" class="btn btn-primary"><i class="fa fa-pencil"></i></a> {% endif %}
                                                            {% else %}
                                                                <button type="button" class="btn btn-primary" disabled="disabled"><i class="fa fa-pencil"></i></button>
                                                            {% endif %}
                                                            {% if not extension.installed %}<a href="{{ extension.install }}" data-toggle="tooltip" title="{{ button_install }}" class="btn btn-success"><i class="fa fa-plus-circle"></i></a> {% else %} <a href="{{ extension.uninstall }}" data-toggle="tooltip" title="{{ button_uninstall }}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></a>{% endif %}</td>
                                                    </tr>
                                                    {% for module in extension.module %}
                                                        <tr>
                                                            <td class="text-left">&nbsp;&nbsp;&nbsp;<i class="fa fa-folder-open"></i>&nbsp;&nbsp;&nbsp;{{ module.name }}</td>
                                                            <td class="text-center"><span class="item-status {% if module.status %}enabled{% else %}disabled{% endif %}">{{ module.stt_text }}</span></td>
                                                            <td class="text-right"><a href="{{ module.edit }}" data-toggle="tooltip" title="{{ button_edit }}" class="btn btn-info"><i class="fa fa-pencil"></i></a> <a href="{{ module.delete }}" data-toggle="tooltip" title="{{ button_delete }}" class="btn btn-warning"><i class="fa fa-trash-o"></i></a></td>
                                                        </tr>
                                                    {% endfor %}
                                                {% endfor %}
                                            {% else %}
                                                <tr>
                                                    <td class="text-center" colspan="3">{{ text_no_results }}</td>
                                                </tr>
                                            {% endif %}
                                            </tbody>
                                        </table>
                                    </div>
                                </fieldset>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% if categories %}
        <script tpe="text/javascript"><!--
            $('select[name="type"]').on('change', function() {
                $.ajax({
                    url: $('select[name="type"]').val(),
                    dataType: 'html',
                    beforeSend: function() {
                        $('.fa-filter').addClass('fa-circle-o-notch fa-spin');
                        $('.fa-filter').removeClass('fa-filter');
                        $('select[name=\'type\']').prop('disabled', true);
                    },
                    complete: function() {
                        $('.fa-circle-o-notch').addClass('fa-filter');
                        $('.fa-circle-o-notch').removeClass('fa-circle-o-notch fa-spin');
                        $('select[name=\'type\']').prop('disabled', false);
                    },
                    success: function(html) {
                        $('#extension').html(html);
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            });

            $('select[name="type"]').trigger('change');

            $('#extension').on('click', '.btn-success', function(e) {
                e.preventDefault();

                var element = this;

                $.ajax({
                    url: $(element).attr('href'),
                    dataType: 'html',
                    beforeSend: function() {
                        $(element).button('loading');
                    },
                    complete: function() {
                        $(element).button('reset');
                    },
                    success: function(html) {
                        $('#extension').html(html);
                    },
                    error: function(xhr, ajaxOptions, thrownError) {
                        alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                    }
                });
            });

            $('#extension').on('click', '.btn-danger, .btn-warning', function(e) {
                e.preventDefault();

                if (confirm('{{ text_confirm }}')) {
                    var element = this;

                    $.ajax({
                        url: $(element).attr('href'),
                        dataType: 'html',
                        beforeSend: function() {
                            $(element).button('loading');
                        },
                        complete: function() {
                            $(element).button('reset');
                        },
                        success: function(html) {
                            $('#extension').html(html);
                        },
                        error: function(xhr, ajaxOptions, thrownError) {
                            alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
                        }
                    });
                }
            });
            //--></script>
    {% endif %}
</div>
{{ footer }}