{% extends "layout.html" %}

{% block content %}
    <h2>Article list.</h2>

    <table data-toggle="table" id="article-lists" class="table table-hover" data-pagination="true"
           data-detail-view="true"
           data-detail-formatter="detailFormatter"
           data-search="true"
           data-show-toggle="true"
           data-show-columns="true"
           data-striped="true"
           data-sort-stable="true"
           data-show-pagination-switch="true"
           data-id-field="id"
           data-click-to-select="false"
           >
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="id" data-align="center" data-sortable="true">No.</th>
                <th data-field="path" data-align="center" data-sortable="true">file path</th>
                <th data-field="title" data-align="center" data-sortable="true">Title</th>
                <th data-field="authors" data-align="center" data-sortable="true">Authors</th>
                <th data-field="status" data-align="center" data-sortable="true">Status</th>
                <th data-field="action" data-align="center">Action</th>
            </tr>
        </thead>

    </table>
{% endblock %}

{% block script %}
<script type="text/javascript">
    function make_data(){
        var data = []
        {% for article in articles %}
            var status = function(){
                return 'published'
            }
            data.push({
                "id": {{ loop.index }},
                "path": "{{ article.path }}",
                "title": "{{ article.meta['title'] }}",
                "authors": "{{ article.meta['authors'] }}",
                "status": function(){
                    {% if article.meta['status'] == 'draft' %}
                        return '<span class="label label-warning">draft</span>'
                    {% elif article.meta['status'] == 'published' %}
                        return '<span class="label label-success">published</span>'
                    {% else %}
                        return ''
                    {% endif %}
                }(),
                "action": "<a href='{{ url_for('article.edit', path=article.path) }}'>Edit</a>"
            })
        {% endfor %}
        return data
    }
    function detailFormatter(index, row) {
        var html = [];
        $.each(row, function(key, value) {
            html.push('<p><b>' + key + ':</b> ' + value + '</p>');
        });
        return html.join('');
    }

    /**
     * 生成表头与菜单
     * @return {[type]} [description]
     */
    function make_header(){
        var menu = [
            {'id': 'Id'}
        ]
        console.log(menu)
    }
    $(document).ready(function(){
        make_header()
        var $table = $("#article-lists");
        var data = make_data()

        $table.bootstrapTable('destroy')
            .bootstrapTable({
                data: data,
                onExpandRow: function (index, row, $detail) {
                   $detail.hide().fadeIn('slow');
                 },
            })
            .bootstrapTable('hideColumn', 'path')
        console.log(data)
    })
</script>
{% endblock %}
