view-filter-render.hbs

<div id="output-card" class="card mt-4 shadow-sm {{#if saved_ok}}border-success{{/if}}">
    {{#if saved_ok}}
        <div id="output-header" class="card-header bg-success text-white">
            Filter parameters saved, don't forget to
            <a class="text-white" href="{{href "help" "refresh-list"}}">refresh your list</a> in uBlock.
        </div>
    {{else if @root.UserLoggedIn}}
        <div id="output-header" class="card-header d-flex justify-content-between align-items-center">
            Preview
        </div>
    {{else}}
        <form method="POST" class="card-header" action="{{href "user-action" "loginOrRegistration"}}">
            {{{csrf @root}}}
            <button type="button" class="btn btn-sm btn-outline-success me-1" onclick="copyFilterOutput(this);">
                {{>icon name="clipboard" class="button-icon"}}
                <span id="output-copy-text">Copy this to your uBlock filters</span>
            </button>
            <span class="align-middle">or</span>
            <button type="submit" class="btn btn-link p-0">
                {{#if @root.UserHasAccount}}
                    login to save this filter to your list
                {{else}}
                    create an account and start building your custom filter list
                {{/if}}
            </button>
        </form>
    {{/if}}
    <div class="card-body">
        <code id="output-code" class="card-text text-primary" style="white-space:pre-wrap">{{rendered}}</code>
    </div>
</div>