{% extends "base.html" %}

{% block title %}Mithril{% endblock %}

{% block body %}
<main class="documentation">
    <div style="text-align:left;width:100%;">
        <div style="background:#fff;text-align:left;width:100vw;padding:10vh 0 0;">
            <div class="filter flex six-600 four grow">
                <div class="sixth-600 none"></div>
                <div>
                    <a href="/" class="navy" style="font-size:smaller;">Semua</a>
                </div>
                <div>
                    <a href="/?status=1" class="navy" style="font-size:smaller;">Aktif</a>
                </div>
                <div>
                    <a href="/?status=2" class="navy" style="font-size:smaller;">Belum Aktif</a>
                </div>
                <div>
                    <a href="/?status=0" class="navy" style="font-size:smaller;">Nonaktif</a>
                </div>
                <div class="sixth-600 none"></div>
            </div>
            <div id="mit">
            </div>
        </div>
    </div>
</main>

<script>
    var root = document.getElementById('mit')

    var Post = {
        list: [],
        loadList: function() {
            return m.request({
                method: 'GET',
                url: '/api/posts',
                withCredentials: true
            })
            .then(function(result) {
                Post.list = result.data
            })
        }
    }

    var PostList = {
        oninit: Post.loadList,
        view: function() {
            // return m('.user-list', Post.list.map(function(post) {
            //     return m('.user-list-item', post.content + ' ' + post.category)
            // }))
            return m('.bungkus.flex.four-900.full.card-wrapper', {style:'padding:0 .6em;'}, [
                m('a.fourth-900.half-600.card.box.new', {href:'/posts/entry'}, m('i.fa.fa-plus.fa-3x', '')),
                Post.list.map(function(post) {
                    return m('.fourth-900.half-600.card.box', {style:'background-color:' + post.background}, [
                        m('span.stack', {style:'font-size:smaller;color:rgba(17,17,17,.4);margin-bottom:.6em;'}, post.valid_at),
                        m('span.stack', {style:'color:' + post.foreground}, post.content),
                        m('form', {method:'post',action:'/'}, m('footer.flex.full.grow', [
                            m('.half-900', m('a.button.full', {href:'/posts/edit/' + post.id}, [
                                m('i.fa.fa-edit.fa-fw', ''),
                                m('span', {style:'font-size:smaller;'}, 'Ubah')
                            ])),
                            m('.half-900', m('button.error.full', {type:'submit'}, [
                                m('i.fa.fa-times-circle-o.fa-fw', ''),
                                m('span', {style:'font-size:smaller;'}, 'Matikan')
                            ]))
                        ]))
                    ])
                })
            ])
        }
    }

    m.mount(root, PostList)
</script>
{% endblock %}