{% extends "base.html" %}

{% block title %}Tambah Pengumuman{% endblock %}

{% block body %}
<main class="documentation">
    <section>
        <h2>Tambah Pengumuman</h2>
        <form method="post">
            <div class="flex three grow">
                <div class="full third-600">
                    <label for="category">Kategori</label>
                    <select name="category">
                        {% for cat in categories %}
                        <option value="{{ cat.id }}">{{ cat.category }}</option>
                        {% endfor %}
                    </select>

                    <br>

                    <label for="expired_at">Berlaku dari: </label>
                    <input id="left" name="valid_at" value="{{ timestamp }}">

                    <br>

                    <label for="expired_at">Berlaku sampai: </label>
                    <input id="right" name="expired_at" value="{{ timestamp }}">

                    <br>
                </div>

                <div class="full two-third-600">
                    <label for="content">Konten: </label>
                    <textarea id="smde" name="content" maxlength="255"></textarea>
                </div>

                <input type="hidden" name="creator" value="{{ user }}">

                <input type="hidden" name="_currts" value="{{ timestamp }}" disabled>

                <input type="hidden" name="_method" value="post">

                <input type="hidden" name="_token" value="{{ token }}">

                <br>

                <button type="submit" class="pseudo">
                    <i class="fa fa-check fa-fw"></i>
                    <span style="font-size:smaller;">Unggah</span>
                </button>
            </div>
        </form>
    </section>
</main>

<script>
    rome(left, {
        dateValidator: rome.val.beforeEq(right),
        time: false
    });
    rome(right, {
        dateValidator: rome.val.afterEq(left),
        time: false
    });

    var simplemde = new SimpleMDE({ element: document.getElementById("smde") });
</script>
{% endblock %}