{% extends "base.html" %}

{% block title %}Pengumuman{% 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 style="text-align:left;width:100%;">

        {% if user.privilege == "" %}
            {% if not posts %}
            <div style="background:#fff;text-align:left;max-width:100vw;padding:10vh 0 0;">
                <h1 class="fitty pengumuman">Tidak ada pengumuman</h1>
            </div>
            {% else %}
            <div id="slidr-div">
                {% for post in posts %}
                    <div data-slidr="{{ post.id }}" style="color:{{ post.foreground }};background-color:{{ post.background }};width:100vw;height:100vh;">
                        <div style="padding:15vh 0">
                            {{ post.content|rendermd }}
                        </div>
                    </div>
                {% endfor %}
            </div>
            {% endif %}

        {% else %}
        <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 class="flex four-900 full card-wrapper" style="padding: 0 .6em;">
                <a href="/posts/entry" class="fourth-900 half-600 card box new">
                    <i class="fa fa-plus fa-3x"></i>
                </a>

                {% for post in posts %}
                    <div class="fourth-900 half-600 card box" style="background-color:{{ post.background }};">
                        <span class="stack" style="font-size:smaller;color:rgba(17,17,17,.4);margin-bottom:.6em;">[{{ post.valid_at|date("d/m/Y") }} - {{ post.expired_at|date("d/m/Y") }}]</span>
                        <span class="stack" style="color:{{ post.foreground }};">{{ post.content|rendermd }}</span>
                        <form method="post" action="/">
                            <footer class="flex full grow">
                                {% if post.status != 0 %}
                                    {% if user.userid == post.creator %}
                                        <div class="half-900">
                                            <a href="/posts/edit/{{ post.id }}" class="button full">
                                                <i class="fa fa-edit fa-fw"></i>
                                                <span style="font-size:smaller;">Ubah</span>
                                            </a>
                                        </div>
                                    {% else %}
                                        <div class="half-900">
                                            <span class="button pseudo full" style="color:rgba(17,17,17,.3)">Tidak dapat diubah</span>
                                        </div>
                                    {% endif %}
                                {% else %}
                                    <div class="half-900">
                                        <span class="button pseudo full" style="color:rgba(17,17,17,.3)">Nonaktif</span>
                                    </div>
                                {% endif %}
                                {% if (post.status == 1 and user.userid == post.creator) %}
                                    <div class="half-900">
                                        <input type="hidden" name="id" value="{{ post.id }}">
                                        <input type="hidden" name="status" value="0">
                                        <!-- Method -->
                                        <input type="hidden" name="_method" value="delete">
                                        <!-- Token -->
                                        <input type="hidden" name="_token" value="{{ token }}">
                                        <button type="submit" class="error full">
                                            <i class="fa fa-times-circle-o fa-fw" aria-hidden="true"></i>
                                            <span style="font-size:smaller;">Matikan</span>
                                        </button>
                                    </div>
                                {% elseif (post.status == 2 and user.userid == post.creator) %}
                                    <div class="half-900">
                                        <input type="hidden" name="id" value="{{ post.id }}">
                                        <input type="hidden" name="valid_at" value="##date##">
                                        <input type="hidden" name="status" value="1">
                                        <!-- Method -->
                                        <input type="hidden" name="_method" value="put">
                                        <!-- Token -->
                                        <input type="hidden" name="_token" value="{{ token }}">
                                        <button type="submit" class="success full">
                                            <i class="fa fa-check fa-fw" aria-hidden="true"></i>
                                            <span style="font-size:smaller;">Aktifkan</span>
                                        </button>
                                    </div>
                                {% endif %}
                            </footer>
                        </form>
                    </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</main>
<footer class="cp">
    Copyright 2017. Perguruan Tinggi Lepisi. Bingung? Lihat <a href="https://backup.lepisi.ac.id/gregorio/lepisi-pengumuman/blob/master/README.md#dokumentasi" target="_blank">dokumentasi</a>.
</footer>
<script>
    if (document.getElementById('slidr-div')) {
        slidr.create('slidr-div', {
            controls: false,
            timing: {'linear': '0.5s ease-in'},
            theme: '#666',
            touch: true
        }).add("h", [{% for post in posts %}"{{ post.id }}", {% endfor %} {% if posts|length > 1 %}"{{ posts.0.id }}"{% endif %}]).start().auto();
    }
</script>
{% endblock %}
