add_post.html

{% extends "base.html" %}
{% block content %}

    <h3 class="center-align blue-grey-text text-lighten-5">Add Post</h3>

    <!-- Self customised code mostly from CI tutorials below -->
    <div class="container">
        <div class="row card-panel blue-grey lighten-5">
            <form class="col s12" method="POST" action="{{ url_for('add_post') }}">
                <!-- category selection -->
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-folder prefix grey-text text-darken-4"></i>
                        <select id="category_name" name="category_name" type="text" class="validate" required>
                            <option value="" disabled selected>Choose Category</option>
                            {% for category in categories %}
                                <option value="{{ category.category_name }}">{{ category.category_name }}</option>
                            {% endfor %}
                        </select>
                        <label for="category_name">Category</label>
                    </div>
                </div>
                <!-- post title -->
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-pencil-alt prefix grey-text text-darken-4"></i>
                        <input id="title_text" name="title_text" type="text" minlength="5"
                            maxlength="50" data-length="50" class="validate" required>
                        <label for="title_text">Title of your post</label>
                    </div>
                </div>
                <!-- post summary -->
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-align-justify prefix grey-text text-darken-4"></i>
                        <textarea id="summary" name="summary" class="materialize-textarea validate" minlength="5"
                            maxlength="250" data-length="250"  required></textarea>
                        <label for="summary">Title short description</label>
                    </div>
                </div>
                <!-- post body -->
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-book-open prefix grey-text text-darken-4"></i>
                        <textarea id="post_body" name="post_body" class="materialize-textarea validate" minlength="5"
                            data-length="4000" required></textarea>
                        <label for="post_body">Write your main text</label>
                    </div>
                </div>
               <!-- user contact -->
               <!-- input patern attr from https://www.w3resource.com/javascript/form/email-validation.php -->
               <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-at prefix grey-text text-darken-4"></i>
                        <input id="email" name="email" type="email" minlength="5"
                            maxlength="50" data-length="50" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{1,63}$" class="validate">
                        <label for="email">Contact email</label>
                    </div>
                </div>
                <!-- image link -->
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-image prefix grey-text text-darken-4"></i>
                        <input id="image_link" name="image_link" type="url" minlength="5"
                            maxlength="1000" class="validate" required>
                        <label for="image_link">Post related image link</label>
                    </div>
                </div>
                <!-- image title -->
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-pencil-alt prefix grey-text text-darken-4"></i>
                        <input id="image_title" name="image_title" type="text" minlength="5"
                            maxlength="50" data-length="50" class="validate" required>
                        <label for="image_title">Image title</label>
                    </div>
                </div>
                <!-- post date -->
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-calendar-alt prefix grey-text text-darken-4"></i>
                        <input  id="date_post" name="date_post" type="text" class="datepicker validate" required>
                        <label for="date_post">Date</label>
                    </div>
                </div>
                <!-- submit button -->
                <div class="row">
                    <div class="col s12">
                        <button type="submit" class="col s12 waves-effect waves-light btn-large blue-grey-text text-lighten-5 grey darken-2 z-depth-3">
                            Add Post <i class="fas fa-paper-plane"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
{% endblock %}