<div id="subFormModal" class="modal modal-lg fade" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-1">
            <form id="subForm" class="mb-0 needs-validation" novalidate>
                <div class="modal-header border-bottom-0">
                    <h5 class="modal-title ms-2">
                        <span class="form-create">Add</span>
                        <span class="form-edit">Edit</span>
                        Subscription
                    </h5>
                </div>
                <div class="modal-body p-4">
                    <input type="hidden" data-role="is-id">
                    <div class="row">
                        <div class="col-lg-6 pe-lg-4">
                            <div class="mb-4">
                                <label for="subName" class="form-label">Name</label>
                                <input type="text" id="subName" name="subName" class="form-control rounded-1" required data-field="name">
                                <div class="form-text">Human-readable name for this entry.</div>
                            </div>
                        </div>
                        <div class="col-lg-6 ps-lg-4">
                            <div class="mb-4">
                                <label for="subUrl" class="form-label">URL</label>
                                <input type="url" id="subUrl" name="subUrl" class="form-control rounded-1" required data-field="url">
                                <div class="form-text">Source of <a href="https://en.wikipedia.org/wiki/RSS" class="text-decoration-none" target="_blank">RSS</a> content.</div>
                            </div>
                        </div>
                        <div class="col-lg-6 pe-lg-4">
                            <div class="mb-4">
                                <label for="subMessageStyle" class="form-label">Message Style</label>
                                <select name="subMessageStyle" id="subMessageStyle" class="corbz-select" data-field="message_style" data-default="firstOption">
                                </select>
                                <div class="form-text">Appearance of delivered content.</div>
                            </div>
                        </div>
                        <div class="col-lg-6 ps-lg-4">
                            <div class="mb-4">
                                <label for="subPubThreshold" class="form-label">Publish Threshold</label>
                                <input type="datetime-local" name="subPubThreshold" id="subPubThreshold" class="form-control rounded-1" required data-field="publish_threshold">
                                <div class="form-text">Ignore content older than this date.</div>
                            </div>
                        </div>
                        <div class="col-lg-6 pe-lg-4">
                            <div class="mb-4">
                                <label for="subChannels" class="form-label">Channels</label>
                                <select name="subChannels" id="subChannels" class="corbz-select" multiple data-field="channels" tabindex="5"></select>
                                <div class="form-text">Send content to these channels.</div>
                            </div>
                        </div>
                        <div class="col-lg-6 ps-lg-4">
                            <div class="mb-4">
                                <label for="subFilters" class="form-label">Filters</label>
                                <select name="subFilters" id="subFilters" class="corbz-select" multiple data-field="filters" tabindex="6"></select>
                                <div class="form-text">Filter out unwanted content.</div>
                            </div>
                        </div>
                        <div class="col-lg-6 pe-lg-4">
                            <div class="form-check form-switch">
                                <label for="subActive" class="form-check-label">Enabled</label>
                                <input type="checkbox" id="subActive" name="subActive" class="form-check-input" data-field="active" data-default="true">
                                <div class="form-text">Disabled Subscriptions will be ignored when processing content.</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer px-4 border-top-0">
                    <button type="button" class="btn btn-outline-secondary rounded-1 me-auto ms-0 form-create">
                        <i class="bi bi-dice-5"></i>
                    </button>
                    <button type="button" class="btn btn-danger rounded-1 me-3 ms-0 modal-del-btn form-edit">
                        <i class="bi bi-trash3"></i>
                    </button>
                    <button type="button" class="btn btn-secondary rounded-1 me-auto ms-0 px-4 form-edit" data-bs-toggle="modal" data-bs-target="#subContentModal">
                        <i class="bi bi-archive"></i>
                    </button>
                    <button type="submit" class="btn btn-primary rounded-1 me-0 px-4">
                        <i class="bi bi-floppy"></i>
                    </button>
                    <button type="button" class="btn btn-secondary rounded-1 me-0 ms-3" data-bs-dismiss="modal">
                        <i class="bi bi-arrow-return-right"></i>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<div id="subContentModal" class="modal modal-lg fade" data-bs-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-1">
            <div class="modal-header border-bottom-0">
                <h5 class="modal-title ms-2">
                    <span>Subscription Content</span>
                </h5>
            </div>
            <div class="modal-body p-4">
                <p class="mb-0">
                    Here is the content produced by this subscription.
                </p>
                <div class="table-responsive">
                    <table class="table table-hover align-middle"></table>
                </div>
            </div>
            <div class="modal-footer border-top-0">
                <button type="button" class="btn btn-secondary rounded-1 me-0 px-4" data-bs-toggle="modal" data-bs-target="#subFormModal">
                    <i class="bi bi-arrow-return-right"></i>
                </button>
            </div>
        </div>
    </div>
</div>