{% extends "base.html" %}

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

{% block nav %}
<input type="checkbox" id="bmenug" class="show">
<label for="bmenug" class="burger pseudo button"><i class="fa fa-bars" aria-hidden="true"></i></label>
<div class="menu">
    {% if user.privilege != "" %}
        {% if user.privilege == 1 %}
            <a href="/posts/category" class="navy button" data-tooltip="Kategori"><i class="fa fa-list-ul" aria-hidden="true"></i>&nbsp;Kategori</a>
            <a href="/register" class="navy button" data-tooltip="User Baru"><i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;User</a>
        {% endif %}
        <a href="/logout" class="navy button" data-tooltip="Keluar"><i class="fa fa-sign-out" aria-hidden="true"></i>&nbsp;Keluar</a>
    {% else %}
        <a href="/login" class="navy hidden-hover button" data-tooltip="Masuk">
            <i class="fa fa-sign-in" aria-hidden="true"></i>&nbsp;Masuk
        </a>
    {% endif %}
</div>
{% endblock %}

{% block body %}
<main class="documentation">
    <div id="nouser" style="text-align:left;width:100%;">
        <div style="background:#fff;text-align:left;width:100vw;padding:10vh 0 0;">
            <div id='navigasi'>
            </div>
            <div id="mit">
            </div>
        </div>
    </div>
</main>
<script>
    var root = document.getElementById('mit')

    var Nav = {
        view: function() {
            return m('.filter.flex.six-600.four.grow', [
                m('.sixth-600.none', ''),
                m('div', m('a[href=/].navy', {
                    oncreate: m.route.link,
                    style: 'font-size:smaller;'
                }, 'Semua')),
                m('div', m('a[href=/active].navy', {
                    oncreate: m.route.link,
                    style: 'font-size:smaller;'
                }, 'Aktif')),
                m('div', m('a[href=/soon].navy', {
                    oncreate: m.route.link,
                    style: 'font-size:smaller;'
                }, 'Belum Aktif')),
                m('div', m('a[href=/inactive].navy', {
                    oncreate: m.route.link,
                    style: 'font-size:smaller;'
                }, 'Nonaktif')),
                m('.sixth-600.none', '')
            ])
        }
    }

    var Slider = {
        view: function() {
            return m('#slidr-div', Post.list.map(function(post) {
                return m('div[data-slidr=' + post.id + ']', {
                    style: 'color:' + post.foreground + ';background-color:' + post.background + ';width:100vw;height:100vh;'
                }, m('div', {style: 'padding:15vh 0;'}, m.trust(marked(post.content))))
            }))
        }
    }

    var Post = {
        list: [],
        curStatus: 3,
        interval: 10000,
        loadList: function() {
            return m.request({
                method: 'GET',
                url: '/api/posts/' + Post.curStatus,
                withCredentials: true
            })
            .then(function(result) {
                Post.list = result.data
                console.log('cek')
            })
        }
    }

    var Component = {
        view: function() {
            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 + ' - ' + post.expired_at),
                        m('span.stack', {style:'color:' + post.foreground}, m.trust(marked(post.content))),
                        m('form', {method:'post',action:'/'}, m('footer.flex.full.grow', (post.status != 0) ? [
                            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', (post.status == 1) ? [
                                m('input', {type: 'hidden', name: 'id'}, post.id),
                                m('input', {type: 'hidden', name: 'status'}, '0'),
                                m('input', {type: 'hidden', name: '_method'}, 'delete'),
                                m('input', {type: 'hidden', name: '_token'}, 'abc123'),
                                m('button.error.full', {type: 'submit'}, [
                                    m('i.fa.fa-times-circle-o.fa-fw', ''),
                                    m('span', {style: 'font-size:smaller'}, 'Matikan')
                                ])
                            ] : [
                                m('input', {type: 'hidden', name: 'id'}, post.id),
                                m('input', {type: 'hidden', name: 'valid_at'}, '##date##'),
                                m('input', {type: 'hidden', name: 'status'}, '1'),
                                m('input', {type: 'hidden', name: '_method'}, 'put'),
                                m('input', {type: 'hidden', name: '_token'}, 'abc123'),
                                m('button.success.full', {type: 'submit'}, [
                                    m('i.fa.fa-check.fa-fw', ''),
                                    m('span', {style: 'font-size:smaller;'}, 'Aktifkan')
                                ])
                            ])
                        ] : m('.half-900', m('span.button.pseudo.full', {style: 'color:rgba(17,17,17,.3);'}, 'Nonaktif'))))
                    ])
                })
            ])
        }
    }

    var PostNoUser = {
        oninit: function() {
            Post.curStatus = 1
            Post.loadList()
            setInterval(function() {
                Post.loadList()
            }, Post.interval)
        },
        view: function() {
            return m(Slider)
        }
    }

    var PostList = {
        oninit: function() {
            Post.curStatus = 3
            Post.loadList()
            setInterval(function() {
                Post.loadList()
            }, Post.interval)
        },
        view: function() {
            return m(Component)
        }
    }

    var PostActive = {
        oninit: function() {
            Post.curStatus = 1
            Post.loadList()
            setInterval(function() {
                Post.loadList()
            }, Post.interval)
        },
        view: function() {
            return m(Component)
        }
    }

    var PostSoon = {
        oninit: function() {
            Post.curStatus = 2
            Post.loadList()
            setInterval(function() {
                Post.loadList()
            }, Post.interval)
        },
        view: function() {
            return m(Component)
        }
    }

    var PostInactive = {
        oninit: function() {
            Post.curStatus = 0
            Post.loadList()
            setInterval(function() {
                Post.loadList()
            }, Post.interval)
        },
        view: function() {
            return m(Component)
        }
    }
</script>
{% if user != false %}
<script>
    m.mount(document.getElementById('navigasi'), Nav)

    m.route(root, '', {
        '': PostList,
        '/': PostList,
        '/active': PostActive,
        '/soon': PostSoon,
        '/inactive': PostInactive,
    })
</script>
{% else %}
<script>
    m.mount(document.getElementById('nouser'), PostNoUser)

    setTimeout(function() {
        if (document.getElementById('slidr-div')) {
            var postids = function() {
                return Post.list.map(function(post) {
                    return post.id
                }) + ',' + Post.list[0].id
            }
            slidr.create('slidr-div', {
                controls: false,
                timing: {'linear': '0.5s ease-in'},
                theme: '#666',
                touch: true
            }).add("h", (postids()).split(',')).start().auto();
        }
    }, 100)
</script>
{% endif %}

{% endblock %}