reminder-bot/web/templates/reminder_dashboard/guild_reminder.html.tera

<div class="columns reminderContent {% if creating %}creator{% endif %}">
    <div class="column discord-frame">
        <article class="media">
            <figure class="media-left">
                <p class="image is-32x32 customizable">
                    <a>
                        <img class="is-rounded discord-avatar" src="/static/img/bg.webp" alt="Image for discord avatar">
                    </a>
                </p>
            </figure>
            <div class="media-content">
                <div class="content">
                    <div class="discord-message-header">
                        <label class="is-sr-only">Username Override</label>
                        <input class="discord-username message-input" placeholder="Username Override"
                               maxlength="32" name="username">
                    </div>
                    <label class="is-sr-only">Message</label>
                    <textarea class="message-input autoresize discord-content"
                              placeholder="Message Content..."
                              maxlength="2000" name="content" rows="1"></textarea>

                    <div class="discord-embed">
                        <div class="embed-body">
                            <button class="change-color button is-rounded is-small">
                                <span class="is-sr-only">Choose embed color</span><i class="fas fa-eye-dropper"></i>
                            </button>
                            <div class="a">
                                <div class="embed-author-box">
                                    <div class="a">
                                        <p class="image is-24x24 customizable">
                                            <a>
                                                <img class="is-rounded embed_author_url" src="/static/img/bg.webp" alt="Image for embed author">
                                            </a>
                                        </p>
                                    </div>

                                    <div class="b">
                                        <label class="is-sr-only" for="embedAuthor">Embed Author</label>
                                        <textarea
                                                class="discord-embed-author message-input autoresize"
                                                placeholder="Embed Author..." rows="1" maxlength="256"
                                                name="embed_author"></textarea>
                                    </div>
                                </div>

                                <label class="is-sr-only" for="embedTitle">Embed Title</label>
                                <textarea class="discord-title message-input  autoresize"
                                          placeholder="Embed Title..."
                                          maxlength="256" rows="1"
                                          name="embed_title"></textarea>
                                <br>
                                <label class="is-sr-only" for="embedDescription">Embed Description</label>
                                <textarea class="discord-description message-input autoresize "
                                          placeholder="Embed Description..."
                                          maxlength="4096" name="embed_description"
                                          rows="1"></textarea>
                                <br>

                                <div class="embed-multifield-box">
                                    <div data-inlined="1" class="embed-field-box">
                                        <label class="is-sr-only" for="embedFieldTitle">Field Title</label>
                                        <div class="is-flex">
                                            <textarea class="discord-field-title field-input message-input autoresize"
                                                      placeholder="Field Title..." rows="1"
                                                      maxlength="256" name="embed_field_title[]"></textarea>
                                            <button class="button is-small inline-btn">
                                                <span class="is-sr-only">Toggle field inline</span><i class="fas fa-arrows-h"></i>
                                            </button>
                                        </div>

                                        <label class="is-sr-only" for="embedFieldValue">Field Value</label>
                                        <textarea
                                                class="discord-field-value field-input message-input autoresize "
                                                placeholder="Field Value..."
                                                maxlength="1024" name="embed_field_value[]"
                                                rows="1"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="b">
                                <p class="image thumbnail customizable">
                                    <a>
                                        <img class="embed_thumbnail_url" src="/static/img/bg.webp" alt="Square thumbnail embedded image">
                                    </a>
                                </p>
                            </div>
                        </div>

                        <p class="image is-400x300 customizable">
                            <a>
                                <img class="embed_image_url" src="/static/img/bg.webp" alt="Large embedded image">
                            </a>
                        </p>

                        <div class="embed-footer-box">
                            <p class="image is-20x20 customizable">
                                <a>
                                    <img class="is-rounded embed_footer_url" src="/static/img/bg.webp" alt="Footer profile-like image">
                                </a>
                            </p>

                            <label class="is-sr-only" for="embedFooter">Embed Footer text</label>
                            <textarea class="discord-embed-footer message-input autoresize "
                                      placeholder="Embed Footer..."
                                      maxlength="2048" name="embed_footer" rows="1"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </article>
    </div>
    <div class="column settings">
        <div class="columns is-mobile reminder-topbar">
            <div class="column">
                <div class="field">
                    <div class="control">
                        <label class="label sr-only">Reminder Name</label>
                        <input class="input" type="text" name="name" placeholder="Reminder Name">
                    </div>
                </div>
            </div>
            <div class="column is-narrow">
                <button class="button is-rounded hide-box">
                    <span class="is-sr-only">Hide reminder</span><i class="fas fa-chevron-down"></i>
                </button>
            </div>
        </div>

        <div class="columns">
            <div class="column">
                <div class="field channel-field">
                    <div class="collapses">
                        <label class="label" for="channelOption">Channel*</label>
                    </div>
                    <div class="control has-icons-left">
                        <div class="select">
                            <select name="channel" class="channel-selector">
                            </select>
                        </div>
                        <div class="icon is-small is-left">
                            <i class="fas fa-hashtag"></i>
                        </div>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="field">
                    <div class="control">
                        <label class="label collapses">
                            Time*
                            <input class="input" type="datetime-local" step="1" name="time">
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <div class="collapses">
            <div class="is-locked">
                <div class="field">
                    <label class="label">Interval <a class="foreground" href="/help/interval"><i class="fas fa-question-circle"></i></a></label>
                    <div class="control intervalSelector" style="min-width: 400px;" >
                        <div class="input interval-group">
                            <div class="interval-group-left">
                                <label>
                                    <span class="is-sr-only">Interval months</span>
                                    <input class="w2" type="text" pattern="\d*" name="interval_months" maxlength="2" placeholder=""> <span class="half-rem"></span> months, <span class="half-rem"></span>
                                </label>
                                <label>
                                    <span class="is-sr-only">Interval days</span>
                                    <input class="w3" type="text" pattern="\d*" name="interval_days" maxlength="4" placeholder=""> <span class="half-rem"></span> days, <span class="half-rem"></span>
                                </label>
                                <label>
                                    <span class="is-sr-only">Interval hours</span>
                                    <input class="w2" type="text" pattern="\d*" name="interval_hours" maxlength="2" placeholder="HH">:
                                </label>
                                <label>
                                    <span class="is-sr-only">Interval minutes</span>
                                    <input class="w2" type="text" pattern="\d*" name="interval_minutes" maxlength="2" placeholder="MM">:
                                </label>
                                <label>
                                    <span class="is-sr-only">Interval seconds</span>
                                    <input class="w2" type="text" pattern="\d*" name="interval_seconds" maxlength="2" placeholder="SS">
                                </label>
                            </div>
                            <button class="clear"><span class="is-sr-only">Clear interval</span><span class="icon"><i class="fas fa-trash"></i></span></button>
                        </div>
                    </div>
                </div>

                <div class="field">
                    <div class="control">
                        <label class="label">
                            Expiration
                            <input class="input" type="datetime-local" step="1" name="expiration">
                        </label>
                    </div>
                </div>
            </div>

            <div class="columns">
                <div class="column has-text-centered">
                    <div class="is-boxed">
                        <label class="label">Enable TTS <input type="checkbox" name="tts"></label>
                    </div>
                </div>
                <div class="column has-text-centered">
                    <div class="is-boxed">
                        <label class="label">Pin Message <input type="checkbox" name="pin"></label>
                    </div>
                </div>
                <div class="column has-text-centered">
                    <div class="file is-small is-boxed">
                        <label class="file-label">
                            <input class="file-input" type="file" name="attachment">
                            <span class="file-cta">
                                <span class="file-label">
                                    Add Attachment
                                </span>
                                <span class="file-icon">
                                    <i class="fas fa-upload"></i>
                                </span>
                            </span>
                        </label>
                    </div>
                </div>
            </div>

            <div>
                <span class="pad-left"></span>
                {% if creating %}
                    <button class="button is-success" id="createReminder">
                        <span>Create Reminder</span> <span class="icon"><i class="fas fa-sparkles"></i></span>
                    </button>
                    <button class="button is-success is-outlined" id="createTemplate">
                        <span>Create Template</span> <span class="icon"><i class="fas fa-file-spreadsheet"></i></span>
                    </button>
                    <button class="button is-outlined show-modal is-pulled-right" data-modal="chooseTemplateModal">
                        Load Template
                    </button>
                {% else %}
                    <button class="button is-success save-btn">
                        <span>Save</span> <span class="icon"><i class="fas fa-save"></i></span>
                    </button>
                    <button class="button is-warning disable-enable">
                    </button>
                    <button class="button is-danger delete-reminder">
                        Delete
                    </button>
                {% endif %}
            </div>
        </div>
    </div>
</div>