{% 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 privilege != "" %}
            {% if privilege == 1 %}
                <a href="/posts/category" class="navy" data-tooltip="Kategori"><i class="fa fa-list-ul" aria-hidden="true"></i>&nbsp;Kategori</a>
                <a href="/register" class="navy" data-tooltip="User Baru"><i class="fa fa-user-plus" aria-hidden="true"></i>&nbsp;User</a>
            {% endif %}
            <a href="/logout" class="navy" data-tooltip="Keluar"><i class="fa fa-sign-out" aria-hidden="true"></i>&nbsp;Keluar</a>
        {% else %}
            <a href="/login" class="navy hidden-hover" 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="background:#fff;text-align:left;width:100%;padding:80px 0 0;">

        {% if privilege == "" %}
            <div id="slidr-div">
            {% if not posts %}
                <h1 class="fitty">Tidak ada pengumuman</h1>
            {% else %}
                {% for post in posts %}
                    <div data-slidr="{{ post.id }}" style="width: 100%;">
                        <div class="fitty" style="padding: 0 5rem">
                            {{ post.content|rendermd }}
                        </div>
                    </div>
                {% endfor %}
            {% endif %}
            </div>

        {% else %}
            <div class="filter flex six-600 four grow">
                <div class="sixth-600 none"></div>
                <a href="/" class="navy noFitty">Semua</a>
                <a href="/?status=1" class="navy noFitty">Aktif</a>
                <a href="/?status=2" class="navy noFitty">Belum Aktif</a>
                <a href="/?status=0" class="navy noFitty">Nonaktif</a>
                <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">
                            <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">{{ post.content|rendermd }}</span>
                            <form method="post">
                                <footer class="flex full grow">
                                    {% if post.status != 0 %}
                                        <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)">Nonaktif</span>
                                        </div>
                                    {% endif %}
                                    {% if (post.status == 1 and editor_now.id == creator.id) %}
                                        <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 editor_now.id == creator.id) %}
                                        <div class="half-900">
                                            <input type="hidden" name="id" value="{{ post.id }}">
                                            <input type="hidden" name="valid_at" value="##date##">
                                            <!-- 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>
        {% endif %}

    </div>
</main>

<script>
    fitty('.fitty', {
        minSize: 120,
        maxSize: 700
    });

    fitty('.noFitty', {
        minSize: 15,
        maxSize: 15
    });

    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 %}