{{ header }}{{ column_left }}
<div id="content">
    <div class="page-header">
        <div class="container-fluid">
            <div class="pull-right">
                <button type="submit" form="form-article-list" data-toggle="tooltip" title="{{ button_save }}" class="btn btn-primary"><i class="fa fa-save"></i></button>
                <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a></div>
            <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">
        {% 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 %}
        <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="{{ action }}" method="post" enctype="multipart/form-data" id="form-article-list" class="form-horizontal">
                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-name">{{ entry_name }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" value="{{ name }}" placeholder="{{ entry_name }}" id="input-name" class="form-control" />
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-status">{{ entry_status }}</label>
                        <div class="col-sm-10">
                            <select name="status" id="input-status" class="form-control">
                                {% if status %}
                                    <option value="1" selected="selected">{{ text_enabled }}</option>
                                    <option value="0">{{ text_disabled }}</option>
                                {% else %}
                                    <option value="1">{{ text_enabled }}</option>
                                    <option value="0" selected="selected">{{ text_disabled }}</option>
                                {% endif %}
                            </select>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="col-sm-2 control-label" for="input-article-list">{{ entry_article_list }}</label>
                        <div class="col-sm-10">
                            <input type="text" name="article" value="" placeholder="{{ entry_article_list }}" id="input-article-list" class="form-control" />
                            <div id="blog-article" class="well well-sm" style="height: 150px; overflow: auto;">
                                {% for article in articles %}
                                <div id="blog-article{{ article.article_id }}"><i class="fa fa-minus-circle"></i> {{ article.name }}
                                    <input type="hidden" name="article[]" value="{{ article.article_id }}" />
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    <!--
        $('input[name=\'article\']').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: 'index.php?route=blog/article/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
                    dataType: 'json',
                    success: function(json) {
                        response($.map(json, function(item) {
                            return {
                                label: item['name'],
                                value: item['article_id']
                            }
                        }));
                    }
                });
            },
            select: function(item) {
                $('input[name=\'article\']').val('');

                $('#blog-article' + item['value']).remove();

                $('#blog-article').append('<div id="blog-article' + item['value'] + '"><i class="fa fa-minus-circle"></i> ' + item['label'] + '<input type="hidden" name="article[]" value="' + item['value'] + '" /></div>');
            }
        });

        $('#blog-article').delegate('.fa-minus-circle', 'click', function() {
            $(this).parent().remove();
        });
    //-->
    </script>
</div>
{{ footer }}