{% extends "admin/shell.html" %}

{% block title %}Announcement Writer{% endblock %}

{% block head %}
<link rel="stylesheet" href="/static/themes/default/inline-announcement.css"/>
{% endblock %}

{% block page %}
{% match error %}
{% when Some with (error) %}
    <p class="error">{{ error }}</p>
{% when None %}
{% endmatch %}
<form action="/admin/announcement" method="post">
    <h3>announcement writer!</h3>
    <h4>you will be writing announcements as {{ username }}</h4>
    <label for="slug">slug</label>
    <input type="text" name="slug" id="slug" autofocus required value="{{ slug }}">
    <label for="title">title</label>
    <input type="text" name="title" id="title" value="{{ title }}" onchange="document.getElementById('preview-announcement-title').innerText = this.value" required>
    <label for="short-content">short content</label>
    <textarea name="short_content" id="short-content" onchange="document.getElementById('preview-announcement-body').innerText = this.value" required>{{ short_content }}</textarea>
    <label for="full-content">full content</label>
    <textarea name="full_content" id="full-content" required>{{ full_content }}</textarea>
    <label for="send_emails">send emails?</label>
    <input type="checkbox" name="send_emails" id="send_emails" value="send">
    <button type="submit">post! (check previews first always pls)</button>
</form>
<div id="preview">
    <h3>this is what your announcement will look like on the frontpage!</h3>
    <div class="announcement">
        <span class="announcement-date" id="preview-announcement-date">Mon, 18 Nov 2024 21:00:00 +0000</span>
        <h4 id="preview-announcement-title">filled in by javascript</h4>
        <p id="preview-announcement-body"></p>
        <p><a>Read More...</a></p>
    </div>
</div>
{% endblock %}