create_a_post.html

{% extends "layout.html" %}

{% block optional_c %}
    <link href="/static/styles/post.css" rel="stylesheet">
    <script src="/static/scripts/createpost.js"></script>
{% endblock %}

{% block title %}
    Create A Post
{% endblock %}

{% block main %}
    <div class="container-main o-profile">
        <h3>Create A Post</h3>
        <form action="/createpost" method="post" enctype="multipart/form-data">
            <img id="preview" src="">
            <div class="mb-3">
                <label class="form-label">Upload Image</label>
                <input name="image-upload" id="image-input" class="form-control post-image" type="file" accept="image/png, image/jpeg">
                <div id="warning0" style="color: red;"></div>
            </div>
            <div class="mb-3">
                <label class="form-label">Add A Title</label>
                <input autocomplete="off" class="form-control mx-auto w-auto" required id="title" name="title" placeholder="Title (required)" type="text" minlength="5" maxlength="70">
                <div id="warning1" style="color: red"></div>
            </div>
            <div class="mb-3">
                <label class="form-label">Add A Description</label>
                <textarea autocomplete="off" class="form-control mx-auto w-auto" required id="contents" name="contents" placeholder="Description (required)" type="text" rows="5" maxlength="640"></textarea>
                <div id="warning2" style="color: red"></div>
            </div>
            <div class="mb-3">
                <label class="form-label">Add Tags</label>
                <input autocomplete="off" class="form-control mx-auto w-auto" id="tagInput" value="" placeholder="Tags e.g. #tag1 #tag2 (required)" type="text" name="tagInput">
                <div id="warning3" style="color: red;"></div>
                <div id="tagList"></div>
            </div>
            <button id="submit_button" class="btn btn-primary btn-prof btn-submit" type="submit">Post</button>
        </form>
    </div>
    <script>
        let list = {{ list_of_tags | tojson | safe }};
    </script>
{% endblock %}